盒子定位体系
一、 基本概念
- 视觉格式化模型(visual formatting model):CSS的一种机制,它规定了页面中的多个盒子如何布局
- 视觉格式化模型:是一套非常复杂的机制,包含错综复杂的CSS规范;本章的课程从实用的角度出发,仅学习在划分页面区域的时候需要的核心知识;由于划分页面区域时几乎都使用的是块盒,因此,本章仍然只涉及块盒
- 多个盒子如何布局:HTML中的每个元素都会在页面中生成盒子;这些盒子如何排列、如何相互影响,由视觉格式化模型定义。
- 主要受到两个因素的影响:元素的盒模形;元素的定位体系。
4.
二、视口
- 视口:可视窗口,通常指浏览器的可视区域(视口的尺寸仅受到浏览器可视窗口大小的影响,和内容无关;当网页内容的尺寸超过视口尺寸时,浏览器会出现滚动条)
- 包含块:每个元素都有一个包含块,它是指元素在页面中摆放的区域;通常情况下,元素的包含块是它父元素的内容盒(content-box);根元素的包含块是初始化包含块(initial containing block)。
2.
三、定位体系概述
三、1、视觉格式化模型规定,定位体系一共有三种:常规流(normal flow);浮动(float);绝对定位(absolute positioned)
2、任何一个元素,必须属于其中一种定位体系;不同的定位体系中,元素在包含块中的尺寸和位置会有一些差异。
定位体系判断:
四、 盒模型和定位体系
盒模型=盒子尺子 定位体系=盒子位置
定位体系影响盒模型。
和模型中的尺寸:margin:px、em、%、auto。
Border:px、em。
Padding:px、em、%、auto。
Width:px、em、%、auto。
Height:px、em、%、auto。
尺寸为设定的值,与定位体系无关。
尺寸是包含块尺寸的百分比:margin、padding、width的百分比:是包含块宽度的百分比:height的百分比很少用。
模型中的尺寸-auto:尺寸受到定位体系的影响,不同的定位体系,auto的计算规则不一样
五、 常规流
常规流:又叫做普通流、文档流、普通文档流;常规流是最常见的定位体系,所有元素默认状态下都是常规流定位
常规流盒子水平方向上的尺寸,必须等于包含块的宽度
水平方向:常规流盒子水平方向上的尺寸,必须等于包含块的宽度;如果不行,则强行将margin-right设置为auto
盒子位置:盒子在包含块的垂直方向上依次摆放:依次摆放:按照HTML元素的书写顺序从上到下摆放;盒子在包含块中占据的尺寸是整个盒子的尺寸
垂直方向上,若两个外边距相邻,则进行合并(折叠)
垂直方向:水平方向上的外边距不会合并
外边距相邻:两个外边距之间没有border、padding和content
合并:均为正数取最大,均为负数取最小,一正一负则相加
六、 浮动
当元素的float属性取值为left或right时,元素属于浮动定位,浮动不可继承;默认值none;left左浮动;right右浮动。
属性 |
常规流 |
浮动 |
Margin-left:auto |
尽量撑满包含块 |
0px |
Margin-right:auto |
尽量撑满包含块 |
0px |
Margin-top:auto |
0px |
0px |
Margin-bottom:auto |
0px |
0px |
Width:auto |
尽量撑满包含块 |
适应内容宽度 |
Height:auto |
尽量撑满包含块 |
适应内容宽度 |
浮动盒子的位置:
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能
- 容纳盒子,然后再向左或向右移动
5.常规流遇上浮动:
常规流盒子和浮动盒子混合摆放
- 1. 浮动盒子在摆放时,要避开常规流盒子
- 2. 常规流盒子在摆放时,无视浮动盒子
- 3. 常规流盒子的自动高度计算时,无视浮动盒子 —— 高度坍塌
3.
清除浮动
对一个元素清除浮动,可以让该元素在摆放时,出现在浮动元素的下方
对最后一个子元素使用clear:both,可防止父元素高度坍塌
Clear:不可继承;默认值none
取值:none不清除浮动;
Left:清除左浮动,元素在左浮动的盒子下方摆放
right:清除右浮动,元素在右浮动的盒子下方摆放
both:清除左右浮动,元素在浮动的盒子下方摆放
盒子的相对位置:
相对位置,是指相对于盒子在原本定位体系下的位置
将盒子的position属性设置为relative,以启用相对位置
Position:不可继承,默认值static;
取值:static:静态位置,盒子在原本定位体系下的位置
relation:相对位置,盒子相对于原本的位置进行偏移
absolute:绝对位置
fixed:固定位置
Position:relation:可通过left、top、right、bottom设置偏移量
当浮动元素被设置为绝对定位:
某个元素:float:left; position:absolute; 元素只能属于一种定位体系
如果元素被设置为绝对定位,float属性会被强制设置为none
绝对定位元素不会对其他任何元素造成任何影响
可通过left、top、right、bottom来设置
绝对定位元素的包含块
通常情况下,元素的包含块是它父元素的内容盒(content-box)
绝对定位元素除外
绝对定位中,盒子的位置由left、top、right、bottom四个属性决定;它们表示盒子离包含块边缘的距离
属性 |
浮动 |
margin-left:auto
|
0px
|
margin-right:auto
|
0px
|
margin-top:auto
|
0px
|
margin-bottom:auto
|
0px
|
width:auto
|
适应内容宽度
|
height:auto
|
适应内容宽度
|
少部分情况下,盒子中auto值需要适应盒子的位置
堆叠级别:它决定了元素谁显示在前谁显示在后;通常情况下,堆叠级别越高,显示越靠前;通过z-index属性可设置元素的堆叠级别;
z-index;不可继承;默认值auto;
取值:auto:自动,通常情况下,书写顺序靠后的元素靠前显示
数值:手动设置堆叠级别,堆叠级别高的元素靠前显示
使用z-index属性时需要注意的:不要用于静态位置的元素;尽量不要使用z-index