(108人评价)
HTML+CSS基础

103集实战教学入门必备

价格 免费

根据w3c的标准,在页面中元素有一个隐含的属性叫做block formatting context

简称bfc,该属性可以设置打开或者关闭,默认是关闭的。

当开启元素的bfc以后,元素将会具有如下的特性:

1.父元素的垂直外边距不会和子元素重叠

2.开启bfc的元素不会被浮动元素所覆盖

3.开启bfc的元素可以包含浮动的子元素

如何开启元素的bfc

1.设置元素浮动

-使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式也会导致下边的元素上移,不能解决问题

2.设置元素绝对定位

跟设置元素浮动差不多,也无法根本解决问题

3.设置元素为inline-block

-可以解决问题,但是会导致宽度丢失,不推荐使用这种方式

display:inline-Blok

4.将元素的overflow设置为一个非visible的值

推荐方式:将overflow设置为hidden是副作用最小的开启bfc的方式。

overflow:auto

这种方式在ie浏览器中在ie6及以下的浏览器内将会无法按照设定的来,会导致高度塌陷,

虽然ie6中没有bfc但是有另一个隐含的属性叫做haslayout.该属性的作用和bfc类似,所以ie6浏览器可以通过haslayout来解决该问题

开启方式很多,我们直接使用副作用最小的:

直接将元素的zoom设置为1即可

zoom表示放大的意思,后边跟着一个数值,写几就将元素放大几倍

例如:zoom:1

表示不放大元素,但是通过该样式可以开启haslayout

zoom这个样式,只在ie中支持,其他浏览器都不支持

[展开全文]

当一个元素设置浮动之后

1.元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动

2.元素浮动以后,会尽量向页面的左上或者是右上漂浮直到遇到父元素的边框或者其他的浮动元素

[展开全文]

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。

但是当为子元素设置浮动以后,子元素会完全脱离文档流,

此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。

所以在开发中一定要避免出现高度塌陷的问题,

我们可以将父元素的高度写死,以免出现高度塌陷的问题出现,但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案是不推荐使用的,

[展开全文]

内联框架:引入一个外部的页面

[展开全文]

块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式

[展开全文]

浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以通过浮动来设置文字环绕图片的效果

在文档流中,子元素的宽度默认占父元素的全部

当元素设置浮动以后,会完全脱离文档流,块元素脱离文档流以后,高度和宽度都被内容撑开

开启span的浮动

 

[展开全文]

display:inline-blok;能使元素变成行内块元素

块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,

如果希望块元素在页面中水平排列,可以使块元素脱离文档流

如果float来使元素浮动,从而脱离文档流

可选值:

none:默认值,元素默认在文档流中排列

left:元素会立即脱离文档流,向页面的左侧浮动

right,元素会立即脱离文档流,向页面的右侧浮动

当为一个元素设置浮动以后(float属性使一个非none的值),

元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动

元素浮动以后,会尽量向页面的左上或这是右上漂浮,

直到遇到父元素的边框或者其他的浮动元素

如果浮动元素上边使一个没有浮动的块元素,则浮动元素不会超过块元素

浮动的元素不会超过他上边的兄弟元素,最多最多一边齐

 

[展开全文]

meta标签可以用来设置网页的关键字

               可以用来指定网页的描述

               

 

 

[展开全文]

html-xhtml-xml

松散-过度-严格

html中:

1、不区分大小写,一般使用小写;

2、注释不能嵌套;

3、标签必须结构完整,成对出现or自结束

*浏览器会最大程度帮助修正,但可能修正失误

4、标签可以嵌套,但不能交叉嵌套

5、标签中的属性必须有值,值必须括上""

[展开全文]

<meta />                                      页面的原数据

*写在<head>中,给搜索引擎看的,但不影响排名

<meta charset=utf-8/>                   

                                                       声明字符集

<meta name="keywords" content="html5"/>

                                         页面的关键字是html5

