盒子定位体系

Posted 2022-07-31 caoxiangwang

一、         基本概念

1. 视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局
2. 视觉格式化模型：是一套非常复杂的机制，包含错综复杂的CSS规范；本章的课程从实用的角度出发，仅学习在划分页面区域的时候需要的核心知识；由于划分页面区域时几乎都使用的是块盒，因此，本章仍然只涉及块盒
3. 多个盒子如何布局：HTML中的每个元素都会在页面中生成盒子；这些盒子如何排列、如何相互影响，由视觉格式化模型定义。
4. 主要受到两个因素的影响：元素的盒模形；元素的定位体系。

4.

二、视口

1. 视口：可视窗口，通常指浏览器的可视区域（视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关；当网页内容的尺寸超过视口尺寸时，浏览器会出现滚动条）
2. 包含块：每个元素都有一个包含块，它是指元素在页面中摆放的区域；通常情况下，元素的包含块是它父元素的内容盒（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	尽量撑满包含块	适应内容宽度

浮动盒子的位置：

1. 左浮动的盒子向上向左排列
2. 右浮动的盒子向上向右排列
3. 浮动盒子的顶边不得高于上一个盒子的顶边
4. 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能
5. 容纳盒子，然后再向左或向右移动

5.常规流遇上浮动：

常规流盒子和浮动盒子混合摆放

1. 1.        浮动盒子在摆放时，要避开常规流盒子
2. 2.        常规流盒子在摆放时，无视浮动盒子
3. 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