文: jack同学
jack同学.jpg
规定单个盒子的规则叫盒模型，那么规定多个盒子排列的规则叫做视觉格式化模型
视觉格式化模型将页面排列布局分为三种方式
常规流 / 文档流
- 所有元素默认属于常规流
- 布局规则：块盒独占一行，行盒水平依次排列
- 包含块：每个盒子的活动区域（布局区域/排列区域），大部分情况下，盒子的包含块为父元素的内容盒(content-box)
- 常规流中块盒的布局规则
- 水平方向上
- 每个块盒的总宽度(content+padding+border+margin)，必须刚好等于包含块的宽度
- 块盒的宽度默认值为auto，在没设置宽度时水平方向上默认撑满剩余空间
- 块盒的margin默认值为0，在块盒宽度计算后还有剩余空间则margin-right全部撑满剩余空间
- 由于上面的规则所以可以理解常见的问题：为什么设置margin设置负值盒子的宽度增加了，就是因为水平方向上计算的宽度必须等于包含块的宽度
- 由于规则可知：margin设置margin-left: atuo; margin-right: auto; 可以水平居中的原因
- 垂直方向上
- height默认值为auto，也就是默认高度由内容撑开，跟宽度的auto值含义不一样
- margin垂直方向设置auto时，表示0，也就是设置auto也并不会垂直居中
- 百分比取值
- 设置块盒宽度、padding、margin为百分比值时的规则
- 以上所有百分比设置的大小都是相对于包含块的宽度进行计算的
- 常应用于宽高按比例自适应 / 画自适应圆、矩形等
- 设置块盒高度为百分比时的规则
- 如果包含块的高度由子元素内容撑开，那么设置百分比无效。
- 如果包含块的高度不是有子元素内容撑开，那么子元素盒子高度百分比相对于父元素高度
- 外边距合并
- 兄弟元素垂直方向外边距会合并
- 父子元素垂直方向外边距也会合并
- 解决：1) 父元素添加border。2) 父元素添加padding。3) 父元素触发bfc
- 水平方向上
浮动
- 元素浮动之后必为块盒
- 浮动元素的包含块和常规流一样是父元素的内容盒
- 浮动元素的尺寸规则
- 浮动元素宽度为auto时(也就是不设置宽度)，宽度由内容撑开
- 浮动元素高度为auto时(也就是不设置高度)，高度由内容撑开
- 浮动元素margin为auto时，为0
- 浮动元素border、padding、百分比设置规则跟常规流一样
- 浮动元素不会发生外边距合并问题
- 排列规则
- 左浮动靠上靠左排列
- 右浮动靠上靠右排列
- 浮动元素在包含块中排列时，看不到块盒，能看到行盒，以及产生bfc的块盒
- 如果文字不在行盒中时又浮动了，那么浏览器会自动生成一个行盒包裹浮动元素，这个行盒叫做匿名行盒。这种情况常用在文字包含图片中使用。
- 高度坍塌：高度自适应的常规流盒子包含浮动流盒子，那么常规流盒子高度会坍塌
- 原因：浮动元素脱离了常规流产生了浮动流，常规流盒子计算高度时只会计算内部为常规流的盒子高度
- 解决：清除浮动（ 给父元素添加类样式 .clearfix::after{content:""; display:block; clear: both;} ）/ 或者让父元素变成bfc元素
定位
- position: reletive; 相对定位
- position: absolute; 绝对定位
- position: fixed; 固定定位
- 定位元素会脱离文档流（相对定位除外)
- 相对定位定位规则：相对自己原来的位置定位
- 绝对定位定位规则：找有定位的父级进行定位，没有则根据文档进行定位，那个有定位的父级就是包含块
注意：具有绝对定位的元素，如果不设置定位，则可以配合margin属性来进行相对自己的定位，可以做一些固定位置图标
- 固定定位定位规则：包含块为视口，所以根据视口定位
- 绝对定位、固定定位元素一定是块盒
- 设置了绝对定位或者固定定位，则不能设置浮动，浮动会强制设为none
- 定位没有外边距合并
- z-index可以设置堆叠上下文，可以为负数，如果时负数，则显示在常规流和浮动流背后
