第一章
一、内联块 display: inline-block;
1、特征：
1.1 块级元素在一行显示 （得到内联元素的属性）
1.2 内联元素支持宽高 （得到块的属性）
1.3 没有宽度的时候，内容撑开宽度 （得到内联元素的属性）
1.4 标签之间的换行间隙被解析（问题） （得到内联元素的属性）
1.5 ie6 ie7 不支持块级元素的 inline-block（问题）
二、浮动
1、float: [ left | right | inherit ];
1.1 浮动特征： 具有且不仅仅有 内联块 inline-block 的特征
1.1.1 块级元素在一行显示
1.1.2 内联元素支持宽高
1.1.3 默认内容撑开宽度
1.1.4 脱离文档流
1.1.5 提升层级半层
2、clear: [ left | right | both | inherit ]; //元素某一方向不能有浮动元素
3、浮动相关问题：
3.1 两个div，给其中一个div设置左浮动，为什么第二个div会被第一个div覆盖？
3.1.1 原因：两个都是div，如果不浮动则占据一行竖着排列，给第一个div设置左浮动，则该div脱离文档流并且不占位置且层级高，此时第二个div会被第一个div覆盖住
3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a. 两个div都设置左浮动. b. 第二个div用margin-left设置，让其在视觉上不被遮挡
3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边
3.2.1 浮动生来其实是为了文字环绕效果： CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。
3.2.1.1 原因：浮动元素不占据文档流，但是占据行框，文字就是行框出现的代表，所以。。。
三、清除浮动
1、清除浮动的原因：
1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局
2、解决浮动造成的布局问题：
2.1 加高。 给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度
2.2 给父级加浮动。 --》将导致问题更加严重！页面中可能所有元素都要加上浮动，margin左右自动失效
2.3 给父级加上 display: inline-block --》将导致margin失效
2.4 给父级加上空标签子级，并设置子级清除左右浮动 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费（多余的元素）； ie6最小高度19px；解决后ie6下还有2px偏差
<div class="clearfix"></div>
============================
.clearfix{
clear:both;
}
2.5 br清除浮动，因为br有个属性叫clear，所以同2.4空标签，使用br标签 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费
<br clear="all" />
2.6 after伪类 清浮动方法（现在主流方法），给父级添加清浮动的伪类after，且after中content为空
2.6.1 after 伪类 （类似于hover伪类）
<div class="clearfix">
<div class="item">
</div>
</div>
==================================
.item{
100px;
height: 100px;
float: left;
}
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: ""; //content: "这是由after伪类生成的内容; //此时div中的内容包含“这是由after伪类生成的内容 ”
display: block;
clear: both;
}
2.7 给父级加上 overflow: hidden; 清除浮动 --》右下角等需要的元素将不可见（比如 分享到、回到顶部等按钮）
2.7.1 overfloat: [ hidden | scroll | visible];
四、浏览器，只要触发了BFC或者hasLayout，那么该区域就是一个独立的区域，不受外界影响
1、BFC（block formatting context） "块级格式化上下文"。
1.1 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
解释：每个HTML元素默认情况会根据自己的特性（block、inline、inline-block）进行布局显示（例如block元素会从上到下独占一行的特性进行布局；内联元素从左至右显示）。此BFC是专门说明block元素的上下文布局方式？？？
1.2 只在标准浏览器（除ie8及以下版本的ie浏览器外）中会出现的特性
1.3 触发BFC的方法
1.3.1 float值不为none
1.3.2 overflow不为visible
1.3.3 display: [ table-cell | table-caption | inline-block ];
1.3.4 position 不为 relative 和 static
1.3.5 width[ height ] | min-width[ min-height ]: (!auto)
2、haslayout
2.1 ie浏览器特有
2.2 触发方法
2.2.1 zoom: (!normal)
2.2.2 -ms-writing-mode: tb-rl;
2.2.3 writing-mode: td-rl;
第二章
一、定位
1、定位分类
1.1 relative 相对定位
1.1.1 不影响本身特性
1.1.2 不脱离文档流
1.1.3 如果没有定位偏移量，对元素本身没有任何影响
1.1.4 提升层级
1.2 absolute 绝对定位
1.2.1 使元素完全脱离文档流
1.2.2 使内嵌支持宽高-----absolute有 display:inline-block; 的效果
1.2.3 块属性标签内容撑开宽度 display:inline-block; 的效果
注：绝对定位子级的浮动可以不用清浮动方法 即clearfix
1.2.4 偏移量是相对于定位父级的，如果没有定位父级，则相对于document
1.2.5 绝对定位一般是配合相对定位使用
1.2.6 提升层级，假设都是定位元素，则后面的元素覆盖前面的元素（后面的层级高）
1.3 fixed 固定定位
1.3.1 使元素完全脱离文档流
1.3.2 使内嵌支持宽高-----absolute有 display:inline-block; 的效果
1.3.3 块属性标签内容撑开宽度 display:inline-block; 的效果
注：固定定位子级的浮动可以不用清浮动方法 即clearfix
1.3.4 偏移量是相对于document <与绝对定位的区别>
1.3.5 IE6不支持，解决兼容性--》js或者绝对定位模拟
1.4 其他
1.4.1 static，默认值
1.4.2 inherit，从父级继承定位属性值 不兼容！
2、定位层级 z-index （无单位）
2.1 定位元素默认后者层级高于前者
2.2 建议在兄弟标签之间比较层级
二、透明度 opacity: [ 0-1 ]; 0全透明，1不透明，兼容性问题
1、使用
div{
opacity: [ 0-1 ];
filter: alpha(opacity=0~100); //IE6/7下
}
2、特性
2.1 继承性。父级添加透明度，子级也会继承
第三章
一、表格
1、表格标签
1.1 table
1.2 thead
1.3 tbody
1.4 tfooter
1.5 tr
1.6 th 表头的单元格
1.7 td 表格的单元格
2、表格样式
2.1 border: 1px solid red;
2.2 border-collapse: [ collapse | separate | inherit ]; //合并表格边框，单边框（table上写样式）
3、单元格合并
3.1 colspan: num; 合并列
3.2 rowspan: num; 合并行
二、表单
1、表单元素：
1.1 input
1.1.1 类型type：<input type="text" name="username" value="请输入姓名" />
1.1.1.1 password
1.1.1.2 radio name必须相同，具有分组的效果，告诉后端这个name是同一组，不同值value
1.1.1.3 checkbox name必须相同，表示同一组
1.1.1.4 submit 不需要设置name，不用提交，value是显示的值，默认值“按钮”
1.1.1.5 reset 不需要设置name，不用提交，value是显示的值，默认值“重置”
1.1.1.6 button 需要设置value，没有默认值 //自定义按钮
1.1.1.7 image 同button
1.1.1.8 file 上传图片
1.1.1.9 hidden 用于向后端传值，但是前端不需显示
1.2 label
1.2.1 <label for="inputID">这是标签</label> //for 点击标签触发焦点在input框中
1.2.2 <label> <input type="text" /> </label>
1.3 select/option 下拉选择 对高度的不兼容。
1.3.1 没有option，则value无法赋值
1.4 textarea 文本域
2、属性：
2.1 checked="checked" //默认选中
2.2 disabled="disabled" //不可编辑，后端将获取不到该值
第四章
一、兼容性问题
1、IE6、IE7的兼容（XP系统）
1.1 H5标签兼容，H5标签在IE6、IE7下都不能兼容
1.1.1 解决办法1：用js动态创建标签+display: block; （原因：动态创建的自定义标签默认行内）
document.createElement('header'); //css 加上display: block;
1.1.2 解决办法2：引用 html5shiv.min.js 文件，让该js文件处理标签
<script src="html5shiv.min.js"></script> //引用即可
1.2 元素浮动兼容性
1.2.1 父元素加浮动，但表现的需要是子元素，此时父元素浮动不生效。
解决办法：给需要浮动显示的子元素加上浮动
1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。第二个 margin-left: 100px; (第一个box的width)。此时IE6下两元素间出现缝隙
解决办法：不建议该写法，因为浮动层级提升。解决方法让两个兄弟节点均 float:left; ，不用margin-left
1.3 IE6下子元素宽高 > 父级元素宽高，子元素会撑开父级元素
解决办法：不建议让子元素宽高 > 父级元素宽高
1.4 p包含块级元素标签。此时IE6浏览器渲染会出现：自动生成div的兄弟节点P，且p标签不再包含div，布局乱套了
<p>
<div></div>
</p>
1.5 总结用于不能包含块级元素的特殊块级元素的标签：p、h1~h6、td。正常情况：内联元素不能包含块级元素
1.6 margin兼容性
1.6.1 margin-top 传递
解决办法1：给父级加上border，但是IE6还是不兼容
解决办法2：触发BFC 给父级加上zoom: 1;（不用border了）
1.6.2 上下margin叠加
尽量不使用
1.6.3 双边距问题，当 float: left; margin-left: 100px; 此时IE6下margin-left 是200px //右边距没有这个问题
解决办法：针对IE6、7添加 *display: inline;
IE6识别*和_， 不识别 !important
IE7识别*, 不识别_，识别 !important
而firefox两个都不识别， 识别 !important
1.7 li里子元素都浮动，各个li之间在IE6、7下方会产生4px间隙问题
解决办法：给li加上 *vertical-align: top;
1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中）
解决办法1：两个浮动元素中间避免出现内联元素或注释
解决办法1：子元素宽度不超过父级3px
1.9 父级包不住relative的子级
解决办法：针对IE6、7给父级加上relative
1.10 IE6下绝对定位元素的父级宽度是奇数，则该子元素right和bottom有1px偏差
解决办法：避免父级宽度出现奇数
1.11 IE6下绝对定位元素和浮动元素并列时，绝对定位元素消失
解决办法：让两元素不处于同级
1.12 IE6下input空隙问题
解决方法：给input加上浮动
1.13 IE6下输入类型表单背景图片--》背景图片会跟着文字的增多移动
解决办法：设置背景fixed
1.14 IE7以及以下a标签右浮动时，错位到下一行
解决办法：css hack，利用css hack *margin-x 调试完成
2、css hack（针对不同浏览器写不同css样式的过程）
2.1 书写css hack 顺序：先写全部都支持的，然后单独处理个别浏览器
2.2 个别处理支持：
9 IE9以及以下支持反斜杠（其它不支持）：background: blue9;
* IE7以及以下支持：*background: green;
_ IE6以及以下支持：_background: red;
3、IE6不支持PNG24 （IE6下不支持透明）
解决办法1：引用js文件处理。 但是不支持body上面的背景图片
<script src="DD_belatedPNG_0.0.8a.js"></script> //这个插件是处理png-24图片在IE6下出现灰色背景的。
<script>
DD_belatedPNG.fix("需要支持PNG24的css选择器"); //即可
</script>
解决办法2：原生滤镜
_background-image:none;
_filter:两句代码; //filter只有IE浏览器能识别
二、样式优先级
默认<类型（标签）<class<id<style（行间）<!important;
第一章
一、内联块 display: inline-block;
1、特征：
1.1 块级元素在一行显示 （得到内联元素的属性）
1.2 内联元素支持宽高 （得到块的属性）
1.3 没有宽度的时候，内容撑开宽度 （得到内联元素的属性）
1.4 标签之间的换行间隙被解析（问题） （得到内联元素的属性）
1.5 ie6 ie7 不支持块级元素的 inline-block（问题）
二、浮动
1、float: [ left | right | inherit ];
1.1 浮动特征： 具有且不仅仅有 内联块 inline-block 的特征
1.1.1 块级元素在一行显示
1.1.2 内联元素支持宽高
1.1.3 默认内容撑开宽度
1.1.4 脱离文档流
1.1.5 提升层级半层
2、clear: [ left | right | both | inherit ]; //元素某一方向不能有浮动元素
3、浮动相关问题：
3.1 两个div，给其中一个div设置左浮动，为什么第二个div会被第一个div覆盖？
3.1.1 原因：两个都是div，如果不浮动则占据一行竖着排列，给第一个div设置左浮动，则该div脱离文档流并且不占位置且层级高，此时第二个div会被第一个div覆盖住
3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a. 两个div都设置左浮动. b. 第二个div用margin-left设置，让其在视觉上不被遮挡
3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边
3.2.1 浮动生来其实是为了文字环绕效果： CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。
3.2.1.1 原因：浮动元素不占据文档流，但是占据行框，文字就是行框出现的代表，所以。。。
三、清除浮动
1、清除浮动的原因：
1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局
2、解决浮动造成的布局问题：
2.1 加高。 给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度
2.2 给父级加浮动。 --》将导致问题更加严重！页面中可能所有元素都要加上浮动，margin左右自动失效
2.3 给父级加上 display: inline-block --》将导致margin失效
2.4 给父级加上空标签子级，并设置子级清除左右浮动 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费（多余的元素）； ie6最小高度19px；解决后ie6下还有2px偏差
<div class="clearfix"></div>
============================
.clearfix{
clear:both;
}
2.5 br清除浮动，因为br有个属性叫clear，所以同2.4空标签，使用br标签 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费
<br clear="all" />
2.6 after伪类 清浮动方法（现在主流方法），给父级添加清浮动的伪类after，且after中content为空
2.6.1 after 伪类 （类似于hover伪类）
<div class="clearfix">
<div class="item">
</div>
</div>
==================================
.item{
100px;
height: 100px;
float: left;
}
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: ""; //content: "这是由after伪类生成的内容; //此时div中的内容包含“这是由after伪类生成的内容 ”
display: block;
clear: both;
}
2.7 给父级加上 overflow: hidden; 清除浮动 --》右下角等需要的元素将不可见（比如 分享到、回到顶部等按钮）
2.7.1 overfloat: [ hidden | scroll | visible];
四、浏览器，只要触发了BFC或者hasLayout，那么该区域就是一个独立的区域，不受外界影响
1、BFC（block formatting context） "块级格式化上下文"。
1.1 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
解释：每个HTML元素默认情况会根据自己的特性（block、inline、inline-block）进行布局显示（例如block元素会从上到下独占一行的特性进行布局；内联元素从左至右显示）。此BFC是专门说明block元素的上下文布局方式？？？
1.2 只在标准浏览器（除ie8及以下版本的ie浏览器外）中会出现的特性
1.3 触发BFC的方法
1.3.1 float值不为none
1.3.2 overflow不为visible
1.3.3 display: [ table-cell | table-caption | inline-block ];
1.3.4 position 不为 relative 和 static
1.3.5 width[ height ] | min-width[ min-height ]: (!auto)
2、haslayout
2.1 ie浏览器特有
2.2 触发方法
2.2.1 zoom: (!normal)
2.2.2 -ms-writing-mode: tb-rl;
2.2.3 writing-mode: td-rl;
第二章
一、定位
1、定位分类
1.1 relative 相对定位
1.1.1 不影响本身特性
1.1.2 不脱离文档流
1.1.3 如果没有定位偏移量，对元素本身没有任何影响
1.1.4 提升层级
1.2 absolute 绝对定位
1.2.1 使元素完全脱离文档流
1.2.2 使内嵌支持宽高-----absolute有 display:inline-block; 的效果
1.2.3 块属性标签内容撑开宽度 display:inline-block; 的效果
注：绝对定位子级的浮动可以不用清浮动方法 即clearfix
1.2.4 偏移量是相对于定位父级的，如果没有定位父级，则相对于document
1.2.5 绝对定位一般是配合相对定位使用
1.2.6 提升层级，假设都是定位元素，则后面的元素覆盖前面的元素（后面的层级高）
1.3 fixed 固定定位
1.3.1 使元素完全脱离文档流
1.3.2 使内嵌支持宽高-----absolute有 display:inline-block; 的效果
1.3.3 块属性标签内容撑开宽度 display:inline-block; 的效果
注：固定定位子级的浮动可以不用清浮动方法 即clearfix
1.3.4 偏移量是相对于document <与绝对定位的区别>
1.3.5 IE6不支持，解决兼容性--》js或者绝对定位模拟
1.4 其他
1.4.1 static，默认值
1.4.2 inherit，从父级继承定位属性值 不兼容！
2、定位层级 z-index （无单位）
2.1 定位元素默认后者层级高于前者
2.2 建议在兄弟标签之间比较层级
二、透明度 opacity: [ 0-1 ]; 0全透明，1不透明，兼容性问题
1、使用
div{
opacity: [ 0-1 ];
filter: alpha(opacity=0~100); //IE6/7下
}
2、特性
2.1 继承性。父级添加透明度，子级也会继承
第三章
一、表格
1、表格标签
1.1 table
1.2 thead
1.3 tbody
1.4 tfooter
1.5 tr
1.6 th 表头的单元格
1.7 td 表格的单元格
2、表格样式
2.1 border: 1px solid red;
2.2 border-collapse: [ collapse | separate | inherit ]; //合并表格边框，单边框（table上写样式）
3、单元格合并
3.1 colspan: num; 合并列
3.2 rowspan: num; 合并行
二、表单
1、表单元素：
1.1 input
1.1.1 类型type：<input type="text" name="username" value="请输入姓名" />
1.1.1.1 password
1.1.1.2 radio name必须相同，具有分组的效果，告诉后端这个name是同一组，不同值value
1.1.1.3 checkbox name必须相同，表示同一组
1.1.1.4 submit 不需要设置name，不用提交，value是显示的值，默认值“按钮”
1.1.1.5 reset 不需要设置name，不用提交，value是显示的值，默认值“重置”
1.1.1.6 button 需要设置value，没有默认值 //自定义按钮
1.1.1.7 image 同button
1.1.1.8 file 上传图片
1.1.1.9 hidden 用于向后端传值，但是前端不需显示
1.2 label
1.2.1 <label for="inputID">这是标签</label> //for 点击标签触发焦点在input框中
1.2.2 <label> <input type="text" /> </label>
1.3 select/option 下拉选择 对高度的不兼容。
1.3.1 没有option，则value无法赋值
1.4 textarea 文本域
2、属性：
2.1 checked="checked" //默认选中
2.2 disabled="disabled" //不可编辑，后端将获取不到该值
第四章
一、兼容性问题
1、IE6、IE7的兼容（XP系统）
1.1 H5标签兼容，H5标签在IE6、IE7下都不能兼容
1.1.1 解决办法1：用js动态创建标签+display: block; （原因：动态创建的自定义标签默认行内）
document.createElement('header'); //css 加上display: block;
1.1.2 解决办法2：引用 html5shiv.min.js 文件，让该js文件处理标签
<script src="html5shiv.min.js"></script> //引用即可
1.2 元素浮动兼容性
1.2.1 父元素加浮动，但表现的需要是子元素，此时父元素浮动不生效。
解决办法：给需要浮动显示的子元素加上浮动
1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。第二个 margin-left: 100px; (第一个box的width)。此时IE6下两元素间出现缝隙
解决办法：不建议该写法，因为浮动层级提升。解决方法让两个兄弟节点均 float:left; ，不用margin-left
1.3 IE6下子元素宽高 > 父级元素宽高，子元素会撑开父级元素
解决办法：不建议让子元素宽高 > 父级元素宽高
1.4 p包含块级元素标签。此时IE6浏览器渲染会出现：自动生成div的兄弟节点P，且p标签不再包含div，布局乱套了
<p>
<div></div>
</p>
1.5 总结用于不能包含块级元素的特殊块级元素的标签：p、h1~h6、td。正常情况：内联元素不能包含块级元素
1.6 margin兼容性
1.6.1 margin-top 传递
解决办法1：给父级加上border，但是IE6还是不兼容
解决办法2：触发BFC 给父级加上zoom: 1;（不用border了）
1.6.2 上下margin叠加
尽量不使用
1.6.3 双边距问题，当 float: left; margin-left: 100px; 此时IE6下margin-left 是200px //右边距没有这个问题
解决办法：针对IE6、7添加 *display: inline;
IE6识别*和_， 不识别 !important
IE7识别*, 不识别_，识别 !important
而firefox两个都不识别， 识别 !important
1.7 li里子元素都浮动，各个li之间在IE6、7下方会产生4px间隙问题
解决办法：给li加上 *vertical-align: top;
1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中）
解决办法1：两个浮动元素中间避免出现内联元素或注释
解决办法1：子元素宽度不超过父级3px
1.9 父级包不住relative的子级
解决办法：针对IE6、7给父级加上relative
1.10 IE6下绝对定位元素的父级宽度是奇数，则该子元素right和bottom有1px偏差
解决办法：避免父级宽度出现奇数
1.11 IE6下绝对定位元素和浮动元素并列时，绝对定位元素消失
解决办法：让两元素不处于同级
1.12 IE6下input空隙问题
解决方法：给input加上浮动
1.13 IE6下输入类型表单背景图片--》背景图片会跟着文字的增多移动
解决办法：设置背景fixed
1.14 IE7以及以下a标签右浮动时，错位到下一行
解决办法：css hack，利用css hack *margin-x 调试完成
2、css hack（针对不同浏览器写不同css样式的过程）
2.1 书写css hack 顺序：先写全部都支持的，然后单独处理个别浏览器
2.2 个别处理支持：
9 IE9以及以下支持反斜杠（其它不支持）：background: blue9;
* IE7以及以下支持：*background: green;
_ IE6以及以下支持：_background: red;
3、IE6不支持PNG24 （IE6下不支持透明）
解决办法1：引用js文件处理。 但是不支持body上面的背景图片
<script src="DD_belatedPNG_0.0.8a.js"></script> //这个插件是处理png-24图片在IE6下出现灰色背景的。
<script>
DD_belatedPNG.fix("需要支持PNG24的css选择器"); //即可
</script>
解决办法2：原生滤镜
_background-image:none;
_filter:两句代码; //filter只有IE浏览器能识别
二、样式优先级
默认<类型（标签）<class<id<style（行间）<!important;