1. 视觉格式化模型(布局规则)
- 盒模型为规定单个盒子的规则,视觉格式化模型(布局规则)
- 页面中的多个盒子排列规则,视觉格式化模型大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动
- 定位
2. 常规流布局
- 不同的名称为常规流、文档流、普通文档流、常规文档流
- 所有元素默认情况下,都属于常规流布局
- 总体规则:块盒独占一行,行盒水平依次排列
2.1 常规流盒子的包含块
- 包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域
- 绝大部分情况下:盒子的包含块为其父元素的内容盒
2.2 常规流块盒(宽度)
- auto:将剩余空间吸收掉
- 宽度为默认值auto时,每个块盒的总宽度,等于包含块的宽度
- margin取值也可以是auto,默认值0
- 当width和margin的值都为auto时,width吸收能力强于margin
- 若宽度、边框、内边距、外边距计算后、仍然有剩余空间,该剩余空间被margin-right全部吸收
- 在常规流中,块盒在其包含块中居中,可以定宽,然后左、右margin设置为auto
2.3 常规流块盒(高度)
- 每个块盒垂直方向上的auto值:适应内容高度,没有设置高度的情况下会根据内容的高度来决定高度
height:auto;
- margin:auto,margin垂直方向的auto表示0
2.4 百分比取值
- padding、宽、margin可以取值为百分比,相对于包含块的宽度(父元素盒子的宽度)
- 高度百分比:包含块高度不取决于子元素的高度的时候,百分比相对于父元素的高度
3. 浮动布局
3.1 浮动盒子的应用场景
- 文字环绕图片:把图片设置为浮动就可以了,设置图片的外边距可以和文字产生间隙。
- 横向排列
3.2 浮动的基本特点(float)
- 当一个元素浮动后,元素必定为块盒(自动更改display属性为block)
- 浮动元素的包含块,和常规流一样,为父元素的内容盒
属性 |
属性值 |
盒子排列 |
float: |
left |
左浮动,元素靠上靠左 |
right |
右浮动,元素靠上靠右 |
none |
表示不浮动,也就是常规流(默认值) |
3.3 浮动盒子的尺寸
- 宽度为auto时,适应内容宽度
- 高度为auto时,与常规流一致,适应内容高度
- margin为auto时,为0
- 边框、内边距、百分比设置与常规流一样
3.4 盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时,会避开常规流块盒
- 常规流块盒在排列时,无视浮动盒子
- 行盒在排列时,会避开浮动盒子
- 如果文字没有在行盒中(在块盒中),浏览器会自动生成一个行盒包裹文字,该行盒叫匿名行盒
- 在浮动盒子里面不会发生外边距合并
3.5 浮动元素产生了浮动流
- 所有产生了浮动流的元素,块级元素看不到它们
- 产生了BFC的元素和文本类(行盒inline)元素以及文本都能看到浮动元素
3.6 高度坍塌
- 高度坍塌的根源:常规流盒子里面套着浮动盒子的时候,常规流盒子的自动高度,在计算时,不会考虑浮动盒子
- 清除浮动(解决浮动盒子不会撑开父元素常规盒子高度的问题)
- 在所有浮动盒子的最后面添加一个常规盒子,常规盒子内容可为空,然后设置css属性clear:
属性 |
属性值 |
作用 |
clear: |
left |
清除左浮动 |
right |
清除右浮动 |
both |
清除左、右浮动 |
none |
不清除浮动(默认值) |
- clear生效必须是块级元素才行。
- 在所有浮动盒子下方添加一个常规盒子右两种方式:
直接添加。
用浮动盒子的父元素的伪元素选择器生成并选中最后一个子元素(匿名元素)
<!--伪元素选择器生成并选中最后一个子元素(匿名元素) -->.clearfix::after{content:\"\";display:block;clear:both;height:0;visibility:hidden;}
3.7 浮动元素重叠的问题
- 浮动元素不会覆盖文字内容
- 浮动元素不会覆盖图片内容(因为图片本身也属于一种文本)
- 浮动元素不会覆盖表单元素
4. 定位布局
手动控制元素在包含块中的精准位置,涉及的CSS属性:position
属性 |
属性值 |
作用 |
position: |
static |
默认值,静态定位(不定位) |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
- 一个元素,只要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 补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 定位没有外边距合并