Web基础(从零开始)——CSS盒子模型详解（边框，圆角边框，内边距，导航栏，外边距，父元素塌陷问题，盒子阴影）

本文链接：https://blog.youkuaiyun.com/qq_57633498/article/details/121305841

本文介绍了HTML/CSS中的关键布局属性，如边框border（包括样式和颜色）、内边距padding（设置内容与边框距离）、外边距margin（控制元素间距）和盒阴影box-shadow（创建视觉效果）。实例演示了如何优雅地控制元素样式和布局一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.边框（border）：边框有三部分组成边框宽度、边框样式、边框颜色

border-width(边框粗细):6px; || border-style(边框样式):solid(实线边框) | dashed(虚线边框) |dotted(点线) || border-color(边框颜色)

以上属性可以简写：border:1px solid red;（没有顺序）

边框可以分开写：

div {
            height: 200px;
            width: 100px;
            border-top: 10px solid red;
            border-bottom: 10px solid yellow;
            border-left: 10px solid red;
            border-right: 10px solid yellow;
        }

也可混合写，但一定要先写全局的border再写上下左右，因为根据就近原则，border属性写在后面会覆盖前面的属性：

div {
            height: 200px;
            width: 100px;
            border: 10px solid red;
            border-top: 10px dashed blue;
        }

表格单元格边框：border-collapse:collapse;合并相邻单元格的边框

注：边框会影响盒子的大小：我们所设定的宽高实际从盒子的内部开始测量

宽高都为100px大小，边框为40px的盒子，白色部分的长宽为100px，为盒子的大小，外面红色部分为盒子的边框，不算在100px里

圆角边框：border-radius: 10px;

也可以设置成圆形的：将半径设置为一半或者50%：border-radius: 50%;

圆角边框可以实现很多包括圆，圆角矩形，也可以分别设置四个角的弧度等，可以自己试试

2.内边距(padding)：用于设置内边距，即边框与内容之间的距离

例如：默认内边距为0，,内容会顶着盒子写

如果加上一个内边距：内容和盒子间会有距离，会更美观，包括左边距，右边距，上边距，下边距，可以用padding指定上下左右边距。

div {
            height: 150px;
            width: 150px;
            border: 10px solid red;
            padding: 5px;
        }

padding属性有四种写法：

padding:5px;//上下左右内边距都是5px;

padding:5px 10px;//上下内边距为5px,左右内边距为10px;

padding:5px 10px 15px;//上内边距为5px，左右内边距为10px，下内边距为15px；

padding:5px 10px 15px 20px;//上内边距为5px，右内边距为10px，下内边距为15px，左是20px（顺时针）；

可以分别设置：padding-left:; || padding-top: ; || padding-bottom: ; || padding-right: ;

注：我们设定的宽度和高度是盒子里可以写内容的大小，如果加上一个内边距会将盒子撑大

例如：我们设置宽高都是100px的盒子，但是加上一个内边距为10px，盒子大小就变成了宽高都是120px，但实际写内容的部分大小还是100px，只是上下左右都加上了10px的边距。

即盒子大小=自己设置的长(宽)+内边距(边框)

假设我们只想设置一个200x200的盒子，但是想要设置10的内边距，可以修改宽高为180x180，加上10的内边距，这样整个盒子的大小就是200x200了。

应用：如果一个导航栏每个字数不一样多，但是想要设置间距相同，可以使用padding，使导航栏看上去规整。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 41px;
            width: 100%;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
        }
        
        a {
            display: inline-block;
            height: 41px;
            line-height: 45px;
            font-size: 15px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0 20px;
        }
        
        a:hover {
            color: maroon;
            background-color: oldlace;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">首页推荐</a>
        <a href="#">购物车</a>
        <a href="#">订单</a>
        <a href="#">我的</a>
    </div>
</body>

</html>

3.外边距(margin)：用于设置外边距，即盒子与盒子之间的距离。

可上下左右分别设置：margin-left: ; || margin-right: ; || margin-top: ; || margin-bottom: ;

margin有四种写法（和padding写法一致）

应用：

使块级大盒子水平居中：1.盒子必须指定了宽度；2.盒子的左右外边距设置为auto

常见写法：1.margin-left:auto;margin-right:auto;

2.margin:auto;

3.margin:0 auto;

父元素塌陷问题：嵌套关系时，若父元素和子元素上都有外边距，则父元素会塌陷较大外边距，子元素不会相对父元素有外边距。

解决方法：1.为父元素加上上边框(可以设置为透明的)：border: 1px solid transparent;

2.为父元素定义上内边距：padding:1px;

3.为父元素添加overflow: hidden;

注：很多元素自带默认外边距，布局前，先清除一些内外边距

        * {
            padding: 0;
            margin: 0;
        }

行内元素为了兼容性，尽量只设置左右内外边距，不设置上下内外边距。

块级元素和行内元素可以。

4.盒子阴影(box-shadow)：box-shadow包括两个必须属性（水平阴影位置，垂直阴影位置），几个可选项（迷糊距离（虚的还是实的）、阴影尺寸（影子大小）、阴影颜色（一般设置为半透明色rgba()）、将外部阴影（默认为外阴影，outset不能写,会导致阴影无效）转化为内部阴影（inset））

例：box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);