CSS盒模型使用技巧及相关问题

末蓝、 2023-10-08 22:58 23阅读 0赞

盒模型使用技巧及相关问题

margin相关技巧

1、设置元素水平居中： margin:x auto;2、margin负值让元素位移及边框合并

理解练习

1、制作一个600\*100的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。

2、制作下面的菜单效果：

![ff5a170febefaf2fc5bfda07100d4d30.png][]

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性2、设置一边的外边距，一般设置margin-top3、将元素浮动或者定位

理解练习

使用div标签制作如下布局:

![ad265718bce4c380ec47a00a3d7b30e6.png][]

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框2、外部盒子设置 overflow:hidden3、使用伪元素类：

.clearfix:before\{ content: ''; display:table; \}

理解练习

分别使用margin间距和padding间距制作下面的例子：

![de94ad294dd9eca5c02d66decd189554.png][]

盒模型的实际尺寸

按照下面代码制作页面：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子的真实尺寸</title> <style type="text/css"> .box01\{width:50px;height:50px;background-color:gold;\} .box02\{width:50px;height:50px;background-color:gold;border:50px solid \#000\} .box03\{width:50px;height:50px;background-color:gold;border:50px solid \#000;padding: 50px;\} </style> </head> <body> <div>1</div> <br /> <div>2</div> <br /> <div>3</div> </body> </html>

页面显示效果如下：

![c5cc716495b503a3eea7cd55bb1f02b7.png][]

通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

盒子宽度=width+padding左右+border左右

盒子高度=height+padding上下+border上下

理解练习

通过盒子模型的原理，制作下面的盒子：

![3d3addef1b50bc75ad840a6298d6fef3.png][]

[ff5a170febefaf2fc5bfda07100d4d30.png]: https://img-blog.csdnimg.cn/img_convert/ff5a170febefaf2fc5bfda07100d4d30.png
[ad265718bce4c380ec47a00a3d7b30e6.png]: https://img-blog.csdnimg.cn/img_convert/ad265718bce4c380ec47a00a3d7b30e6.png
[de94ad294dd9eca5c02d66decd189554.png]: https://img-blog.csdnimg.cn/img_convert/de94ad294dd9eca5c02d66decd189554.png
[c5cc716495b503a3eea7cd55bb1f02b7.png]: https://img-blog.csdnimg.cn/img_convert/c5cc716495b503a3eea7cd55bb1f02b7.png
[3d3addef1b50bc75ad840a6298d6fef3.png]: https://img-blog.csdnimg.cn/img_convert/3d3addef1b50bc75ad840a6298d6fef3.png