第四章：内联块（inlineblock）
*小知识点：
：分割线
行高和高度一样时文字垂直居中。
hover{····}：鼠标移动到某处时发生的动态变化。
hover, .class选择器名：当前选中某页面。
display:规定元素生成的框类型；
划分区域的框默认样式：四边形并且每个角都是90度。
块元素的特征：
1.没有设置宽度时，默认撑满一行。
2.默认块元素独占一行。
3.支持所有CSS命令。
内联元素的特征：
1.宽高由内容撑开。
2.不支持宽高。
3.一行内可以继续显示跟同类的标签。
4.不支持上下的margin
5.代码换行被解析
display：block 显示为块
使内联元素具备块属性标签的特性
display：inline 显示为内嵌
使行块属性标签具备内联元素的特性
Inline-block的特点：
1、块元素能在一行显示；
2、内联元素支持宽高；
3、没有宽度的时候由内容撑开宽度；
第五章：浮动（float）
*inline-block 特性：
1.块在一排显示
2.内联支持宽高
3.默认内容撑开宽度
4.标签之间的换行间隙被解析（问题）
5.ie6 ie7不支持块属性标签的inline-block（问题）
float
float:left（左） right （右）none（没有）inherit（继承）;
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
文档流是文档中可显示对象在排列时所占用的位置。
float:left;---div1 div2 div3
float:right;---div3 div2 div1
clear:left （左）right （右）both （左右两边）none （没有）inherit （继承）；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许有浮动元素。
float的特征：
1.块在一排显示
2.内联支持宽高
3.默认内容撑开宽度
4.脱离文档流
5.提升层级半层
清除浮动：
1.clear
clear:left （左）right （右）both （左右两边）none （没有）inherit （继承）；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许有浮动元素。
2.加高度
问题：高度不定时不方便清除，扩展性不好。
3.父级浮动
问题：页面中所有元素都加浮动，margin左右auto失效（floats bad ！）
4.inline-block 清浮动方法：
问题：margin左右auto失效；
5.空标签清除浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
6.br清除浮动 <br clear="all"/>
问题：不符合工作中：结构、样式、行为，三者分离的要求。
7.after伪类清除浮动方法（现在主流方法）给浮动元素的父级加after伪类
after伪类： 元素内部末尾添加内容；
after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a.触发 IE下 haslayout，使元素根据自身内容计算宽高。
b.FF 不支持；
clear:after{content:'';display:block;clear:both;}
clear{zoom:1;}
以下形式触发BFC：
BFC (block formatting context) 标准浏览器
a.float的值不为none。
b.overflow的值不为visible。
c.display的值为table-cell, table-caption, inline-block中的任何一个。
d.position的值不为relative和static。
e.width|height|min-width|min-height:(!aotu)
以下形式触发 IE下 haslayout：
a.writing-mode:tb-rl
b.-ms-writing-mode:tb-rl
c.zoom:(!normal)
8.overflow:hidden 清浮动方法；给浮动元素的父级加overflow
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）（超出父级隐藏）
overflow:scroll;（超出父级有滚动条）
第六章：定位（position）
position:relative; 相对定位
*需要谁移动就给谁加定位
a.不影响元素本身的特性；
b.不使元素脱离文档流（元素移动之后原始位置会被保留）；
c.如果没有定位偏移量，对元素本身没有任何影响；
d.提升层级
定位元素位置控制
top/right/bottom/left （上 右 下 左）定位元素偏移量。
top:200px; 上部留有200px。
left:200px; 左侧留有200px。
position:absolute; 绝对定位
a、使元素完全脱离文档流（元素移动之后原始位置不会被保留）；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document（浏览器可视区域的）发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
*层级：代码从上往下执行，后面的能覆盖前面的。
z-index:number;定位层级
a.定位元素默认后者层级高于前者；
b.建议在兄弟标签之间比较层级
position:fixed； 固定定位
与绝对定位的特性基本一致，差别是始终相对整个文档（浏览器可视区域的）进行定位；问题：IE6不支持固定定位；
position:fixed;
right:0; 可直接定位方向
bottom:0;
position:relative | absolute | fixed | static | inherit;
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
position:relative | absolute | fixed | static | inherit;
遮罩弹窗：
标准浏览器透明度设置： opacity:0~1; （完全透明~不透明）
父级加透明度子级也会被继承。
IE浏览器6.7下的透明度设置： filter:alpha(opacity=0~100); （完全透明~不透明）
第七章：表格表单（tableform）
表格标签：
table 表格
thead 表格头
tbody 表格主体
tr 表格行
th 元素定义表头
td 元素定义表格单元
<table border=" ">:表格边框
（与table{border-collapse:collapse;} 配合使用）
*写代码时以行为单位去写
表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
单元格合并
colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td> 合并两个单元格
rowspan 属性规定单元格可横跨的行数。
<td rowspan="2"></td> 合并两个单元格
合并的数量+剩余的数量=总数
一行合并删当前行，跨行合并删除当前行的其他行。
表单
表单：form （用户输入对应东西的）
<form action=""></form>（action属性是提交的地址）
<input type="··· " name="···" value="···" />
input：单标签 type：类型 name：提交的信息是做什么的
value：默认输入的信息
text 文本框，输入框
password 密码
radio 单选 name后面的需要保持一致
checkbox 复选 name后面的需要保持一致
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
代码如下：
<input type="text" name="user_name" value="输入框">
<input type="password" name="password" value="">
<input type="radio" name="sex" value="men">男
<input type="radio" name="sex" value="women">女
<input type="checkbox" name="xingqu" value="chi">吃
<input type="checkbox" name="xingqu" value="shuijiao">睡觉
<input type="checkbox" name="xingqu" value="dadoudou">打豆豆
<input type="button" value="自定义按钮"> 一定要加value
<input type="image">
<input type="file"> 上传文件
<input type="hidden" value="yincang"> 隐藏不需要用户看到的数据
<input type="submit"> 不设置value显示提交，设置显示value的信息
<input type="reset"> 不设置value显示重置，设置显示value的信息
第八章：兼容性讲解
fuckIE（一）
每个浏览器都有不同的内核，不同的处理引擎，导致同一条样式的处理方式是不一样的。每个浏览器上的不同差异称之为兼容性。
H5标签兼容。H5标签在IE6，IE7下是没有用的。
原因：IE6不是标准的浏览器。
方式一（动态创建自定义标签）：
<script> 动态去创建的标签是自定义标签，默认的是内联元素，不支持宽高，在主体中需要转换为块元素"diaplay:block;"
document.createElement("header"); 创建"header"节点
document.createElement("section"); 创建"section"节点
document.createElement("footer"); 创建"footer"节点
</script>
方式二（引用js）：
<script src="js/html5shiv.js"></script>
fuckIE（二）
元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
解决方案：需要谁浮动就给浮动加给谁。
第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题;
解决方案：
1.不建议这么写。 原因：脱离文档流的元素和没有脱离文档流的元素有层级差异。
2.用浮动解决。
fuckIE（三）
IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：不要让子元素的宽高超出父级。
p 包含块元素嵌套规则
块元素不能嵌套块元素：<p> <td> <h1>-<h6>
margin兼容性问题：
1.margin-top传递给父级
解决方案：触发BFC，haslayout
2.上下margin叠加
解决方案：尽量使用同一方向的margin，比如都设置top或者bottom
fuckIE（四）
display:inline-block：
*：针对不同浏览器进行处理
解决方案：
*display:inline;
*zoom:1;
IE6 最小高度问题：19px
解决方案：*overflow:hidden;
fuckIE（五）
IE6 双边距：
<body>默认样式边距：8px
当元素浮动后再设置margin那么就会产生双倍边距（左侧）
解决方案：针对IE6和IE7添加：*display:inline;
li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题：
间隙由li产生。
解决方案：针对IE6和IE7添加：*vertical:top;
fuckIE（六）
浮动元素之间注释，导致多复制一个文字问题：
条件：两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px。
解决方案：
1.两个浮动元素中间避免出现注释或者内联元素
2.与父级宽度相差3px或以上。
IE6 7 父级元素的overflow:hidden 是包不住子级的relative：
解决方案：针对IE6和IE7给父级元素添加相对定位。
fuckIE（七）
IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差：
解决方案：避免父级宽高出现奇数
IE6下绝对定位元素和浮动元素并列（同级）绝对定位元素消失：
解决方案：只要绝对定位元素和浮动元素不处于同级就可以避免绝对定位元素消失。
IE6 下input的空隙：
解决方案：针对IE6和IE7给input元素添加float
fuckIE（八）
IE6 下 输入类型表单控件背景问题：
输入类型表单控件：需要用户输入的表单控件
解决方案：设置background-attachment:fixed;
*（hack）:针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
\9 IE10以及IE10以下版本的浏览器
*IE7以及IE7以下版本的浏览器
_IE6以及IE6以下版本的浏览器
fuckIE（九）
png-24 兼容性问题：IE6不支持png-24 图片
解决方案：
1.JS插件(问题:不能处理body之上png24)
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix("img, div");
</script>
DD_belatedPNG.fix('标签名,标签名');
2.原生滤镜：（能处理body之上png24）
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");
样式优先级：
默认 < 类型 < class < id < style(行间) < !important
提升样式优先级：
!important 提升样式优先级或权重
