CSS快速入门(3)定位布局、模拟盒子(盒模型)

定位布局

1.固定定位

相对于网页/可见视图进行固定

注意:顺序–上左下右
CSS快速入门(3)定位布局、模拟盒子(盒模型)

2.绝对定位

绝对路径与文档流无关,是相当于元素最近的已定位的祖先元素
CSS快速入门(3)定位布局、模拟盒子(盒模型)
z-index

谁的z-index值大,谁覆盖,谁在上面
CSS快速入门(3)定位布局、模拟盒子(盒模型)

3.相对定位

相对位置是对元素在文档中的初始位置(基准),通过设置水平和垂直,进行移动
CSS快速入门(3)定位布局、模拟盒子(盒模型)

模拟盒子(盒模型)

盒模型的构造

拿百度举例子,可以看到
CSS快速入门(3)定位布局、模拟盒子(盒模型)
解读,盒模型,起始就是对外边距内边距边框进行设置
CSS快速入门(3)定位布局、模拟盒子(盒模型)
实际操作:
CSS快速入门(3)定位布局、模拟盒子(盒模型)