【DIV 盒子模型】

最新推荐文章于 2024-07-21 00:15:00 发布

原创最新推荐文章于 2024-07-21 00:15:00 发布 · 3.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#机器学习 #python #数据挖掘

本文详细介绍了CSS中的盒子模型，包括内容区域、边框、内边距和外边距的概念和使用方法。通过实例展示了边框简写、内边距和外边距的设置，以及如何实现盒子居中。此外，还探讨了盒子模型的塌陷和击穿问题，提供了避免这些问题的解决方案。

一、盒子模型

1、什么是盒子模型

进行网页布局的重要属性，一个页面由可以由多个盒子组成。

盒子的组成：内容区域+边框(border)+内边距（padding）+外边距(margin)

2、border边框

Border边框基本属性
boder-style	边框样式
boder-color	边框颜色
border-width	边框宽度
border-collapse	边框合并
border-radius	边框弧度
border-方向	设置某一边的边框

border在使用是可以用boder：宽度边框样式边框宽度这样简写的的方式来同时设置，例如：border：1px solid black；表示边框宽度为1，样式为实线，边框颜色为黑色。

3、padding内边距属性

Padding内边距
padding：10px;	指padding所有方向内边距加10px
padding：7px 10px；	指padding上下内边距加10px，左右加7px
padding： 7px 9px 10px 11px；	指padding上下左右内边距分别为7px、9px 10px、11px
padding-方向	设置某一边的内边距

padding可在不设置任何方向时，则上下左右四个方向内边距一致，如需要单独设置某个方向的内边距则使用padding-方向，例如：padding-left：10px；表示左内边距为10px。

4、margin外边距

margin是一个盒子的外边距，也是一个盒子和另一个盒子之间的区域。margin控制的是元素外部空出的空间。而相反，上面提到的padding 则是控制内部空出的空间。

margin和padding设置类似，但相比较于边框和内边距最大的不同是，它可以使一个盒子居中，只需要将margin值设为auto即可，但在设置margin：auto时必须设置盒子的宽度，否则将无效。

例如：

   <style>
         div{
             width: 500px;
             height: 500px;
             font-size: 30px;
             background-color: red;
             margin: auto;
         }
     </style>
<body>
    <div>
        利物浦
    </div>

效果如图：

而当把width取消后则是这样的

这是因为当盒子没设置宽度时盒子默认是铺满整行的，所以当设置margin：auto时，就会出现好像值无效，但其实它确实居中了，只不过因为盒子宽度过宽，导致我们看着像是无效。所以在设置时必须要设置宽度。

5、盒子的塌陷和击穿问题

5.1、盒子的塌陷

当上下两个兄弟盒子都设置了margin值，例如A盒子设置了margin-bottom：80px，而B盒子设置了margin-top：100px时，这时这两个盒子之间的外边距不是我们想象中的并不是两个盒子上下边距之和：80px+180px=180px，而是取两者中的较大值100px，这种情况被称为盒子的塌陷问题，这时解决办法就是，只在两个盒子的一方设置就可以解决这样的问题。

例如:

可以看到我在红盒子和蓝盒子上都设置了margin，但我们看到生效的只有红盒子的margin-bottom，蓝盒子的margin-top并没有生成，这时就产生我们说的塌陷问题，所以这时我们就需要删掉某一个盒子的margin来解决这个问题。

例如：

当我将蓝盒子盒子的margin删掉，将红盒子的margin-bottom设置为150px时，我们可以看到此时并没有出现塌陷问题，外边距距离就为150px。

2、盒子击穿

当两个嵌套在一起（父子关系）的盒子产，此时父与子都有外边距，但当在设置子元素的外边距是，会发现子元素并没有生成设置的外边距，而是父元素的外边距发生了变化，例如：

看图可以看到，我只对嵌套在红盒子里的蓝盒子设置了外边距，结果这个50px的margin-top却最终却作用在了红盒子上，这就是所谓的margin击穿。而如何解决这个问题呢？现在主要采用两种方式来解决（不知道还有没有别的方式，欢迎大家补充），一种是给父元素也就是红盒子加border,另一种就是给父元素设置padding,这两种方式都可以解决问题。例如：