1.CSS 选择符权重
css 中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为 0001
class 选择符的权重为 0010
id 选择符的权重为 0100
子选择符的权重为 0000
属性选择符的权重为 0010
伪类选择符的权重为 0010
伪元素选择符的权重为 0001
包含选择符的权重：为包含选择符的权中之和
内联样式的权重为 1000
继承样式的权重为 0000
2.盒模型
盒模型：内容、padding 填充区、border 边框、margin（不会改变原来盒模型的大小）。
盒模型实际宽=左右 margin+左右 border+左右 padding+width。
padding：调整内容在容器的位置，padding 调整父子位置关系时 padding 写给父元素，padding 值是额外加在元素原有大小之上的，要想原来尺寸不变，加完 padding 值后在原始数值上减去加上的 padding 值。
margin：用来调整并列元素间的位置关系。
父子通过 margin 调整位置时要注意：
1.给父元素加 overflow：hidden 溢出内容为隐藏。
2.给父元素或子元素添加浮动。
3.有边框。
边框（border）也会改变盒模型大小。当设置为 box-sizing:content-box 时，将采用标准模式解析计算，也是默认模式，在宽度和高度之外绘制元素的内边距和边框；当设置为 box-sizing:border-box 时，将采用怪异模式解析计算，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
边框样式：border-style：solid(实线)/ dotted（点）/ dashed（虚线）/ double（双边线）/none(取消边框)；
3.五大浏览器内核
Trident （MSHTML，IE 核心） IE 浏览器 （三叉戟；三叉线；三齿鱼叉） Trident 只能应用于 Windows 平台，且是不开源的。
Gecko （壁虎） 火狐 Gecko 是一套开放源代码的、是以 C++编写的网页排版引擎，它的最大优势是跨平台，能在 Microsoft Windows、Linux 和 MacOS X 等主要操作系统上运行。
Presto （ 迅速的） 欧朋 它是世界上公认的渲染速度最快的引擎。 然而代价是牺牲了网页的兼容性。
Webkit （急速） 谷歌 、苹果 它的特点在于源码结构清晰、渲染速度极快。
Blink （急速） 欧朋、谷歌 由 WebKit 内核衍生出来的，是由 Chromium 和 opera 开发维护的新项目。
4.IE6 常见 CSS 解析 Bug 及 hack
1)默认高度（IE6）
描述：在 IE6 及以下版本中，部分块元素拥有默认高度（在 16px 左右）；
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;
2)加了超链接的图片有边框 BUG （IE 浏览器）
当图片加<a href=“#”></a>在 IE 上会出现边框
Hack:给图片加 border:0;或者 border:none;
3)图片间隙
div,dt,li 等中图片间隙中的图片间隙 BUG
描述：在 div 中插入图片时，图片会将 div 下方撑大大约三像素。
hack1:将</div>与<img>写在一行上； ie6
hack2:将<img>转为块状元素，给<img>添加声明：display:block;
hack3:给图片添加 vertical-align:top/middle/bottom.
- 双倍浮向（双倍边距）（只有 IE6 出现）
描述：当 Ie6 及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;
5)表单元素行高对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;
hack2:给 input 改变垂直对齐方式 ，添加 vertical-align:top/middle/bottom.
6)按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1： 统一大小/（用 a 标记模拟）
hack2:input 外边套一个标签，在这个标签里写按钮的样式，把 input 的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
7)百分比 bug
描述：在 IE7 及以下版本中在解析百分比时，会按四舍五入方式计算从而导致 50%加 50%大于 100%的情况。（也会受系统影响）
hack: 给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
8)透明属性
兼容其他浏览器写法：opacity:value;(value 的取值范围 0-1;
例：opacity:0.5;)
IE 浏览器写法：filter:alpha(opacity=value);取值范围 0-100(整数)
9）li 列表的 BUG
1：当父元素(li) 有 float:left;子元素(a) 没设置浮动的情况下会出现垂直 bug；
Hack:给父元素 li 和子元素 a 都设置浮动；
2：当给 li 中的 a 转成 block；并且有 height,并有 float 的时候，li 中没设置浮动会出现阶梯显示;
hack：同时给 li 加 float;
10）margin BUG
当两个上下排列的元素，上元素有 margin-bottom：30px；下面元素有 margin-top:20px；他们中间的距离不会相加，而是会设置为较大的值；
hack：给下方元素添加浮动，生成一个新的 BFC。
11)当 li 里 a、span 分别添加左右浮动时，并且 li 设置高度后，IE7 及以下浏览器会出现 li 下方多出 3 像素左右的空隙；
hack：给 li 添加 float：left；和 width：100%；
12）当前元素(父元素里面第一个子元素并且是块状元素)与父元素没有设置任何浮动的情况下，设置 margin-top 后，会错误的把 margin-top 加在父级元素上。
Css hack:
1、给父级元素添加 overflow:hidden;(推荐使用)
2、给父元素或者子元素加浮动。
3、当父元素有边框时，可以直接给子元素添加 margin-top 值。
5.calc()函数
calc()函数用于动态计算长度值；
运算符前后都需要保留空格；
width：calc（100% - 10px）；
任何长度值都可以使用 calc（）函数计算；
支持+ - * /标准的数学运算优先级规则。
6.浮动元素的父元素高度自适应（高度塌陷）
hack1：隐藏法，给父元素添加声明 overflow:hidden;
hack2：在浮动元素下方添加空 div,并给该元素添加声明：clear:both;height:0;overflow:hidden;
hack3：万能清除浮动法，给浮动元素的父元素清除浮动；
:after{content:”.”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
7.检索对象是否显示
visibility:hidden/visible 和 display:none;
共同点：都是可以设置元素显示或者隐藏的属性；
区别：display:none ;在隐藏元素的同时，元素的位置也一起隐藏，而 visibility:hidden；在隐藏元素的同时，原来所在的位置依然是保留的。
8.表单 form
1、button 按钮（不进行提交）
<input type="button" value="按钮内容" />
<button type="reset"> </button>
2、单选框(单选按钮)
<input type="radio" name="ral" />
3、复选框
<input type="checkbox" />
checked="checked"; 默认选中
disabled="disabled" ；禁用
enabled=“enabled” ；可用
4、多行文本框（文本域）
阻止浏览器对窗口的拖动设置:{resize:none;}（css 属性）
<textarea cols="字符宽度" rows="行数" ></textarea>
5、列表和菜单 下拉菜单
<select >
<option>选项1</option>
<option>选项2</option>
......
</select>
6、上传文件框 文件域
<input type="file" />
7、图像域
<input type="image" src="目标图片路径" width="" height="" />
8、提示信息标签
<label></label>
功能：label 元素用来定义标签，为页面上的其他元素指定提示信息。要将 label 元素绑定到其他的控件上，可以将 label 元素的 for 属性设置为与该控件的 id 属性值相同。
9、表单字段集
<fieldset></fieldset>
功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset 元素可以嵌套，在其内部可以在
设置多个 fieldset 对象。
10、字段级标题
<legend></legend>
功能：legend 元素可以在 fieldset 对象绘制的方框内插入一个标题。legend 元素必须是 fieldset 内的第一个元素。
9.表格 table
1、单元格间距(该属性必须给 table 添加)
border-spacing:value;
2、合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并)
3、无内容单元格显示、隐藏
empty-cells:show(显示)/hide（隐藏）;
4、表格布局算法(加快运行的速度,但不够灵活)
table-layout:auto/fixed(固定宽度，不会随内容多少改变单元格宽度)
5、表格标题
<caption>标题内容</caption>
表格标题位置：caption-side:top/right/bottom/left
说明：left,right,top,bottom 位置只有火狐识别，top,bottom IE7 以上版本支持，ie7 及以下版本不支持其它属性值，只识别 top;
6、数据行分组
<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾
说明：一个 Table 中，只能包含一个 thead,一个 tfoot,但可包含多个 tbody。
7、数据列分组
<colgroup span="value"></colgroup>
10.BFC
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box（块）参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。是 Web 页面中盒模型布局的 CSS 渲染模式。它的体系属于常规文档流。
BFC 的布局规则
1、内部的 Box 会在垂直方向，一个接一个地放置。
2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
3、每个元素的 margin box 的左边， 与包含块 border box 的左边相接触。
4、BFC 的区域不会与 float box 重叠。
5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6、计算 BFC 的高度时，浮动元素也参与计算。
哪些元素或属性能触发 BFC
1、根元素(html)
2、float 属性不为 none
3、position 为 absolute 或 fixed
4、display 为 inline-block, table-cell, table-caption, flex, inline-flex
5、overflow 不为 visible
BFC 的作用
1、自适应两栏布局
2、清除内部浮动
3、防止 margin 上下重叠