<meta name="description" content="发布h5、js等前端相关的信息">

                                                      页面的描述

<meta ="refresh" content="5";url="http://www.baidu.com"/>

                               打开页面5秒之后到百度首页

[展开全文]

相对路径:

src=“../../../xx.gif”

多级目录设置

[展开全文]

1、乱码

原因:编码和解码采用的字符集不同

2、字符集

ASCII(美国)、IOS-8859-1(欧洲)、GBK(中国)、GB2312(中文系统默认编码)、UTF-8(万国码)

[展开全文]

1、

W3School离线手册

2、

<标签 属性1=“属性值1” 属性2=“属性值2” ... 属性n="属性值n">

给标签中的内容赋予各种属性

[展开全文]

1、<!--注释-->

养成注释的习惯,力求简洁明了

2、<html></html>

html根标签,有且只有一个

3、<head></head>

标签中的内容用于帮助浏览器解析页面

4、<title></title>

显示在浏览器标题栏,供搜索引擎检索,影响检索引擎中的排名顺序,后期由SEO优化

 5、<body></body>

页面所有可见的主体内容

[展开全文]

1、结构

页面骨架,用HTML

2、表现

内容样式,用CSS

3、行为

操作响应,用JavaScript (JS)

[展开全文]

1、C/S

客户端/服务器

2、B/C

浏览器/服务器

[展开全文]

每一个页面都是一个文档

元素在文档流中的特点 

文档流

文档流处在网页的最低

块元素

1.块元素在文档流中会独占一行,块元素会自上向下排列。

2.块元素在文档流中默认宽度是父元素的100%

3.块元素在文档流中的高度默认被内容撑开

内联元素

1.内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右。

2.在文档流中,内联元素的宽度和高度默认都被撑开

当元素的高度或宽度的值为auto时,此时指定内边距不会影响可见框的大小,而是会自动修改宽度和高度,以适应内边距

[展开全文]

meta标签用来设置网页的一些元数据(字符集、关键字、简介)

meta标签是一个自结束标签

charset

[展开全文]

overflow:溢出

visible:看得见的,可见的

hidden:隐藏的

scroll:滚动、滚屏

auto:直接翻译是汽车在css的意思是会自动根据需求来添加滚动条

overflow

子元素默认是存在于父元素的内容区中,理论上讲子元素的最大值可以等于父元素内容区大小

如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素意外的位置显示,超出父元素的内容,我们称之为溢出内容

父元素默认是将溢出内容,在父元素外边显示,通过overflow可以设置父元素如何处理溢出内容

可选值:

visible,默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示

hidden:溢出的内容,会被修剪,不会显示

scroll,会为父元素添加滚轮,通过拖动滚动条来查看完整内容

该属性不论内容如何是否会溢出,都会添加水平和垂直双方向的滚动条

auto,会根据需求自动添加滚动条,

需要水平就添加水平

需要垂直就添加垂直

 

 

[展开全文]

将一个内联元素设置为一个块元素可以使用:

display样式可以修改元素的类型

可选值:

inline:可以将一个元素作为内联元素显示

block:可以将一个元素设置块元素显示

inline-block:将一个元素转换为行内块元素

-可以使一个元素既有行内元素的特点又有块元素的特点,既可以设置宽高,又不会独占一行

none:不显示元素,并且不会在页面中继续占有位置

display:none

解释:使用该方法后会隐藏该元素,不会在页面中显示,并且不再占据页面的位置

visibility

-可以用来设置元素的隐藏和显示的状态

-可选值:

visible:默认值,元素默认会在页面显示

hidden:元素会隐藏不显示

使用visibility:hidden;隐藏的元素虽然不会在页面中显示,但是他的位置会

[展开全文]

课程特色

视频(103)
下载资料(1)
业界大牛亲自授课
前沿技术实时更新
足不出户学编程
关注尚硅谷微信 一键下载全部视频教程

关注尚硅谷微信

一键下载全部视频教程