【CSS基础】CSS常见概念

浏览器渲染过程

不一样的浏览器渲染过程实际上并不相同，可是依旧存在相一致的部分，大体过程以下所示：

1. 浏览器解析HTML文档的源码，而后构造出一个DOM树，DOM树的构建过程是一个深度遍历的过程，当前节点的全部子节点都构建好之后才会去构建当前节点的下一个兄弟节点。
2. 接下来，浏览器开始对CSS文件内容进行解析，通常来讲，浏览器会先查找内联样式，而后是CSS文件中定义的样式，最后再是浏览器默认的样式，构建CSS Rule Tree。
3. 接着根据CSS Rule Tree和DOM Tree构建出Render Tree，DOM树的节点并非全部的都会放进Render Tree中，好比header标签、display:none的标签等。
4. 构建出Render Tree后，浏览器已经能知道页面中有哪些节点、各节点的CSS样式以及它们的从属关系，从而去计算出每一个节点在屏幕中的位置。最后按照计算出的位置，调用系统的API，把各节点绘制到屏幕上。

上诉过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局render树，而是解析完一部分就渲染一部份内容。

reflow和repaint

回流(reflow)：若是改变了影响元素布局信息的CSS样式，好比width、height、left、top等，该元素的位置信息就会发生变化，也可能会致使整个页面其余元素的位置信息都发生变化，因此渲染引擎须要从新执行layout过程，从新计算每一个元素的位置。reflow是在浏览器下一帧绘制的时候，进行从新布局，若是修改了元素的布局样式后，立马去获取offsetTop、scrollTop等属性，那么渲染引擎就会强制进行从新布局过程，以保证在JS中获取到正确的offsetTop、scrollTop等属性值。

重绘(repaint)：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分须要重绘，可是元素的几何尺寸不会变化。

display:none的标签不会被加入Render Tree，也不会触发reflow，visibility:hidden的标签会被加入到Render Tree，不会触发reflow，只会触发repaint。

减小reflow/repaint

1. 若是须要频繁的修改DOM样式，尽可能经过预先定义好的css的clsss，而后修改DOM的className。
2. 不要把DOM节点的属性值放在一个循环里当成循环里的变量
3. 为须要添加动画的HTML元素，添加上position:absolute/fixed属性值，这样修改该元素的css是不会引发reflow。
4. 不要使用table布局，由于可能一个很小的改动就会引发整个table的从新布局。

盒模型

HTML文档中的每一个元素在渲染的时候都会被描述成一个矩形盒子，而盒模型正是用来表示每一个元素盒子所占用空间大小的模型，CSS盒模型分为W3C标准盒模型和IE盒模型，IE盒模型就是在IE6如下版本的怪异模式下的盒模型，IE6以及更高版本都遵循标准盒模型。在CSS中主要经过四个部分来描述，分别为margin、border、padding、content。通常来讲，IE盒模型的宽高计算方式为：width/height = content + padding + border，W3C标准盒模型的宽高计算方式为：width/height = content。

W3C标准盒模型宽高的计算模式在对于非px为单位的宽高时，会带来很是大的计算困扰，以下：

.box {
    width:50%;
    border:1px solid #ccc;
}

这个地方想要的确定是50%，可是实际的大小趣事50% + 2px，这多出的2px就很让人无奈，因而为了避免破坏这个50%的宽度，每每得再内嵌一层元素用来设置border，就成了下面这样：

.box {
    width:50%;
}
.box .box-inner {
    border:1px solid #ccc;
}

这种解决方式显然不太科学，至少致使了HTML结构的臃肿，而box-sizing属性的出现就解决了这个问题，它就是用来改变元素宽高的计算方式。box-sizing属性有两个经常使用的取值content-box和border-box，若是值为content-box(默认)，则实际宽度为上面所说的计算方式：实际宽高 = border + padding + width/height。如为border-box则是另外一种计算方式，其实际宽高就是设置的width/height。

浏览器选择哪一个盒模型，主要是看浏览器处于标准模式仍是怪异模式，在<DOCTYPE DTD="">标签里有DTD声明，若是有DTD声明，浏览器处于标准模式，没有DTD声明，浏览器处于怪异模式，处于怪异模式的浏览器按照自身的解析方式去解析，IE6会选择IE盒模型，其余现代浏览器都会采用W3C标准盒模型。IE6如下版本的浏览器没有遵循W3C标准，不管页面有没有DTD声明，它都是按照IE盒模型解析代码。

