定位补充

视觉格式化模型（visual formatting model）：

CSS的一种机制，它规定了页面中的多个盒子如何布局

包含块（containing block）【html的包含块是初始化包含块initial containing block】

每个元素都有一个包含块，它是指元素在页面中摆放的区域通常情况下，元素的包含块是指它父元素

的内容盒（content box）【当前标签的定位体系发生变化时，就不一定是父元素】

 

视觉格式化模型规定，定位体系一共有三种：

• 常规流

• 浮动（Float）（浮动的初衷是用于文字环绕）

• 绝对定位

  每个元素必须在这三种里选择一种定位体系

  定位体系判断的步骤（第一步满足，第二部就不进行判断）

1.判定元素的position属性值是不是以下取值：absolute（绝对位置）.fixed（固定位置）如果是其中一个取值，则当前元素就属于“绝对定位”。（position默认值：static float默认值：none）

2.判定元素的float属性值是不是以下取值：left（左浮动）.right（右浮动）如果是其中一个取值，则当前元素就属于“浮动”。

3.常规流是以上都不属于的情况，就默认为常规流（默认情况下，元素通常为常规流定位）

盒模型中的尺寸

尺寸是包含尺寸的百分比

• margin padding width 的百分比：是包含块宽度的百分比

• height的百分比（很少使用）

  盒模型中的尺寸-auto

• 尺寸受到定位体系的影响

• 不同的定位体系，auto的值不同

  盒模型中的auto值-水平方向

  常规流盒子水平方向上的尺寸，必须等于包含块的宽度

  如果不行，则强行将margin-right设置为auto

auto值-垂直方向

margin为auto：0px

height为auto：适应内容高度

盒子的位置

• 盒子在包含块的垂直方向上依次摆放

• 垂直方向上，若两个外边距相邻，则进行合并（折叠）

• 外边距相邻：两个外边距之间没有内边距，边框，内容

• 相同值取一个

• 都是正值取最大

• 都是负数取最小

• 一正一负则相加

  浮动

  子级浮动，父元素高度塌陷

  清除浮动

  1.clear属性名 left right both

  clear：both

  2.缺点：需要在html写一个空标签

  解决方式：给父元素添加一个伪元素

   

属性	常规流	浮动
margin-left:auto	尽量撑满包含块	0px
margin-right:auto	尽量撑满包含块	0px
margin-top:auto	0px	0px
margin-bottom:auto	0px	0px
width:auto	尽量撑满包含块	适应内容宽度
height:auto	适应内容高度	适应内容宽度