一、内联元素与行元素的区别
1、内联元素即行内元素。
2、内联元素，在文档流中挤在一行；不能设置宽高(即，即使设置了也不管用，例如a标签)、margin和padding的top和bottom
块元素，独占一行；可以设置宽高、margin、padding
3、可以使用display属性进行修改：display:block|inline-block|inline
4、inline-block
水平排列；有宽高、margin和padding
1)可置换元素——天生的行内块
img input button select textarear label
2)行内块不同于行内元素，可以设置宽高
3)包裹性
让元素inline-block化
inline-block在添加宽高之前，紧紧包裹内容，添加宽高之后就不是了
block默认宽度100%，设置absolute，变成包裹内容
二、position属性
1、static
没有定位，元素出现在正常的文档流中，默认属性。
设置left、right、top、bottom、z-index属性的设置不起作用
2、relative
相对于元素自己的正常位置进行定位，元素在正常的文档流中
LRTBZ属性设置起作用
3、fixed
固定定位，相对于浏览器窗口定位，即浏览器滚动也不会影响元素的位置，且与文档流无关，因此不占空间，可能会与其他元素重叠。LRTBZ属性设置起作用。
4、absolute
绝对定位，相对于static定位以外的第一个父元素进行定位，元素脱离文档流。
注意：body也是父元素
三、display:none;和visibility:hidden;
联系：都能让元素不可见
区别：
display:none;
visibility:hidden;
元素从渲染树中消失，渲染的时候不占空间
元素不从渲染书中消失，渲染的时候仍占空间，只是内容不可见
非继承属性，子孙节点的消失是由于元素从渲染树中消失造成的，修改子孙节点的属性依然无法显示
继承属性，子孙节点消失由于继承了hidden，设置visibility:visible;可以让子孙节点显示
修改常规流中元素的display会造成文档的重排(回流)
修改visibility属性只会造成本元素重绘
读屏器不会读取display:none;的元素内容；
会读取
注意：读屏器即为浏览器渲染
四、回流(重排)和重绘
只要某个改动会影响其他元素，就会造成回流。
回流：修改元素的布局样式，例如width、height、top、margin等会影响整个页面的布局，浏览器会重新执行layout过程，性能开销很大。(尺寸、位置、隐藏状态等布局样式)
重绘：修改元素的非布局样式，例如，color、background等，不影响整个页面的布局，浏览器只会对该元素重新绘制，开销相对较小。
注意：回流必将引起重绘，但是重绘不一定会引起回流。
性能优化
使用visibility:hidden;，而不用display:none;隐藏元素
如果需要频繁地修改DOM样式，尽量使用预先定义好的CSS的class修改DOM的className.
为需要添加动画的HTML元素，添加position:absolute|fixed;属性值，这样修改该元素的CSS时不会引起回流(动画最好用CSS3动画，只会引起两次重绘)——分析：这是因为绝对定位和固定定位可以让元素脱离文档流。
不要使用table布局。因为可能很小的改动，就会引起整个table的重新布局。
——分析：冗余度 table>div>flex
table元素的作用是显示表格化的数据，不是作为布局工具设置的。
一般使用div+css实现布局。
为什么不用table布局呢？
1、table比其他HTML标记占更多的字节，造成下载延迟，占用服务器更多流量资源。
2、阻挡浏览器渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待更久的时间。
如何最小化重绘和回流？
答：
1)对元素进行复杂操作时，可以先用display:none;隐藏，操作完成后再显示。
2)尽量避免使用table布局
3)避免使用CSS表达式，因为每次调用都会重新计算值
4)需创建多个DOM节点时，使用DocumentFragment创建完后一次性地加入document。例如，
var frag = document.createDocumentFragment()//文档碎片节点
//将element通过appendChild添加到frag中，再讲frag一次性加入document
五、浏览器渲染过程
1、解析HTML标签，构建DOM树
2、解析CSS文件，构建CSS Rule Tree
3、根据DOM树和CSS规则书，构建render tree。DOM Tree中一些节点不会被放入到Render Tree中。例如，header、display为none的节点。
4、构建出render tree后，浏览器已经知道页面中有哪些节点以及对应的样式、从属关系等。在layout过程中计算每个节点在页面中的位置，最后绘制到页面上。
六、盒模型
可以通过box-sizing:border-box|content-box;来设置盒模型。
HTML文档中各元素被渲染描述成矩形盒子。
盒模型表示每个元素盒子所占空间大小的模型。
分类：
W3C标准盒模型(IE6及以上版本)content-box:width=content
IE怪异盒模型(IE6以下版本)border-box：width=content+padding——不能用padding撑开盒子
七、CSS解析规则
1、先遍历内嵌样式，接着头部样式，最后外链样式(外链样式放在头部样式之后，对于同一元素而言，外链样式则会覆盖头部样式)
2、CSS优先级(!important>内嵌样式>头部样式)
3、同一优先级文件内，ID>class、属性选择器、伪类>div、伪元素
4、同一优先级内，后面样式覆盖前面样式
(一)选择器类型
4个基础选择器，5个复合选择器
选择器是一种模式，用于选择需要添加样式的元素。
(1)4种基础选择器
类选择器；ID选择器；通配符选择器(*)；元素选择器
(2)5种复合选择器
交集选择器：标签+类/id选择器{属性:值;}
并集选择器：例如：h1,h2,p(也叫选择器分组)
后代选择器：选择器+空格+选择器(两个选择器必须满足嵌套关系，父元素在前，子元素在后，无限制隔代)
子代选择器：选择器>选择器(选中直接下一代元素，也叫子选择器，子元素选择器)
相邻兄弟选择器：例如：h1+p(两者具有相同父元素)
补充：属性选择器：ahref{color:red;}
CSS伪类：向某些选择器添加特殊效果。例如a:link|visited|hover|active;:focus(拥有键盘输入焦点，无法再IE中工作);:first-child(元素的第一个子元素);:lang(带有指定lang属性)
CSS伪元素：向某些选择器设置特殊效果。例如，p:first-line|first-letter;h1:before|after。在CSS3中变成了::，增加了::selection
(二)CSS权重
用于计算优先级，优先级计算无视DOM树中的距离
内联样式
1000
ID选择器
100
类=伪类=属性选择器
10
元素选择器=伪元素选择器
1
八、CSS布局
九、CSS Hack
简单来讲，CSS Hack就是针对不同的浏览器或同一浏览器的不同版本编写特定的CSS样式，以获得统一的页面效果。
CSS Hack包括：
属性Hack
IE6能识别下划线“_”和星号“*”
IE7能识别星号“*”，但不能识别下划线“_”
选择器Hack
IE6能识别*html .class{}
IE7能识别*+html .class
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
