Html基本结构、语法规则、常用标记/标签及空格符
一、HTML的定义:
HTML:是超文本标记语言（Hpyer text markup language）;
XHTML是可扩展超文本标记语言（扩展成XML文档）（Extensible text markup language）;
HTML5:指的是第五次大修改规范（新标准）；
二、站点的定义：
是存放整个网站的素材，网页及他们之间的联系；
站点文件夹的命名：
文件夹名只能以小写英文字母开头，下划线、数字组合；不能以汉字、空格、特殊字符开头和包含他们；
三、html基本结构、语法标准：
1、html文档命名：
①、必须一小写英文字母开头、下划线、数字组合；
②、不能用汉字、空格、特殊字符(标点符号)；
③、文档后缀名：html/htm;
④、首页必须命名成index.html或index.htm(这主要是因为加超链接必须以此规则命名)
2、html基本结构：
<!doctype html>（声明文档类型）
<html>（说明写的是html标记语言）
<head>（头部信息）
<meta charset="utf-8"/>（告诉服务器用的是国际编码格式）
<title>网站标题</html>（显示在网页状态栏上）
</head>
<body>
所要写的网站内容（网页的内容可以是文本、图像等）
</body>
</html>
3、用电脑中的记事本/文本文档（text）,来写HTML5文档，不能插入图片，只能用写文本和标记（经常用，要会）
说明：保存的时候要另存为html格式且编码格式要勾选成utf-8;
4、html的语法（就是标准）：
1>、<标记 属性=“属性值” 属性=“属性值”>内容文本</标记> （双标记）；
如：<a href="#" title=" " target="-blank/-self"></a>
2>、<标记 属性=“属性值”/>(单标记)
说明：
1）写在<>中的第一个单词叫做标记、标签、元素名；
2）标记和属性用空格隔开，属性与属性值用”=“（等号）链接，属性值要写在””(双引号内)；
3）一个标记可以没有属性也可以有多个属性，属性与属性之间部分先后顺{一个属性也可以有多个属性值（如：标记的id/class名可以取多个名；）}
4）单标记没有结束标记，用”/”来代替结束；
5、网页中有哪些结构：
段落结构
表单结构
列表结构
标题结构
超链接结构
图片结构
表格结构等
6、html的常用标签（重点要死记）：
1）、文本标题标签：
<h1>标题文本</h1>；
<h2>标题文本</h2>
<h3标题文本</h3>；
<h4>标题文本</h4；
<h5>标题文本</h5>；
<h6标题文本</h6>；
特点：字体加粗、加大、自动换行；从h1到h6字体依次减小；
作用：用户可以通过标题快速浏览网页，标题来呈现文档结构很重要，一般用h1是大标题 h2是小标题；
2）、段落标签：
段落文本
;
说明：段落与段落之间自动生成段间距且自动换行；
作用标记一个段落
3）、定义字体加粗的html标签：<strong>文本</strong>/<b>文本</b>；
4）、定义字体倾斜的html标签：<i>文本</i>/<em>文本</em>；
5）、定义下标文字标签：<sub>内容</sub>；
6）、定义上标文字标签：<sup>内容<sup>；
7）、定义文字删除线的html标签：<del>内容</del>；
8）、强制换行标签：<br/>;
9）、水平线：<hr/>;
10）、定义空格符： (注意分号”;”不能丢，不是标签、标记、元素因为没有<>号且他的定义与字体大小和系统有关；)
CSS的核心属性分类（重点）
一、css的核心属性分类：
1、关于文本的属性(text)；
2、关于列表(符号)的属性(ul/ol/dl)；
3、关于背景的属性(background);
4、关于浮动的属性（float）;
二、css的三大属性机制：特殊性、继承性、重叠性
特殊性：就是之前的权重；
继承性：子元素会继承父元素的一些属性；
重叠性：样式冲突时，会如何加载：
1、选择器权重值大的优先加载；
2、权重值一样时，按照css修饰文档中的书写顺序，后写的会覆盖先写的样式（重点理解）；
三、css属性定义：
1、css的语法:选择符（selector）{声明（decolaration）}组成
注意：声明又包括属性（property）和属性值（value）组成；
2、css属性：是指定选择符具有的样式，他是css的核心，css2共有150多个属性；
3、css属性值：属性值包括法定属性值和常规的数值加单位或颜色值（color value）;
四、几类核心属性：
1、关于文本的属性：
1>、文本的大小：font-size:数值px; 如:font-size:12px;
说明：
①、属性值为数值型时，必须给属性值加单位，属性值为0时除外；
②、单位还可以为pt; 9pt=12px;
③、为吧减小字体显示差异（电脑系统），IE公司1999年开会确定16px,为网页的默认值大小（字体）；即：1em, 1em=16px, 0.75em=12px;
④、常用的绝对大小关键字：
xx-small:9px;
x-small:11px;
small:13px;
medium:16px;
large:19px;
x-large:23px;
xx-large:27px;
2>、文本的颜色：color：#数值px；
用十进制表示颜色值：0 1 2 3 4 5 6 7 8 9
用十六进制表示颜色值： 0 1 2 3 4 5 6 7 8 9 A B C D E F
颜色模式：光色模式
R G B
FF 00 00
当表示三原色的三组数字同时相同时，可以缩写为三位; 当用十六进制表示颜色值时颜色值前必须加“#”
红色：#f00;
绿色：#0f0;
蓝色：#00f;
黄色：#ff0;
紫色:#f0f;
青色：0ff;
3>、字体样式：font-family:“字体”,“字体”,…
说明:
①、当字体为中文时必须加双引号””;
②、当英文字体名称是多个英文单词组时，需加双引号””;
③、当字体名称是单个英文单词时，不需要加双引号；
④、字体与字体之间用逗号”，“隔开；
⑤、标点符号必须为英文状态；
⑥、当一段代码已经使用过双引号之后，里面只能使用单引号”’“；
⑦、当有多个字体时，浏览器会按先后顺序寻找浏览者电脑上有的字体显示，如果浏览者电脑上没有，则显示默认字体；
4>、字体加粗样式：font-weight:bold(加粗)/bolder(更粗)/100-900/normal(取消加粗)；
说明：100-500常规字体；600-900加粗字体；
（注意：样式都是用css来改，记住包括加粗、倾斜、等）
5>、字体倾斜样式：font-style:italic(倾斜小)/oblique(倾斜大的)/normal(取消倾斜)；
说明：italic与oblique都是倾斜，浏览器区别不大；
6>、文字的水平对齐方式：text-align:left/right/center/justify(两端对齐，对中文不明显，主要针对英文不常用)
7>、文字的垂直对齐方式：vertical-align:top/middle/bottom;
说明：他不能单独使用，只能和display属性配合是使用；
8>、文本的行高：line-height:数值px;(用的多注意理解)
说明：
①、当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
②、当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；
③、当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中 齐以下任意位置的定位（IE6及以下版本存在浏览器兼容问题）
倍行高：{line-height:2;} 2倍 ，{line-height:1.5;}1.5倍； 注：当使用倍行高为单位时，不加px；
注意：此属性的理解，写网页时往往先从行高入手，用的多，实际工作中多为用ps测量出来
9>、文字属性简写：font:font-style font-weight font-size/line-height font-family；
如：font:italic bold 12px/24px “黑体”，“微软雅黑”，roman，”segoe script“;
说明:font的属性值应按以下次序书写(各个属性值之间用空格隔开) 顺序: font-style font-weight font-size / line-height font-family
(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style 他们会使用缺省值。
10>、文本下划线修饰：text-decoration:none(没有下划线)/underline(下划线)/overline(上划线)/line-through(删除线)；注意：此属性没有继承性；
11>、边框属性：border:数值px 线型 颜色（#f00）;如：border：1px solid(实线)/dashed(虚线)/dotted(点划线)/double(双线) #f00;
说明：
可以设置单个边的样式：
border-right:solid;右边框
border-left:dashed;左边框
border-top:dotted;上边框
border-bottom:double;下边框
注意：此属性没有继承性；
12>、首行缩进：text-indent:数值px; 如：text-indent:12px;
说明：
①、text-indent可以取负值；
②、text-indent属性只对第一行起作用；
③、缩进两个字符可以写成：text-indent:2em;
注意：border（边框）属性、text-decoration（下划线）属性、background（背景）属性，没有继承性，即：子元素不会继承父元素的这些属性
13>、可以了解的属性：
①、字间距:letter-spacing:value; 控制英文字母或汉字的字距。
②、词间距:word-spacing:value; 控制英文单词词距。
③、控制文本大小写 text-transform: capitalize(首字母大写)/uppercase（全大写）/lowercase（全小写）
④、小型大写字母：font-variant: small-caps
⑤、文本流控制 layout-flow:horizontal（自左向右）/vertical-ideographic（自上而下）;
（注：此属性只有IE浏览器支持）
2、关于列表的属性（主要针对ul(无序列表)/ol(有序列表)）：
1、定义列表符号样式：list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
2、使用图片作为列表符号： list-style-image：url( 所使用图片的路径及全称 )；
3、定义列表符号的位置： list-style-position:outside(外边)/inside(里边)；
list-style:none;去掉列表符号
注意：此属性加载的列表符号，各个浏览器显示列表符号与内容的间距不一样，导致我们不用此属性加载列表符号；常用ist-style:none;去掉列表符号，然后用给每个li加背景当列表符号（重要常用）
3、关于背景的属性：（注意此属性没有继承性）
1、背景颜色 background-color:颜色值;
2、背景图片 background-image：url( 背景图片的路径及全称 )；
3、网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等
背景图片的显示原则 ：
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
4、背景图片平铺
background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺) }
5、背景图片的位置
background-position:值1 值2;
说明：
①属性值有两个值组成，值1是水平位置的坐标值，值2是垂直位置的坐标值；
②值1 = left/center/right/数值； 值2 = top/center/bottom/数值;当两个值都是center的时候可缩小为一个；
③当属性值是数值时，向右方向，向下方向正值
6、背景属性的缩写语法：
background:属性值1（背景颜色） 属性值2（背景图片） 属性值2（背景平铺） 属性值3（背景的定位：值1（x） 值2(y)） 属性值4（背景固定）；
如：background:url（背景图片的路径及全称） no-repeat center top；
注意：此属性值没有顺序要求，但但定位的background-position的属性值不能分开；
7、背景图的固定
background-attachment:scroll(滚动)/fixed(固定);（此属性主要针对标签用）；
8、网页上常用的图片格式
1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )（适用于banner图及轮播图）
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像; （适用于网页上的小图标）
3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
9、浮动属性：
（浮动后脱离了文档流）
浮动属性float:none/left/right;
10、清除浮动
（某一侧不出现浮动元素） Clear:both/left/right
注意：
1、浮动的元素要放在一个容器元素里面；
2、float：none;是元素不浮动，该元素不具有浮动的特性；
clear：both；是清除元素的两边浮动，此时是浮动元素被拽下，被拽下来的浮动元素具有浮动的特性；通俗的讲就是把加有浮动元素的元素，从浮动的位置上拽下来，回到原来的位置，此时被拽下来的元素具有浮动的特性（比如：浮动元素的宽高是有内容撑起来的）（注意理解重要）
属性值有是none的属性：list-style(列表样式取消)/text-decoration（下划线样式取消）/float(浮动取消)
五、CSS选择符
(选择器)的定义、常用的10种选择符、以及他们的权重值
一、css选择符的定义：
选择符表示要定义元素的对象，可以是元素的本身，也可以是一类元素或制定的元素名称。
二、10种常用选择符：
1、类型选择符（类选择符、元素选择符）：
语法:元素名称{属性：属性值；}
例如：a{font-size:12px;}
说明：
①、使用中的元素中的元素名称直接作为选择符，如：body、div、p、img等；
②、所有的页面元素都可以作为类型选择符；
③、功能：
A、要改变一个标签的默认样式，可以用类型选择符；
B、要统一网页面中某一元素的样式可以用类型选择符；
注意：对于div、span等通用结构元素，不建议使用类型选择符，除非有十足的把握，以为他们应用的范围广泛，使用类型选择符会相互干扰，影响效果；
2、id选择符：
语法:#id名称{属性：属性值；}
例如：#box{width：300px; height:300px;} (其中box为
)
说明:
①、使用id选择符时，需要给元素定义一id属性及属性值；如：
;
②、在css文件中写id选择符时，id名称前需加#；如：#box{width:300px; height:300px;}
③、取id名时，只能取英文名但不能用关键字（所有的元素、标记、标签都是关键字xua；）
④、id选择符的基本作用：对每个页面中唯一出现的元素进行样式定义；
注意：一个元素、标签可以同时取id名和class名，并且可以用这两个名进行修饰；如：<div id=”box1″空格class=“box2”>
3、class选择符：
语法:.class名{属性：属性值；}
说明：
①、使用class选择符时需要先为元素定义一个class属性及属性值；如：
②、一个class属性可以定义多个属性值（即可以定义多个class名，class名用空格隔开）；如：
;（css可以用他任何一个class名对该元素进行样式修饰，且在符合css三大属性机制的（继承性、层叠性、特殊性）的前提下，样式互不影响：注意理解）；
③、作用：
A、可以对同类（相同的）元素、标签进行不同样式设定；
B、可以对不同的元素、标签进行相同的样式设定；
扩展：div.box{background：red;} 指定选择符
只会给class名为box的div标签进行样式修饰，不给
标签修饰；（了解此选择符即可）
4、群组选择符：
语法:选择符1，选择符2，选择符3，等{属性：属性值；}
说明：
A、对一组具有相同样式的元素进行样式指定；如：h1,h2,h3,p{font-size:12px; color:#fff；}
B、使用逗号对选择符进行分离，对页面中使用相同样式的地方，只需书写一次即可，可减少代码量，改善css代码的结构；
5、包含选择符（后代选择符）：
语法:选择符1 选择符2 选择符3 {属性：属性值；}
说明：
A、对某个元素的子元素进行样式的设定；例如:div a{font-size:12px; color:#848488;}；
B、包含选择符指选择符组合中前一个标签包含后一个标签，中间用空格隔开；
C、使用包含选择符可以避免过多的使用class及id名的设置；
D、并且直接对所需要设置的元素进行样式设置；
E、选择符除了二级包含，还可以多级包含；
注意：标记、标签不能随便嵌套：尤其h1-h6标题标签就不能互相随便嵌套，还有p标签也不能自己互相嵌套；
6、伪类选择符（针对超链接标签）：
语法️link{属性：属性值；} 超链接的初始状态；
a:visitied{属性：属性值；}超链接被访问后的状态；
a:hover{属性：属性值；}鼠标划过超链接的状态；
a:active{属性：属性值}当鼠标点击超链接时的状态；
说明：
A、当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为️link a:visitied a:hover a:active,不能颠倒，否则会使超链接的样式部分失去；
B、为了简化代码，可以吧伪类选择符中相同的声明提出来放在a选择符中；例如:a{color:#ff0;} a:hover{color:green；}表示超链接三种状态相同，只有鼠标划过变色。（经常使用的就是简化样式）
7、子选择符：
语法:选择符1>选择符2{属性：属性值；}
说明:子元素选择器只能修饰匹配父元素下的第一级子元素；（注意理解）
8、通配符：
语法:*{属性：属性值；}
说明：通配符的写法是“*”，其含义就是若有元素。
用法：常用来重置样式。
常用结构：*{margin:0; padding:0;}将所有元素的页边距和填充值清零；
margin:0 auto;使元素居中，（谁要居中给谁用）
9、伪元素选择符:
1、选择符：after和content配合使用，会在对象（定义选择符的元素）后面加上内容；
例如：
①： div:after{content:“文本内容”；}（加的是文本可以是汉字，注意是通过css文件加到页面上的内容；）；
②、div:after{content:url(图片存放的相对路劲及图片全称+扩展名)；}（加的是图片；注意是通过css文件加到页面上的内容；）
注意：冒号“：”不能丢
2、选择符：before和content配合使用，会在对象（定义选择符的元素）前面加上内容；
例如：
①： div:before{content:“文本内容”；}（加的是文本可以是汉字，注意是通过css文件加到页面上的内容；）；
②、div:before{content:url(图片存放的相对路劲及图片全称+扩展名)；}（加的是图片；注意是通过css文件加到页面上的内容；）
注意：冒号“：”不能丢
3、选择符：first-letter定义对象内第一个字符的样式。
例如div:first-letter{color:#f00;}
4、选择符：first-line定义对象内第一行的样式。
例如div:first-line{color:#ff0;}
说明：
a;(该伪元素选择器只能用于块级元素。)
b;ie6及以下版本浏览器不支持伪对象选择符。
10、html注释符:
css注释符：
/注释内容/
HTML元素标标的分类（display重点理解）：块状元素（block）、行内元素（inline）以及元素类型之间的相互转换（display）、vertical-align的使用方法、块状元素与内联元素表
六、选择符的权重值
(选择符权重值越大，显示的优先级越高)：
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重：0001
class选择符的权重：0010
id选择符的权重：0100
子选择符的权重：0000
属性选择符的权重：0010(后面讲)
伪类选择符的权重：0010
伪元素选择符的权重：0010(后面讲)
包含选择符的权重：包含的选择符权重值之和
内联样式的权重：1000
继承样式的权重：0000(后面讲)
一，块状元素（block）：
1.块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等；
2.块元素的特点：
①默认情况下，块状元素都会独占一行，块状元素会按顺序自上而下排列；
②块状元素都可以直接定义自己的宽度和高度（当不给宽度时，会默认继承父元素的宽度（100%），不给高度，则由内容撑起高度）；
③块状元素遵循盒模型的所有规则，一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素；（p标签除外）
④大部分块状元素默认情况下有margin值或padding值（在浏览器中可以查看，就是因为如此每次写网页要重置margin值和padding值，然后在后续再根据需要给各个元素加；），其中div、form默认情况下没有margin和padding值，是比较干净的，而form常用来插入表单使用，所以常用div来做网页布局；
注意：
p标签特殊:由于浏览器的解析错误，p标签内部不能嵌套其他块状元素（可以嵌套行内元素）；如果p标签内部嵌套块状元素，则会在嵌套的块状元素外部上下各加一个p标签（浏览器解析出来显示的时候可以查看）；所以p标签内部最好只能放文字，不能作布局元素用；
二、内联（行内、行间）元素(inline)：
1.常见的内联元素如：a,span,i,em,strong,b、br等
2.内联元素的特点：
①内联元素其后如果是内联元素则会在一行内逐个进行显示，且内联元素之间会自动加一定的间距)(去除间距的方法：①给内联元素添加浮动（float）或②在html书写内联元素时不换行书写)，；
②内联元素显示的宽度、高度只能根据所包含内容的高度和宽度来确定，不能直接定义它的宽和高，它的最小内容单元也会呈现矩形形状；
③内联元素也会遵循盒模型基本规则，但个别属性不能正确显示;（上下间距显示不正确，左右正常显示，即：支持左右margin、padding值，不支持上下margin、padding值；）
④行内元素默认请况下没有margin和padding值，默认情况下完全是由内容撑起来的，（默认情况下不和里面的文字或图片高度或宽度一致，主要是因为有行高一说）（注意理解这句话）例如：
使用规则：
1、内联元素一般不嵌套块元素(不是绝对)；
2、一般我们是把行内元素转换成块状元素使用，而不把块状元素转变成内联元素使用，（需要内敛元素直接找个本省市内联元素的使用即可；）
三、可变元素：
是根据上下文确定是块状元素还是内敛元素如：button是可变元素
四、元素类型的转换（通过display属性）：
1.display的作用：设置或检索元素的类型。属性值19个：block/inline/inline-block/none/list-item/table-header-group/table-footer-group…
2.属性值中有5个最常用的属性值
①block 块元素的display默认属性值，当给元素加display：block后元素变为块元素。 （注：当元素设置了float属性后，就相当于给该元素加了display:block;属性；）
②inline 内联元素的display默认属性值，当给元素加display：inline元素变为内联元素
③inline-block 内联块元素默认属性值：行内的其他元素显示在同一行，但可以直接设置宽高， 如：img,input（注：只有这一个元素类型支持vertical-align属性）
④.none 元素被隐藏不显示
⑤.list-item 将元素转换成列表。li的display默认属性值；
注意：li归到块状元素，img/input归到内敛元素
总结：
1、line-height、text-align文本水平对齐属性对子元素是行内元素起作用（也就是说此属性不仅仅只针对文本）
line-height
2、margin: 0 auto;只针对加过宽度的块元素居中起作用，不能让内联元素居中；
五、vertical-align的使用规则：
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
说到这里，思路就清晰了（PS：理应知道vertical-align可以设middle,top,bottom等等，甚至可以设置具体的值或百分比，如果想知道会有怎样的效果，可以自己实验一下，这里就不多说了。）。
接下来回到这篇文章的主题，现在我要让class=”img404″的img在class=”wall”的div里面垂直居中，我可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical-align:middle样式，那么img就可以在div里面垂直居中了。如图：
七、CSS3新增的选择器
(属性选择器、目标结构选择器、层级选择器)、浏览器前缀名、优雅降级和渐进增强、核心属性（文字属性：text-shadow/@focus-face(服务端字体)）、CSS插入图标方法、背景尺寸（background-size）、多背景属性、背景色（rgba)/边框属性4个）、透明（transparent）
一、CSS3简介：
CSS即层叠样式表（Cascading StyleSheet） CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的 模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等 CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 完全向后兼容，因此您不必改变现有的设计。
浏览器通常支持 CSS2。
二、CSS3能做什么？
CSS3到底给我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影、渐变等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。
三、CSS3选择器CSS3选择器是个难以置信地强大的工具：
它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。
a. 属性选择器
b. 伪类选择器 ：结构性伪类选择器 目标伪类选择器 UI 元素状态伪类选择器 语言伪类选择器 否定伪类选择器 动态伪类选择器
1、属性选择器(极为重要)在css3中，增加了如下所示的四个属性选择器，使得属性选择器有了通配符的概念。
标签[属性名=“value”] 匹配属性等于某特定值的元素标签
[属性名^=“value”] 匹配属性包含以特定的值开头的元素标签
[属性名$=“value”] 匹配属性包含以特定的值结尾的元素标签
[属性名*=“value”] 匹配属性包含含有特定的值的元素浏览器支持: 只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的
2、结构性伪类选择器(极为重要)选择器描述
E:first-child选择第一个子元素E E指的就是所要选择的标签(子元素类型全部相同)
E:last-child 选择最后一个子元素E(子元素类型全部相同)
E:nth-child(n)选择一个或多个特定的子元素 （第一个编号为1）n(子元素类型全部相同)
E:nth-last-child(n)选择一个或多个特定的子元素，从最后一个子元素开始算
E:nth-of-type(n)选择指定的元素，仅匹配使用同种标签的元素(子元素类型不相同)
E:nth-last-of-type(n)选择指定的元素，从元素的最后一个开始计算，仅匹配使用同种标签的元素n可以是数值、公式（2n/2n+1）、也可以英文单词Nth-of-type(odd)奇数
Nth-of-type(even)偶数选择器
E:first-of-type匹配父元素下使用同种标签的第一个子元素(子元素类型不相同)
E:last-of-type匹配父元素下使用同种标签的最后一个子元素(子元素类型不相同)
E:only-child匹配父元素下仅有的一个子元素
E:only-of-type匹配父元素下使用同种标签的唯一 一个子元素
E:empty匹配一个不包含任何子元素的元素 ( 文本内容也被看作子元素 ):not(s)匹配不符合当前选择器的任何元素( 反选 )
3、层级选择器(极为重要)子元素选择器选择器
描述E > FE元素内的第一级子元素F兄弟选择器选择器
描述E + F(相邻兄弟)E元素后面的第一个兄弟元素F
E ~ F（通用兄弟）所有在E元素之后的所有兄弟元素F
4、伪元素（伪对象）选择器（带双冒号也行）
1）标签：first-line伪元素选择器 first-line伪元素选择器用于向某个元素中的第一行文字使用样式。 div:first-line{color:#f00;}
2）标签：first-letter伪元素选择器 first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。 例如：div:first-letter{color:#f00;}
3）标签：before伪元素选择器 before伪元素选择器用于在某个元素之前插入一些内容。 div:before{content:“文本内容”； width：20px；height：40px;}div:before{content:url(图片存放的相对路劲及图片全称+扩展名)；width：20px；height：40px;}
4）标签：after伪元素选择器 after伪元素选择器用于在某个元素之后插入内容。例如：div:after{content:“文本内容”； width：20px；height：40px;}div:after{content:url(图片存放的相对路劲及图片全称+扩展名)；width：20px；height：40px;}注意：标签后也可以是双冒号也行
5、目标伪类选择器
（需要了解。知道用的时候可以查）标签:target：匹配URl中锚点指定的元素，用此选择器可以给锚点指定的元素加样式 语法：例如： Div：target{属性：属性值；}
6、UI元素状态伪类选择器
（需要了解理解。知道用的时候可以查）这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用选择器描述E:enabled匹配表单中可用的元素E:disabled匹配表单中禁用的元素E:checked匹配表单中被选中的radio（单选框）或checkbox（复选框）元素E::selection用来改变浏览网页选中文本的默认效果基本上只有 background 、color 有效果
7、语言伪类选择器
语言伪类选择器允许为不同的语言定义特殊的规则，这在多语言版本的网站用起来是特别的方便。E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。例如：
我是唐老鸭。
I live in Duckburg.
注释：对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。
否定伪类选择器如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用整个样式时，可以使用not选择器 :not(标签)：匹配类型为E，不匹配选择符为 s 的元素。
8、动态伪类选择器
a:link{ color: #ff6600 }
/* 未被访问的链接 */ a:visited{ color: #87b291 }
/* 已被访问的链接 */ a:hover{ color: #6535b2 }
/* 鼠标指针移动到链接上 */ a:active{ color: #55b28e }
/* 正在被点击的链接 */ a:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
注意：标签后也可以是双冒号也行input:focus用于元素成为焦点，这个经常用在表单元素上（重要会背）。
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
浏览器的前缀名（极为重要） CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，就提供了针对浏览器的前缀来表示它们的私有属性；**Gecko （火狐）前缀-moz-属性名：属性值；Presto （欧朋）前缀-o- 属性名：属性值；Trident （IE）前缀-ms-属性名：属性值；Webkit （苹果、谷歌）前缀-webkit-属性名：属性值；**Css3优雅降级和渐进增强问题（面试题）1、渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。2、优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 的修改使其可以在低版本浏览器上正常浏览。
四、Css3新增的部分属性
1、关于文本的、
文本阴影：text-shadow: h-shadow v-shadow blur color（重要）h-shadow 必需。
水平阴影的位置。允许负值;v-shadow 必需。
垂直阴影的位置。允许负值。 blur 可选。模糊的距离（程度）。
color 可选。阴影的颜色。
2、文本换行
①、是否允许长单词换行：word-wrap:normal \ break-wordnormal 默认值，只在允许的断字点换行（空格处）;break-word 在长单词或 URL 地址内部进行换行。（长单词会另起一行）
②、是否允许长单词换行(加上后长单词换行，但不会另起一行显示)：word-break:normal\ break-allnormal 使用浏览器默认的换行规则Break-all 允许在单词内换行。
注释：目前 Opera 不支持 word-break 属性（所以尽量不用）服务器端字体： @font-face（重要）可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上使用方法：@font-face{ font-family:webFont; src:url(‘font/字体名称.otf’)； } Div{font-family:webFont;}扩展小图标的插入：（通过css的方法、还有别的方法JS）
1**、****在iconfont.cn网站（阿里网站的图标数据库下载图标代码）**；解压文件后
2、将以上所有文件复制到要写的网页的站点里面，建个fonts文件夹存放字体
3、用外部链接样式
表<link rel="stylesheet" type="text/css" href="iconfont.css"/>插入到html文件的头部，一定要放在我们定义的修饰css前面，因为我们有可能有需求要修改他的样式（理解）；
4、再把图标写在内联元素里面
（span/i/b/strong/a/em/）【也可以放在块元素里面不过一般放在内联元素里】，再给内联元素起2个class名，固定：class=“iconfont(图标（解压出来的）文件名) icon-home（图标在加压文件中的名字）”
说明：1、这样通过css加载的图标就是文字，可以通过font-size来改变图标大小、倾斜（font-style）图标的等样式；
2、通过定位span的位置来定位图标位置修饰样式时：只能用定义的class名，不能用内联元素标签作为选这符如：.iconfont{font-size:20px;}或.icon-home{font-style:italic;}在HTML结构中<span class=“iconfont icon-home”>
八、 Css3新增的关于背景的属性
1、背景裁切：Background-clip； 用来规定背景的绘制区域（对于背景颜色）值解释border-box背景被裁剪到边框盒。（默认值）padding-box背景被裁剪到内边距框。content-box背景被裁剪到内容框。
2、背景原点：Background-origin；用来规定 background-position 属性相对于什么位置来定位（对于背景图片）属性值解释padding-box背景图像相对于内边距框来定位。（默认值）border-box背景图像相对于边框盒来定位。content-box背景图像相对于内容框来定位。
3、背景尺寸：Background-size； 用来规定背景图像的尺寸（重要）值描述数值设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)百分比将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”cover把背景图像等比例扩大或缩小，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain把图像扩大或缩小至合适尺寸，以使其宽度或高度完全适应内容区域
4、CSS3 多背景属性多个背景图可用逗号隔开Background:url(…) no-repeat left top, url(…) no-repeat left top, url(…) no-repeat left top, url(…) no-repeat left top, url(…) no-repeat left top;5、CSS3 背景颜色模式：rgba（r:红色；g：绿色；b:蓝色；a：alpha） （用此方法可以写一个背景透明，内容不透明的重要用于移动端，pc端不能用，有兼容性；）
Hsl颜色模式（色调，饱和度，亮度）如： 0代表红色，120代表绿色，240代表蓝色 Hsla (色调，饱和度，亮度，透明度) Background:rgba(0,0,0,1) 表示黑色，不透明 Background:hsla(8,97%,98%,0.5)Css3新增的关于边框的属性Border-color 边框颜色
border:2px solid #f00;table {border-color: red} – 所有的边框都是红色。（1个值：四边一样色）table {border-color: red green} – 上边框和下边框是红色，而左边框和右边框是绿色。 （2个值：上下；左右）table {border-color: red green blue}- 上边框是红色，左边框和右边框是绿色，下是蓝色（3个值：上 ； 左右 ； 下）
table {border-color: red green blue yellow} – 上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。（4个值：上； 右 ；左 ；下）
Border-width: 边框粗细；
Border-style: 边框线性
Border-radius:圆角边框
Border-radius:5px;Border-radius:50%;
Border-radius:20px 20px; Border-radius:40px 0px 30px ;
border-radius:5px 15px 20px 25px ; border-radius:20px / 10px ;
（扩展）透明色：transparent<注意：主要是圆角时给border-radius:50%;不用考虑元素的宽高针对Box-shadow 盒子阴影（六个值）值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅 CSS 颜色值。inset可选。将外部阴影 (outset) 改为内部阴影。
如下代码的运行结果是：A p{box-shadow:0px 0px 5px 5px rgba(153,153,238,1);}B p{box-shadow:5px 0px 5px 5px rgba(153,153,238,1);}C p{box-shadow:-5px 0px 5px 0px rgba(153,153,238,1);}
图片边框：border-image；一下内容知道了解（用的时候可以查）：值描述border-image-source用在边框的图片的路径。
border-image-slice图片边框向内偏移。
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
缩写：border-image:url(img/border.png) 30 round; border-image-source: url(img/border.png); border-image-slice: 30; （不需要加单位单位默认是px） border-image-width: initial; border-image-outset: initial; border-image-repeat: round;
CSS的名称、语法、三种样式表的连接方式及他们之间优先级、两种导入外部样式表的区别、div+css布局页面的优点
一.CSS名称的定义：
Css是Cascading style sheets的缩写，中文翻译成：层叠样式表（简称：样式表），是有W3C组织制定的表现语言，是一种修饰网页显示信息的标记性语言，简单的来说：就是如何修饰网页显示信息的样式。（web标准中的表现标准就是指css的语法规则，目前遵循的是W3C组织发布的css3.0;）
二、CSS的语法：
选择符{属性：属性值； 属性：属性值；}
声明 声明
例如：div{width:200px; height:300px;}
说明：
1、css语法由选择符和声明组成；
2、声明由属性和属性值组成且要放在（大括号）“{ }”内，每个声明用“；”（分号）结束；
3、属性与属性值之间用“：”（冒号）连接；
4、一个属性可以有多个属性值且他们之间没有先后顺序之分，属性值与属性值之间用空格隔开；
5、一个选择符可以有一个或多个声明，他们之间没有先后顺序之分，声明与声明之间用空格、换行不影响属性显示效果；
三、css三种连接样式表的方式：
说明:
1、使用
2、页面的所有样式都写在之间；
3-2内联样式表（行间样式表。内嵌样式表）：
<标记 style=“属性：属性值； 属性=属性值”；> </标记>
例如：<div style="width:299px; height:399px;"> </div>
说明：内联样式表种，声明不用大括号“{}”，用双引号“”包围声明；
3-3引用外部样式表有两种方式（首先要创建一个css文件）
3-3-1方法一：““`(单标签）
说明:
1、rel=“”表示告诉浏览器关联的是样式表文件；
2、type=“”表示关联的是基于css语法的样式表文件；
3、<link>标签必须放在HTML语法结构中的头部，即<head>与</head>之间；
3-3-2方法二：
说明：
1、@与import之间没有空格；
2、url与（）之间也没有空格；
3、必须以分号；结束；
4、如果是<style type="text/css">与</style>之间有@impor(外部样式表)，则就不能写其他css语句；即用@import外部样式表不能和内部样式表共存一个style;
3-3-3link和import导入外部样式的区别：（重要面试题）
差别1：老祖宗的差别：
link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别2：加载顺序的差别：
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别：
@import是CSS2.1提出的，所以老的浏览器不支持，@import只t在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
四、三种样式表的优先级：
1、内联样式优先级最高；
2、外部样式表与内部样式表的级，与他们在文档中的书写顺序有关，后入的会覆盖先写入的，即、后写入的优先级高于先写入的，（即，书写位置那个离近，那个优先级高）
五、三种样式表的作用域：
1、内联样式只对当前标签起作用；
2、内部样式只对当前文件起作用；
3、外部样式对所有连接的页面都起作用；
六、div+css的优势：
1、缩减页面代码，提高访问速度;
– 代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验会更好
2、结构清晰，有利于seo
– 有利于搜索引擎优化
– 缩短改版时间
– 对网站的重构有很好的支持
– 弥补html语言的不足
九、css容器属性
：单行文本显示省略号条件、容器的溢出属性（overflow）、空余空间属性（white-space）、省略号属性（text-overflow）
一、单行文本显示省略号的条件（重点）：
1、容器加一定的宽度：width:300px;
2、溢出的内容隐藏：overflow:hidden;
3、强制文本在一行显示：white-space:nowrap;
4、显示省略号：text-overflow:ellipsis;
注意：多行文本显示省略号，要用到后面的js（好像）
二、溢出属性（容器的）（重点）：
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，
hidden：溢出容器的部分会隐藏；
scroll：强制出现滚动条，如果有溢出，滚动条可以滚动，显示隐藏的部分;
auto：如果内容有溢出会显示滚动条，如果没有溢出就不显示滚动条；
inherit：从父元素继承overflow属性的值。
三、空余空间：
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；
pre-wrap：保留空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)
四、省略号属性：
文本溢出:text-overflow:clip/ellipsis
取值：
clip：不显示省略号（…），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
CSS盒模型的概念及分布content(内容)、padding（填充区、内边距）、border（边框）、margin（外边距）
十、盒模型的概念及组成；
1、盒模型的概念：
css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
2、盒模型的组成；
CSS盒子模式都具备这些属性：内容(content)、填充(padding)、边框(border)、边界(margin)
3、日常生活的盒子来理解这四个属性
1）.内容（content）盒子里装的东西；
2）.填充（padding）就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
3）.边框（border）盒子本身；
4）.边界（margin）盒子与盒子之间的空隙，或者是大盒子与嵌套在里面的小盒子之间的空隙。
4、关于padding
1）.padding的定义 ：
①padding是元素内容到元素边框之间的距离，叫内填充、补白或内边距；
②padding区域内会显示背景色和背景图片；
2）.用法：
1》用来调整内容在容器中的位置关系
2》用来调整子元素在父元素中的位置关系。（注：padding属性需要添加在父元素上。）
3》padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。
注意理解：相对关系
3）.padding属性值的4种形式：
一个值：padding:2px; 四周的填充都是2px
二个值：padding:10px 20px ; 上下 左右
三个值： padding:10px 20px 30px ; 上 左右 下
四个值：padding:10px 20px 30px 40px; 上 右 下 左
5、margin
1）边界：margin,在元素外边的空白区域，被称为外边距。
margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界
属性值的4种方式：
一个值：四周
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
2）margin的使用方法：
一个值：四个方向 margin:2px;/定义元素四边边界为2px/
margin:2px 4px;/*定义元素上下边界为2px，左右边界为4px/
margin:2px 4px 6px;/定义元素上边界为2px，左右边界4px，下边界为6px，/
margin:2px 4px 6px 8px;/定义元素上、右边界为2px，下右边界为6px，左边界为8px/
margin:0 auto;/*在浏览器中横向居中。
定义元素上、下边界为2px，
说明：可单独设置一方向边界，如：margin-top:10px;
注意：
1、margin后可以跟负值（因为是在盒模型的外面）；向相反的方向走，有可能加大子元素；（理解这句话）；
padding后不可以加负值，（因为在盒子内部）；
2、如果上下排列的两个元素，如果给上面的元素加margin-bottom，给下面的元素加margin-top，那这两个元素之间的竖直方向上的间距去较大的值，这是浏览器解析规则
6、border的使用方法
border:边框宽度 边框风格 边框颜色;
例如：border:5px solid #f00
边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:（数值为0:表示取消边框）
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
7、元素总尺寸计算方法：
width 和 height 属性
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
注意：增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
思考：假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。
如果希望这个元素框达到 100 个像素，需要将内容的宽度设置为多少像素？
8、盒子的实际大小（公式）：
实际宽 =左右margin+左右border+左右padding+width
实际高 =上下margin+上下border+上下padding+height
元素高自适应（html,body{height:100%;}[满屏页面]）/height:100%;(子元素自适应父元素高度)、元素宽自适应：width：100%；!important(写在属性值后面，具有最高优先级){min-height（最小高度）、max-height(最大高度)、min-width(最小宽度)、max-width（最大宽度）}、清除浮动（clear：both面试题）、隐藏属性（visibility：hidden；与display：none；的区别））
十一、宽高自适应定义及优点
1、定义：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
2、优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
二、宽高自适应：
1、宽度自适应：
元素宽度设置为100%。（块元素宽度默认为auto）针对子元素适应父元素的宽度；
2、高度自适应;
1.元素高度自适应窗口高度 ：设置方法：html,body{height:100%;}（写一个满屏页面）
2.子元素自适应父元素高度：height:100%;（给子元素加）
总结：html、body默认请况下是没有宽高的，宽高完全是有内容撑起来；
3、具备最小高度的自适应：
①、属性：最小高度；(IE6浏览器不识别该属性)min-height什么时候用？
当元素内容的高度不确定的时候用min-height;
说明：
当内容高度小于最小高度，元素显示最小高度；
当内容高度大于最小高度，元素会显示内容高度（可以看着元素被内容撑起来的）；
扩展(不要求了解，目前已经不用)：
最小高度兼容IE6的写法：
方法1:min-height:value; _height:value;
方法2:min-height:value; height:auto!important;
height:value;(属性顺序不能改变，建议使用)
②、!important关键字过滤器，写在属性值的后面，加上此单词,属性具有最高的优先级，但是ie6不能识别此关键字；
说明：
1、min-height：
（最小高度,设置此属性后，内容高度小于此高度,显示此高度；大于容器高度时，容器自适应高度；）
2、max-height：
(最大高度，设置此属性后，内容高度小于此高度时，显示内容高度；内容高度超过此高度时显示此高度)
3、in-width：
(最小宽度,设置此宽度后，浏览器宽度小于此宽度时显示滚动条，大于此宽度时，适应浏览器宽度；)
4、max-width：
(最大宽度，设置此属性后浏览器宽度小于此容器时，会适应内容宽度而不出现滚动条)
十二、清除浮动
定义：浮动元素父元素高度自适应（父元素不写高度时，所有子元素写了浮动后，父元素会发生高度塌陷）
理解：父元素高度塌陷：父元素没有给固定高度，而子元素发生浮动，子元素浮动后，子元素脱离文本流，不占据空间，因此撑不起父元素
方法1：
给父元素添加声明overflow:hidden;（缺点：当子元素有定位设置，定位到父元素外面时，不希望溢出父元素部分隐藏时，此方法就不行了）
方法2：
在最后一个浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;（缺点：在HTML结构文档中会形成很多冗余代码）
方法3（万能清除选择符推荐使用）：
父元素选择符:after{
content:”.”;
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
十三、visibility:hidden/visible;隐藏/可见 （声明）
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域
display:none；属性会使元素隐藏后，不占用原来的空间，原来的空间会自动被其他元素占用，不留空白；也就是让这个对象彻底消失。
1、站点中的新闻详情页面和产品详情页面中的详细内容部分高度一般都是不固定的，这时需要用min-height;
2.这就导致详细内容部分的父元素高度也不能固定，如父元素中还有子元素发生了浮动，这时父元素就可能发生高度塌陷，如果高度塌陷的话就需要清除浮动；
一般新闻详情页面和产品详情页面都会出现这种情况
十四、Fliter（过滤器）方法兼容浏览器：
(1)、_下划线：IE6浏览器的兼容符号； （只有IE6浏览器识别此符号，其他浏览器不识别） 语法：选择器｛_属性：属性值；｝
(2)、*或+：兼容所有IE7以下浏览器；（只有IE7及以下版本浏览器识别此符号，其他浏览器不识别） 语法：选择器｛*属性：属性值; +属性：属性值; ｝
(3)、\0：IE8及以上浏览器的兼容符号； 语法：选择器｛属性：属性值\0;｝
(4)、\9：兼容所有IE浏览器； 语法：选择器｛属性：属性值\9｝（只有IE浏览器识别此符号，其他浏览器不识别）
元素的定位属性（position：static/ablolute/relative/fixed）、包含块的定义(position:relative)、定义元素的层叠（z-index）、透明属性（filter:alpha(opacity=50)/opacity:0.5）、圆角属性（border-radius）锚点属性的应用
十五、定位的相关属性：
1、position
static /absolute/relative/fixed
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom属性相对其最接近的一个并有定位设置的父元素（爸爸）进行绝对定位；如果不存在这样的父对象，则依据html对象(浏览器)，而其层叠通过z-index属性定义；
3、relative ：相对定位，相对于标签原来的位置进行定位，对依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；
4、fixed：固定定位：相对于浏览器定位，脱离文档流；
元素块定位到浏览器正中心的两种方法：(有可能是考试题基于css的方法)
①极端的定位方法：
position:fixed;（是外国的一个人试出来的）
left:0;
top:0;
right:0;
buttom:0;
margin：auto;
②常规方法：
position:fixed;
top:50%；
left:50%;
margin：-50%(元素自身width值） 0 0 -50%(元素自身height值);
2、绝对定位和相对定位的区别：
①参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；
②绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据空间。
二、包含块定义：
1》定义元素为包含块的方式：
给绝对定位元素的父元素添加声明position：relative/absolute；
2》包含块的概念及作用：
1.包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
2.默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
3、定义元素的层叠属性；
属性：z-index : auto | number；
检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
说明：
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。此属性仅仅作用于 position 属性值为 absolute/relative/fixed 的对象。
十六、透明属性
Filter:alpha(opacity=50(跟1到100的10的整倍数整数));IE8以下浏览器可以兼容
Opacity:0.5（跟0到1之间的一位小数；如：0、0.1、0.2、0.3、、、0.8、0.9、1等）;其他浏览器可以兼容
一个元素加了透明属性，要这个元素的内容（文字和图片）也都透明，解决这样的hack:加入一个空标签，空标签加个背景及透明，另一个元素放内容，两个元素定位一样重叠，这样就解决了，内容也透明的现象
透明属性值：transparent
扩展的内容：
圆角属性：border-radius:10px; 值越大圆角越大；
hover:鼠标滑过的属性，现在高版本的浏览器都支持，低版本的只支持a标签；
五、命名锚点连接
1.命名锚点的作用：在同一页面内的不同位置进行跳转；（超链接是在页面之间跳转的）
2.给元素定义命名锚记名语法：<标记 id=“命名锚记名”> </标记>；
点击数字图片变化；
<!doctype html>
<html>
<div class="box">
<div class="box1">
<img id="p1" src="img/pic01.jpg"/>
<img id="p2" src="img/pic02.jpg"/>
<img id="p3" src="img/pic03.jpg"/>
</div>
<div class="box2">
<a href="#p1">1</a>
<a href="#p2">2</a>
<a href="#p3">3</a>
</div>
“`
