盒子模型笔记整理

盒子模型

1.盒子模型概述

​ 如图，盒子模型包括中间黄色区域的内容，内边距（padding），边框（border），外边距（margin）。

具体内容：

• 内容 - 盒的内容，其中显示文本和图像。
• 内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
• 边框 - 围绕内边距和内容的边框。
• 外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。

2.宽度和高度

<height> 和 <width> 可以设置元素的高和宽。

可以设置以下的值:

1. auto - 浏览器计算高度和宽度（默认）
2. length - 以 px、cm 等定义高度/宽度
3. % - 以包含块的百分比定义高度/宽度

例：

div{
            width: 200px;
            height: 100px;
            background-color: chocolate;
        }

效果：

3.内边距

padding 可以在任何定义的边界内的元素内容周围生成空间。

可以为元素的每一侧指定内边距的属性：

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

所有内边距属性都可以设置以下值：

1. length - 以 px、pt、cm 等单位指定内边距
2. % - 指定以包含元素宽度的百分比计的内边距

例：

div {
            width: 200px;
            height: 100px;
            background-color: chocolate;
            padding-top: 50px;
            padding-right: 30px;
            padding-bottom: 10px;
            padding-left: 80px;
            color: white;

        }

3.1标准盒模型（w3c盒子模型）

上图的w3c盒子模型范围包括margin、border、padding、content，但content部分不包含其他部分。

3.2IE盒模型（怪异盒子模型）

上图的怪异盒模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的 content部分包含了padding和border。

🚨使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

例：

div {
            width: 300px;
            padding: 50px;
            box-sizing: border-box;
            color: white;
            background-color: blue;

        }

效果：

4.边框

border属性可以设置元素边框的样式、宽度、颜色。

例：

div {
            width: 300px;
            height: 300px;
            /* 左边边框颜色为红色，3px为边框的宽度 */
            border-left: 3px solid red;
            /* 上边的边框颜色为蓝色 */
            border-top:3px solid blue;
            /* 右边的边框颜色为绿色 */
            border-right: 3px solid green;
            /* 下边的边框颜色为黄色 */
            border-bottom: 3px solid yellow;
        }

效果：

4.1边框类型

border-style 指定要显示的边框类型。

例：

p.dotted {
            /* 点状边框 */
            border-style: dotted;
        }
        p.dashed {
            /* 虚线边框 */
            border-style: dashed;
        }

        p.solid {
            /* 实线边框 */
            border-style: solid;
        }

        p.double {
            /* 双线边框 */
            border-style: double;
        }

        p.none {
            /* 无边框 */
            border-style: none;
        }

        p.mix {
            /* 混合边框 */
            border-style: dotted dashed solid double;
        }

这个作者很懒很懒。效果图就不一一呈现了。

4.2边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick 。

p{
  border-style: solid;
  border-width: 5px;
}

4.3边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

• name - 指定颜色名，比如 “red”
• HEX - 指定十六进制值，比如 “#ff0000”
• RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
• HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
• transparent

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

p{
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

5外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

所有外边距属性都可以设置以下值：

1. auto - 浏览器来计算外边距
2. length - 以 px、pt、cm 等单位指定外边距
3. % - 指定以包含元素宽度的百分比计的外边距

例：

.div2{
            color: white;
            background-color: blue;
            display: inline-block;
            margin-top: 100px;
            margin-bottom: 50px;
            margin-right: 150px;
            margin-left: 80px;
        }

效果：

6.外边距合并（重点）

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

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下 图：

只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距不会合并。

7. BFC——块级格式化上下格式

将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。

7.1实现BFC属性的方法

1. 浮动元素，float 除 none 以外的值
2. 定位元素，position的值不是static或者relative。
3. display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、 table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inlinegrid
4. overflow 除了 visible 以外的值（hidden，auto，scroll）
5. 根元素`` 就是一个 BFC

7.2BFC的作业

7.2.1避免外边距重叠（防止margin塌陷）

margin塌陷的意思：同时给两个div设置相同的属性，当设置margin为100px，那么两个div之间的间隙应该是marginbottom+margin-top=200px的外边距，但是没有设置BFC属性，块的上外边距和下外边距会合并为单个边距，取最大值，如果 margin相等，则仅为一个，这就是外边距重叠（margin塌陷）。

没有设置BFC时两个div之间的外边距

通过给其中一个div包裹一个父div，设置BFC属性，来解决margin塌陷的问题

<style>
/* 通过设置overflow:hidden属性，将父容器设置为BFC属性 */
.container {
overflow: hidden;
}
.cube {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 100px;
}
</style>
</head>
<body>
<!-- 外边距重叠 -->
<div class="container">
<div class="cube"></div>
</div>
<div class="cube"></div>
</body>

7.2.2用于清除浮动

当给一个父元素设置边框，内部元素会将父元素撑起来，但是如果内部元素设置了 float属性，则该父元素会失去支撑，从而没有 高度。 设置了浮动属性的子元素，父元素失去支撑

<style>
    /* overflow: hidden;设置该属性，将父元素设置了BFC属性，即实现了清除浮动 */
    .parent {
    border: 10px solid blue;
    overflow: hidden;
    }
    .child {
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    float: left;
    }
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="child"></div>
    </div>
    </body>

运行结果：

7.2.3阻止元素被浮动元素覆盖

当前一个兄弟元素设置了浮动属性时，后一个兄弟元素会跑到前一个兄弟元素的位置去，从而后一个兄弟元素被覆盖。 第二个兄弟元素被覆盖的情况。

通过给被影响的兄弟元素设置BFC属性，来解决被覆盖的情况

<style>
    .cube1 {
        width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/* 通过给被影响元素设置overflow: hidden;属性，将其设置BFC属性，实现阻止被浮动元素影响 */
.cube2 {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
</style>
</head>
<body>
<div class="cube1"></div>
<div class="cube2"></div>
</body>

8.解决外边距塌陷

满足以下条件就会产生外边距塌陷现象：

1. 子元素在父元素里面
2. 子元素中有margin-top或者margin-bottom值

解决方案：

• 第一种：给父元素增加内边距padding值
• 第二种方式：父元素增加边框border值
• 第三种方式：父元素增加overflow：hidden
• 第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以
• 第五种：将父元素转变为行内块元素，display：inline-block
• 第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位
• 第七种：给父盒子增加flex或者inline-flex