CSS2.1——定位&&盒模型

包含块

以下内容翻译自CSS 2.1官方文档。网址：https://www.w3.org/TR/CSS2/visudet.html#strut

image.png

定位参照于谁

1. 没有定位：包含块
2. 相对定位：元素本来的位置
3. 绝对定位：包含块

• 如果最近的祖先元素中存在定位元素，则这个定位元素就是包含块
• 如果没有，包含块为初始包含块

4. 固定定位：视口

初始包含块

是一个视窗大小的矩形，不等于视窗

默认值

1. left top right bottom width height默认值为auto
2. margin padding默认值 0
3. boder-width 中等大小
   如果不存在border-style

百分比参照于谁

1. width margin padding:包含块的width
   height:包含块的height

2. left：包含块的width
   top：包含块的height

3. translate(-50%,-50%) 百分比参照于自身的宽高

4. background-position 百分比参照于（图片区域-图片的位图像素值）

浮动

浮动可以提升层级，提升半层
只有在考虑浮动的时候可以这样理解：一个元素可以分为两层：上层为文字；下层为盒模型
定位提升一层