margin属性

margin:% | px，margin的值若是为%，其是根据父元素的宽度来计算的，包括margin-top和margin-bottom，其值也是相对于父元素的宽度。而且内联元素的margin-top/bottom是不容许设置的。

margin的合并

• margin在水平方向上不会合并
• margin在垂直方向会合并，其值为二者最大值
• 元素设置有margin-top、margin-bottom且为空内容，其margin上下也会重叠，其值为二者最大值
• 父元素若是没有padding、border等属性时，其子元素的margin上下方向会和父元素的margin进行重叠

margin设置负值

• 位于普通文档流中元素，负值至关于将元素向负值方向移动覆盖，可是只会覆盖颜色，不会覆盖文字。
• 对于position:relative元素，负值会彻底覆盖前一个元素，会影响后面元素一块儿移动
• 对于position:absolute元素，元素脱离了普通文档流，对其余元素没有影响
• 对于float元素，能够经过负值进行覆盖，最多见的应用是三列布局。

padding属性

• 值若是为%，也是根据父元素宽度来计算的
• padding不存在合并的状况
• padding也不存在负值状况

Float属性

• float元素会脱离正常文档流，而后向左或向右平移，一直平移到碰到容器边框或者另外一个float元素
• 浮动元素会根据上一个元素的类型判断位置，若是上一个是float元素，则跟随他浮动，放置不下就挤到下一行展现
• 若是上一个是标准流元素，则浮动元素的相对垂直高度不变，顶部和上一个底部对齐

清除浮动

• 父元素添加overflow:hidden，会隐藏子元素超出容器部分，且IE6不支持
• 浮动元素后面添加clear:both，会添加额外的无心义的标签
• 父元素变成float元素
• 使用伪类:after，代码以下：

.wrap:after {
    content:' ',
    display:block;
    height:0;
    clear:both;
}
.wrap {
    zoom:1;
}

content是在父容器的后面添加一个空白字符，height:0是让这个空白字符不显示出来，display:block;clear:both是确保这个空白字符是非浮动的独立区块。zoom:1是IE6独有的属性，做用是激活父元素的hasLayout属性，让父元素拥有本身的布局，其余浏览器会直接忽略该属性。

BFC原理

BFC即块级格式化上下文，它属于普通文档流，具备BFC特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且BFC具备普通容器所没有的一些特性。通俗来讲，能够把BFC理解为一个封闭的大箱子，箱子内部的元素不管如何翻江倒海都不会影响到外部。

触发BFC的条件

只要元素知足下面任一条件便可触发BFC特性：

• body根元素
• 浮动元素：float除none之外的值
• 绝对定位元素：position(absolute、fixed)
• display为line-block、table-ceils、flex
• overflow除了visible之外的值(hidden、scroll、auto)

BFC特性以及应用

• 不一样的BFC容器下边距不会发生重叠
• BFC能够包含浮动元素(清除浮动)
• BFC能够阻止元素被浮动元素覆盖，能够用来实现两列自适应布局。

层叠水平

一个DOM元素，在不考虑层叠上下文的状况下，会按照层叠水平决定元素在Z轴上的显示顺序，通俗来说，不一样的DOM元素组合在一块儿发生层叠的时候，它们的显示顺序会遵循层叠水平的规则，而z-index是用来调整某个元素显示顺序。

7阶层叠水平

若是两个元素层叠水平相同的时候，这个时候就要遵循下面两个准则：
1 后来居上原则
2 谁z-index大，谁在上原则
一个页面中每每不止一个层叠上下文，在同一个层叠上下文中按照层叠水平的规则来堆叠元素，正常状况下，一共有三种大的类型建立层叠上下文：
1 默认建立层叠上下文，HTML根元素属于根层叠上下文元素
2 须要配合z-index触发建立层叠上下文
3 不须要配合z-index触发建立层叠上下文

须要z-index建立层叠上下文

1 含有position属性的元素
2 flex项（父元素diaplay为flex|inline-flex）注意是子元素，不是父元素建立层叠上下文
这两种状况下，须要设置具体的z-index值，不能设置z-index为auto，这也就是z-index:auto和z-index:0的一点细微差异

不须要z-index建立层叠上下文

这种状况下，基本上都是由CSS3中新增的属性来触发的，常见的有：

• 元素的opacity < 1
• 元素的如下属性不为none：transform，filter，mask等等