1. 视觉格式化模型(布局规则)
- 盒模型为规定单个盒子的规则:视觉格式化模型(布局规则),页面中的多个盒子排列规则,视觉格式化模型大体上将页面中盒子的排列分为三种方式:
常规流
、浮动
、定位
2. 常规流布局
- 不同的名称为常规流、文档流、普通文档流、常规文档流
- 所有元素默认情况下,都属于常规流布局
- 总体规则:块盒独占一行,行盒水平依次排列
2.1 包含块
- 不同的名称为常规流、文档流、普通文档流、常规文档流
- 所有元素默认情况下,都属于常规流布局
- 总体规则:块盒独占一行,行盒水平依次排列
- 包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域
- 绝大部分情况下:盒子的包含块为其父元素的内容盒
2.2 块盒(宽度)
- 每个块盒的总宽度,必须刚好等于包含块的宽度
- 宽度的默认值是auto
- margin取值也可以是auto,默认值0
- auto:将剩余空间吸收掉
- 当margin将值设为auto时,width吸收能力强于margin
- 若宽度、边框、内边距、外边距计算后、仍然有剩余空间,该剩余空间被margin-right全部吸收
- 在常规流中,块盒在其包含块中居中,可以定宽,然后左、右margin设置为auto
2.3 块盒(高度)
- 每个块盒垂直方向上的auto值:height:auto,适应内容高度,没有设置高度的情况下会根据内容的高度来决定高度
- margin:auto,margin垂直方向的auto表示0
2.4 百分比取值
- padding、宽、margin可以取值为百分比
- 以上所有百分比相对于包含块的宽度(父元素盒子的宽度)
- 高度百分比:包含块高度不取决于子元素的高度的时候,百分比相对于父元素的高度
2.5 上、下外边距的合并
- 两个常规块盒,上、下外边距相邻,会进行合并,两个外边距取最大值
3. 浮动布局
3.1 浮动盒子的应用场景
- 文字环绕图片:把图片设置为浮动就可以了,设置图片的外边距可以和文字产生间隙。
- 横向排列
3.2 浮动的基本特点(float)
- 修改float的属性值为left:左浮动,元素靠上靠左;right:右浮动,元素靠上靠右
- float的默认值为none,表示不浮动,也就是常规流
- 当一个元素浮动后,元素必定为块盒(自动更改display属性为block)
- 浮动元素的包含块,和常规流一样,为父元素的内容盒
属性 | 属性值 | 盒子排列 |
---|---|---|
float: | left | 左浮动,元素靠上靠左 |
right | 右浮动,元素靠上靠右 | |
none | 表示不浮动,也就是常规流(默认值) |
3.3 浮动盒子的尺寸
- 宽度为auto时,适应内容宽度
- 高度为auto时,与常规流一致,适应内容高度
- margin为auto时,为0
- 边框、内边距、百分比设置与常规流一样
3.4 盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时,会避开常规流块盒
- 常规流块盒在排列时,无视浮动盒子
- 行盒在排列时,会避开浮动盒子
- 如果文字没有在行盒中(在块盒中),浏览器会自动生成一个行盒包裹文字,该行盒叫匿名行盒
- 在浮动盒子里面不会发生外边距合并
3.5 浮动元素产生了浮动流
- 所有产生了浮动流的元素,块级元素看不到它们
- 产生了BFC的元素和文本类(行盒inline)元素以及文本都能看到浮动元素
3.6 高度坍塌
- 高度坍塌的根源:常规流盒子里面套着浮动盒子的时候,常规流盒子的自动高度,在计算时,不会考虑浮动盒子
- 清除浮动(解决浮动盒子不会撑开父元素常规盒子高度的问题)
- 在所有浮动盒子的最后面添加一个常规盒子,常规盒子内容可为空,然后设置css属性clear:
<!--伪元素选择器生成并选中最后一个子元素(匿名元素) --> .clearfix::after{ content:""; display:block; clear:both; height:0; visibility:hidden; } // - clear生效必须是块级元素才行。 //- 在所有浮动盒子下方添加一个常规盒子右两种方式: //直接添加。 //用浮动盒子的父元素的伪元素选择器生成并选中最后一个子元素(匿名元素)
属性 属性值 作用 clear: left 清除左浮动 right 清除右浮动 both 清除左、右浮动 none 不清除浮动(默认值)
3.7 浮动元素重叠的问题
- 浮动元素不会覆盖文字内容
- 浮动元素不会覆盖图片内容(因为图片本身也属于一种文本)
- 浮动元素不会覆盖表单元素
3.8 浮动的细节规则
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 多个浮动盒子的情况下,浮动盒子顶边不得高于上一个浮动盒子的顶边
- 若剩余空间无法放下浮动盒子,则该盒子向下移动,参考自己上一个盒子排列,顶部不高于上一个盒子底部
4. 定位布局
-
手动控制元素在包含块中的精准位置
-
涉及的CSS属性:position
属性 属性值 作用 position: static 默认值,静态定位(不定位) relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 配合条件变成固定定位,如:top:44px(距离顶部44px的时候,元素变成固定定位)有兼容性问题,适用移动端 -
一个元素,只要position的取值不是static,那么认为该元素是一个定位元素
-
定位元素会脱离文档流(相对定位除外)
-
文档流中的元素摆放时,会忽略脱离了文档流的元素
-
文档流中的元素计算自动高度时,会忽略脱离了文档流的元素
4.1 相对定位(relative)
- 不会导致元素脱离文档流,只是让元素在原来位置上进行偏移
- 可以通过四个CSS属性设置其位置,left从左向右偏移,right从右向左偏移,top从上向下偏移,bottom从下向上偏移
- 盒子的偏移不会对其它盒子造成任何的影响
- 设置的时候尽量避免上、下或左、右值同时出现,避免冲突。如果出现了冲突以上或以左为主
- 相对定位通常用来给绝对定位提供包含块
4.2 绝对定位(absolute)
- 宽高为默认值auto时,适应内容
- 包含块变化:找祖先中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为整个网页(初始化包含块)
- 绝对定位一般用来做重叠
- 绝对定位和浮动元素会被自动转换成块盒block
4.3 固定定位(fixed)
- 包含块固定为视口(浏览器的可视窗口)
- 其它情况和绝对定位完全一样
- 一般用来做网页弹出的广告,固定导航,回到顶部之类的
4.4 定位书写步骤
- position:相对、绝对、固定定位,先设置哪种定位
- left、right、top、bottom:10px,再来设置具体位置
4.5 定位下的居中(绝对、固定定位)
某个方向居中:
- 定宽高
- 将左右(上下)距离设置为0
- 将左右(上下)margin设置为auto
- 绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
4.6 多个定位元素重叠时
- 设置z-index,通常情况下该值越大,越靠近用户
- 只有定位元素设置z-index有效
- z-index可以是负数,如果是负数,在遇到常规流、浮动元素时,会被其覆盖
4.7 补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 定位没有外边距合并