文档流
文档流处在网页的最底层，它表示的是一个页面中的位置， 我们所创建的元素默认都处在文档流中
元素在文档流中的特点:
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小默认从左向右排列， 如果一行中不足以容纳所有的内联元素，则换到下一行， 继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
浮动
浮动时才考虑的层级问题: 1个元素 分两层 文字层和 标签层 浮动后提升半级, 提升标签层, 所以后面的元素会上来标签层, 文字层却不会上来这就是文字环绕的原理
1. 块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，使用float来使元素浮动，从而脱离文档流,它下边的元素会立即向上移动
2. 元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
3. 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
4. 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
5. 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
6. 块元素脱离文档流以后，高度和宽度都被内容撑开
7. 元素 开启浮动 脱离文档流以后会变成块元素
清除浮动
.clearfix{*zoom:1;(开启ie6 7 hasLayout 清除浮动)}
.clearfix:before,.clearfix:after{content: ".";height:0;visibility:hidden;display: block;clear: both;}
BFC
开辟BFC容器的方法
1.根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)
6.IE6以下没有BFC概念 但是有类似hasLayout, 开启方法 *zoom:1 (zoom是放大的意思 1代表不放大,但却触发了hasLayout机制)
BFC的约束规则
1. 内部的block box会在垂直方向上一个接一个的放置
2. 垂直方向的距离由margin决定,属于同一个BFC的两个相邻或嵌套(只要他们之间没有阻挡,例如边框，非空内容，padding等)block box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
4. BFC的区域不会与float的元素区域重叠
因为两个BFC区域之间互不影响5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素
高度塌陷
父元素没有设置高度 靠子元素撑开高度 此时子元素 开启浮动后 脱离了文档流 无法撑开父元素 就会导致父元素塌陷 父元素下面的所有元素就会上来 (根据BFC第五条规则可解决)
外边距合并(重叠)
外边距合并的4个条件: 1. 同属于1个BFC内 2. 块级元素 3. 相邻/嵌套(子父级也算) 4.之间没有阻碍(边框，非空内容，padding)
按照BFC的定义，只有同属于一个BFC时，两个块级元素才可能发生Margin的重叠，这个包括(相邻元素，嵌套元素)，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。因此要解决margin重叠问题，消除4个条件其一就行了 ,对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
浮动元素覆盖块级元素
同一个BFC下 ,浮动元素会覆盖后面的块级元素。
1.为后面的块级元素创建一个BFC。如overflow:hidden
2. clear: both;
定位position 偏移量默认值auto
relative
不脱离文档流,提升层级 ,不改变元素display
absolute
脱离文档流,提升层级,使元素变成块级元素,不设置偏移量则元素位置不会发生变化, 参照最近开启定位的祖先元素没有则参照初始包含块进行定位, 偏移边界是 内容区 margin:auto = margin : auto auto
fixed
根据浏览器窗口定位,ie6不支持
static默认值
没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
sticky
粘性定位 具备 relative和fixed的特性 兼容性不好 了解即可
层级
文档流中的普通元素默认最低 定位的元素会提升层级 , 手动设置了z-index层级比不设置的都高
包含块
元素的尺寸及位置 width height padding margin和absolute fixed的偏移值百分比是通过元素的包含块计算得来
元素如何确定包含块:
1.当元素在祖先元素上找不到包含块时 包含块是一个被称为初始包含块的视口大小的矩形
2.根元素(<html>)所在的包含块是初始包含块
3. static或relative,包含块就是由它的最近的祖先(块|行内块)元素的内容区。
4. absolute,包含块就是由它的最近的定位祖先元素的(包括内填充以内的)区域组成。如果没有祖先定位元素则是初始包含块
5. fixed，包含块就是由 viewport (in the case of continuous media) 组成。
根据百分比计算值
块级元素的包含块的width height=内容区 绝对定位元素 width height = padding+内容区
1. 计算height top及bottom中的百分值,是通过包含块的height的值。
1.1如果包含块的height值会根据它的内容变化,非absolute的元素计算值为0
1.2包含块的position属性的值被赋予relative或static, absolute定位元素会计算包含块的padding值
2. 计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。
网友评论