视觉格式化模型
视觉格式化模型:
CSS的一种机制,它规定了页面中的多个盒子如何布局
视口(viewport)
包含块
每个元素都有一个包含块,它是指元素在页面中摆放的区域通常情况下,元素的包含块是它父元素的内容盒(content-box)
注 :当标签的定位体系发生变化时,包含块不一定是它的父元素。
HTML的包含块是初始化包含块(initial containing block)
什么是定位体系:
视觉格式化模型规定,定位体系一共有三种
常规流(normal flow)
浮动(float)
绝对定位(absolute positioned)
任何一个元素,必须属于其中一种定位体系,不同的定位体系中,元素在包含块中的尺寸和位置会有一些差异
定位体系判断的步骤(如果第一步满足就不再进行第二步)
1、判定元素的position属性值是不是以下的取值
absolute(绝对位置)
fixed(固定位置)
如果是其中某一个取值,则当前元素就属于“绝对定位”
position默认值是static
2、判定元素的float属性值是不是以下的取值
left(左浮动)
right(右浮动)
如果是其中某一个取值,则当前元素就属于“浮动”
float默认值none
盒模型中的尺寸-%
尺寸是包含块尺寸的百分比
margin,padding,width的百分比;是包含块宽度的百分比
height的百分比(很少用)
margin:px、em、%、auto
border:px 、em
padding:px、em 、%
content:px、em、%、auto
em、px 取设置的值
%:根据包含块的尺寸计算
auto:按照不同定位体系的规则计算
盒模型中的auto值
盒模型中的auto值-水平方向
常规流盒子水平方向上的尺寸,必须等于包含块的宽度
如果不行,则强行将margin-right设置为auto
盒模型中的auto值-垂直方向
margin为auto:0px
height为auto;适用内容的高度
盒子位置
盒子在包含块的垂直方向上依次摆放
依次摆放:按照HTML元素书写顺序从上往下摆放。
垂直方向上,若两个外边距相邻,则进行合并(折叠)
垂直方向:水平方向不会合并
外边距相邻:两个外边距没有padding,content,border
外边距合并规则
1、相同值取一个
2、都是正值取最大
3、都是负值取最小
4、一正一负则相加
盒模型中的auto值
属性 | 常规流 | 浮动(float)&绝对定位 |
---|---|---|
margin-left:auto | 尽量撑满包含块 | 0px |
margin-right:auto | 尽量撑满包含块 | 0px |
margin-top:auto | 0px | 0px |
margin-bottom:auto | 0px | 0px |
width:auto | 尽量撑满包含块 | 适应内容宽度 |
height:auto | 适应内容高度 | 适应内容高度 |
浮动(float)
当元素float属性取值为left或者right时,元素属于浮动定位
注:浮动的初衷是为了实现文字环绕
子级浮动父级元素高度塌陷
盒子位置
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间容纳盒子,然后向左向右移动
清除浮动(clear)
1 clear属性名
属性值:
left (清除左浮动)
right (清除右浮动)
both(清除全部浮动)
缺点:需要在HTML中写一个空标签
解决方式:给父元素添加伪元素
常规流遇上浮动
- 常规流盒子和浮动盒子混合摆放
1、浮动盒子在摆放时,要避开常规流盒子(常规流在前浮动元素在后)
2、常规流盒子在摆放时,无视浮动盒子(浮动盒子在前常规流在后)
解决高度塌陷
1、在父元素里添加overflow:hidden;
2、在父元素里加一个块盒,然后在那个块盒里添加:clear:both;
清除浮动(clear)
不可继承
默认值none
both清楚全部浮动(对最后一个子元素使用该值,可以防止父元素高度塌陷)
对一个元素清除浮动,可以让该元素在摆放时,出现在浮动元素的下方
绝对定位
盒子的相对位置
-
当position的属性值为relative时启用相对位置
相对定位元素的位置
可以通过left、top、right、bottom来设置
绝对定位
-
当浮动元素被设置成绝对定位时
属于绝对定位,float属性会被强制设置成none
-
绝对定位元素对其他元素的影响
绝对定位元素不会对其他元素造成任何影响
-
绝对定位元素的位置
可以通过left、top、right、bottom来设置
-
绝对定位元素的包含块
固定位置,包含块:视口
当设置成position:fixed时
它的起始位置就会变成视口的左上角
使用场景
pc端页面头部
移动端:footer
共用场景:
1、广告(AP)
2、侧边栏
3、目录
4、回到顶部
5、即使通讯
绝对位置
当position的属性值为absolute时为绝对位置
-
绝对位置寻找包含块:
包含我,离我最近元素的position值不等于static(默认值)
使用场景
两个及以上标签需要重叠在一起的时候
堆叠级别(z-index)
无法继承
使用范围:相对(relative) 绝对(absolute) 固定位置(fixed)
默认值为0
取值范围:正 负值都可以(数值越大越靠上,数值越小越靠下)
属性 | 常规流 | 浮动(float)&绝对定位 |
---|---|---|
margin-left:auto | 尽量撑满包含块 | 0px |
margin-right:auto | 尽量撑满包含块 | 0px |
margin-top:auto | 0px | 0px |
margin-bottom:auto | 0px | 0px |
width:auto | 尽量撑满包含块 | 适应内容宽度 |
height:auto | 适应内容高度 | 适应内容高度 |