【Day06】请画出 Css 盒模型,基于盒模型的原理,说明相对定位、绝对定位、浮动实现样式是如何实现的?

一、Css 盒模型

页面上任何一个元素,我们都可以看成是一个盒子,盒子会占用一定的空间和位置,他们之间相互制约,就形成了网页的布局。

w3c 的盒模型的构成:content border padding margin

IE盒模型和标准盒模型

IE盒模型和标准盒模型唯一的区别是内容计算方式的不同

  • IE 盒模型,宽度:width = content + padding

    在这里插入图片描述

  • 标准盒模型,宽度:width = content

    在这里插入图片描述

不同定位

一、相对定位

relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置,通过 topbottomleftright 定位,并且可以通过 z-index 进行层次分级。

二、绝对定位

absolute(绝对定位) 脱离文档流,通过 topbottomleftright 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute 元素将以 body 坐标原点进行定位,可以通过 z-index 进行层次分级。

三、浮动

脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

猜你喜欢

转载自blog.csdn.net/zimeng303/article/details/113738160
今日推荐