CSS盒子模型 - 技术栈

写在前面

大家好，我是一溪风月🤖，一名前端工程师，在前端开发的世界里，CSS盒子模型是构建网页布局的核心概念之一。理解它，就像是掌握了拼图的规则，能让我们把网页元素精准地放置在合适的位置。今天，就让我们深入探索CSS盒子模型的奥秘。

一.认识HTML中的"盒子"

在日常生活中，盒子随处可见，它们有自己的尺寸、厚度和间距。在HTML里，每个元素也都可以看作是一个盒子。无论是一个按钮、一段文字，还是一张图片，都被这个"盒子"包裹着。这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成，它们共同决定了元素在页面上的呈现效果。

二.盒子模型的各个部分

内容------宽度和高度

设置内容的尺寸主要通过宽度（width）和高度（height）属性。比如，想要一个100像素宽、200像素高的盒子，可以这样写：

css 复制代码

.box {
  width: 100px;
  height: 200px;
}

需要注意的是，对于行内级非替换元素（像<span>标签内的文本），设置宽高是无效的。此外，还有最小宽度（min-width）、最大宽度（max-width）、最小高度（min-height）、最大高度（max-height）属性。在移动端适配时，最大宽度和最小宽度经常用于确保页面在不同屏幕尺寸下都能有良好的显示效果。

内边距------padding

内边距用于设置边框和内容之间的间距，它有四个方向：上内边距（padding-top）、右内边距（padding-right）、下内边距（padding-bottom）、左内边距（padding-left）。padding属性还可以简写，取值规则如下：

padding值的个数	padding例子	代表的含义
4	padding: 10px 20px 30px 40px;	top: 10px, right: 20px, bottom: 30px, left: 40px;
3	padding: 10px 20px 30px;	缺少left，left使用right的值
2	padding: 10px 20px;	缺少left，使用right的值；缺少bottom，使用top的值
1	padding: 10px;	top/right/bottom/left都使用10

边框------border

边框相对于其他部分特殊一些，它具备宽度（width）、样式（style）和颜色（color）。设置边框宽度可以用border-top-width、border-right-width、border-bottom-width、border-left-width，也可以用简写属性border-width。边框颜色和样式同理，有对应的属性和简写属性。

如果要同时设置某一边的宽度、样式和颜色，例如设置顶部边框，可以这样写：

css 复制代码

.box {
  border-top: 2px solid red;
}

border属性则可以统一设置四个方向的边框，编写顺序任意。

圆角------border-radius

border-radius用于设置盒子的圆角。常见的值有数值和百分比。数值通常用来设置小的圆角，如6px；百分比常用于设置一定的弧度或者圆形。比如，一个正方形元素，当border-radius大于或等于50%时，就会变成一个圆：

css 复制代码

.circle {
  width: 100px;
  height: 100px;
  background-color: #f00;
  border-radius: 50%;
  border: 5px solid #0f0;
}

border-radius还是一个缩写属性，它是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius的简写。

外边距------margin

外边距用于设置元素和元素之间的间距，同样有四个方向：margin-top、margin-right、margin-bottom、margin-left，也有对应的简写属性。简写属性取值规则和padding类似。这里有两个特殊的情况需要注意：上下外边距的传递和折叠。

传递：如果块级元素的顶部线和父元素的顶部线重叠，块级元素的margin-top值会传递给父元素；如果块级元素的底部线和父元素的底部线重叠，且父元素高度是auto，margin-bottom值会传递给父元素。可以通过给父元素设置padding-top/padding-bottom、设置边框或者触发BFC（设置overflow为auto）来防止传递问题。

折叠：垂直方向上相邻的两个margin（margin-top、margin-bottom）有可能会合并为一个margin，水平方向的margin不会折叠。折叠后最终值取两个值中较大的那个。防止margin折叠的方法是只设置其中一个元素的margin。

外轮廓------outline

outline表示元素的外轮廓，它不占用空间，默认显示在border的外面。相关属性有outline-width（外轮廓宽度）、outline-style（外轮廓样式，取值和border样式一样）、outline-color（外轮廓颜色），还有简写属性outline。比如，去除<a>元素、<input>元素的focus轮廓效果，可以这样写：

css 复制代码

a:focus, input:focus {
  outline: none;
}

盒子阴影和文字阴影

盒子阴影 ：box-shadow属性可以设置一个或多个阴影，每个阴影用<shadow>表示，多个阴影之间用逗号隔开。<shadow>的常见格式为inset? <length>{2,4} <color>? ，其中：

第1个<length>：offset-x，水平方向的偏移，正数往右偏移；

第2个<length>：offset-y，垂直方向的偏移，正数往下偏移；

第3个<length>：blur-radius，模糊半径；

第4个<length>：spread-radius，延伸半径；

<color>：阴影的颜色，如果没有设置，就跟随color属性的颜色；

inset：使外框阴影变成内框阴影。可以通过html-css-js.com/css/generat...这个网站测试盒子的阴影效果。

文字阴影 ：text-shadow用法类似于box-shadow，用于给文字添加阴影效果。它的<shadow-t>格式为[<length>{2,3} <color>?]，和box-shadow相比，它没有spread-radius的值。同样可以通过上述网站测试文字阴影效果。

三.box-sizing属性

box-sizing属性用来设置盒子模型中宽高的行为，有两个常见的值：content-box和border-box。

content-box ：这是默认值，padding和border都布置在width、height外边。此时元素的实际占用宽度为border + padding + width，实际占用高度为border + padding + height。

border-box ：padding和border都布置在width、height里边。元素的实际占用宽度等于width，实际占用高度等于height。

四.元素的水平居中方案

在网页布局中，元素水平居中是常见需求。

行内级元素（包括inline-block元素） ：在父元素中设置text-align: center ，子元素就能水平居中。

块级元素 ：设置margin: 0 auto，块级元素会在父元素中水平居中。

五.总结

这篇文章到这里就结束了🔚，CSS盒子模型看似复杂，但只要理解了各个部分的作用和相互关系，就能灵活运用它来打造出美观、布局合理的网页。从内容的尺寸控制，到内边距、边框、外边距的调整，再到阴影、圆角等效果的添加，每个细节都影响着页面的最终呈现。在实际开发中，不断练习和尝试，你会发现盒子模型的强大之处，它是前端开发者不可或缺的有力工具。希望这篇文章能帮助你更好地理解和掌握CSS盒子模型，在前端开发的道路上迈出更坚实的步伐。