深入理解CSS显示模式与盒子模型

小宁爱Python2025-05-01 20:48

一、CSS显示模式：元素的"性格"决定布局

1. 显示模式基础

CSS显示模式（display属性）决定了元素在页面中的排列方式和尺寸表现。常见的显示模式有三大类型：

2. 块级元素（Block）

  • 特点：独占一行，可设置宽高，默认宽度撑满父容器
  • 常见标签： iv、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
  • 使用场景：构建页面结构、容器元素

3. 行内元素（Inline）

  • 特点：水平排列（一行可以排列多个），不可设置宽高，内容决定宽度
  • 常见标签：a、span 、b、u、i、s、strong、ins、em、del
  • 注意事项 ：设置margin/padding时垂直方向无效，由于不可以设置宽高，所以这种显示模式我们使用的很少，实际应用中，我们通常会吧行内元素转换为其他的显示模式

4. 行内块元素（Inline-block）

  • 混合特性：水平排列（一行可以排列多个），可设置宽高
  • 典型应用：导航按钮、图标排列
  • **常见标签：**img，input、textarea、button、select
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: red;
        }
        div{
            background-color:blue;
        }
        span{
            /* 行内元素设置宽高不会生效 */
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        img{
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- 块级元素
        1.独占⼀⾏（⼀⾏只能显示⼀个）   
        2. 宽度默认是⽗元素的宽度，⾼度默认由内容撑开
        3. 可以设置宽⾼ -->
     <div class="div1">div 标签1</div>
     <div class="div2">div 标签2</div>   
    <!-- 行内元素 
      1. ⼀⾏可以显示多个
      2. 宽度和⾼度默认由内容撑开
      3. 不可以设置宽⾼-->
      <span>1、span是行内元素</span>
      <span>2、span是行内元素</span>
    <!-- 行内块元素
     1. ⼀⾏可以显示多个
     2. 可以设置宽⾼ -->
     <img src="./images/haimian-baby.jpg" alt="">
     <img src="./images/haimian-baby.jpg" alt="">
</body>
</html>

运行结果：

5. 显示模式切换

讲到这里可能有很多小伙伴会想到，如果我们我们有几个div盒子硬是需要我们在一行排列，或者有几个超链接a标签需要设置对应的宽度和高度，那么我们怎么解决这个问题呢？这个时候就需要使用到我们的显示模式的切换了，这里的要注意的是，三种显示模式之间都可以通过display这个属性进行切换，

|--------------|----------|
| block | 转换为块级元素 |
| inline | 转换为行内元素 |
| inline-block | 转换为行内块元素 |

实例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换显示模式</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 行内块元素 */
            display: inline-block;
            /* 行内元素工作中不常用，不能设置宽高 */
            /* display: inline; */
        }
        .div1{
            background-color: red;
        }
        div{
            background-color:blue;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* 块级元素 */
            display: block;
            /* 行内块元素 */
            /* display: inline-block; */

        }
        img{
            width: 100px;
            /* 行内元素 */
            display: inline;
        }
    </style>
</head>
<body>
    <!-- 块级元素
        1.独占⼀⾏（⼀⾏只能显示⼀个）   
        2. 宽度默认是⽗元素的宽度，⾼度默认由内容撑开
        3. 可以设置宽⾼ -->
     <div class="div1">div 标签1</div>
     <div class="div2">div 标签2</div>   
    <!-- 行内元素 
      1. ⼀⾏可以显示多个
      2. 宽度和⾼度默认由内容撑开
      3. 不可以设置宽⾼-->
      <span>发hiUI四u</span>
      <span>地方瑟瑟发抖</span>
    <!-- 行内块元素
     1. ⼀⾏可以显示多个
     2. 可以设置宽⾼ -->
     <img src="./images/haimian-baby.jpg" alt="">
     <img src="./images/haimian-baby.jpg" alt="">
</body>
</html>

运行结果：

6.综合案例

案例一：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例1</title>
    <style>
        a{
            display:block;
            width: 200px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #3064bb;
            text-decoration: none;
            color:white;
            font-style: 18px;
        }
    </style>
</head>
<body>
    <a href="">HTML</a>
    <a href="">CSS</a>
    <a href="">JavaScript</a>
    <a href="">Vue</a>
    <a href="">React</a>
</body>
</html>

运行结果：

案例二：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例2</title>
    <style>
        .banner{
            height: 300px;
            background-color: #f3f3f4;
            background-image: url(./bijiimges/img3.png);
            background-repeat: no-repeat;
            background-position: left bottom;

            text-align: right;
            color: #333;
        }
        .banner h2{
            font-size: 36px;
            font-weight: 400;
            line-height: 100px;
        }
        .banner p{
            font-size: 20px;
        }
        .banner a{
            display: inline-block;
            width: 125px;
            height: 40px;
            background-color: #f06b1f;
            text-align: center;
            /* 垂直居中 设置与标签的高度一致 */
            line-height: 40px;
            color: #fff;
            font-size: 20px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="banner">
        <h2>让创造产生价值</h2>
        <p>让创造产生价值让创造产生价值让创造产生价值让创造产生价值让创造产生价值!</p>
        <a href="">我要报名</a>
    </div>
</body>
</html>

运行结果：

二、盒子模型：构建布局的核心机制

1.盒子模型的组成

盒子模型的重要组成部分：

-内容区域（content）：width&height

-边框线(border)：盒子的边框线

-内边距(pading)：出现在内容和盒子边缘之间

-外边距(margin)：出现在盒子外面

2. 核心组成部分

边框（Border）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>30-盒子模型-边框线</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /* dashed是虚线边框 */
            border: 1px dashed #000;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color:saddlebrown;
            /* dotted是点线边框 */
            border: 2px dotted #000;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: darkblue;
            /* solidshing是实线边框 */
            border: 3px solid #000;
        }
        /* 设置单个方向的边框线 */
        .four{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border-top: 1px solid red;
            border-bottom: 2px dotted #000;
            border-left: 3px dashed #31959e;
            border-right: 4px solid #54c82a;
        }
    </style>
</head>
<body>
    <div class="one">
        我是div标签1，用来测试盒子模型的边框线
    </div>
    <div class="two">
        我是div标签2，用来测试盒子模型的边框线
    </div>
    <div class="three">
        我是div标签3，用来测试盒子模型的边框线
    </div>
    <!-- 设置单个方向的边框线 -->
    <div class="four">
        我是div标签4，用来测试盒子模型的边框线
    </div>
</body>
</html>

内边距（Padding）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>31-盒子模型-内边距</title>
    <style>
            div{
                width: 200px;
                height: 200px;
                background-color: aquamarine;
                /* 1、统一设置上下左右的内边距 */
                padding: 20px;
                /* 2、单独设置上下内边距 */
                /* padding-top: 10px;
                padding-right: 20px;
                padding-bottom: 30px;
                padding-left: 40px; */
                /* 3、复合写法 */
                /* 四值： 上   右    下   左 */
                /* padding: 20px 30px 40px 50px; */
                /* 三值：  上  左右  下 */
                /* padding: 20px 30px 40px; */
                /* 两值： 上下  左右 */
                /* padding: 10px  20px ; */
                /* 顺时针旋转，那个方位没数那么就看对面*/
            }
    </style>
</head>
<body>
    <div>
        31-盒子模型-内边距
    </div>
</body>
</html>

注意事项：

我们发现刚刚代码中代码虽然设置的宽和高都为200px，但实际的值却是宽和高241.33px

1、盒子模型的尺寸计算：

盒子尺寸=内容尺寸+border尺寸+内边距尺寸

结论：盒子加border和pading会撑大盒子

2、盒子模型内边距和边框线撑大盒子问题以及解决方法：

-手动做减法，减掉border和pading的尺寸

-内减模式：box-sizing:border-box

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>32-盒子模型-尺寸计算</title>
    <style>
        /* 全局设置内减模式 */
        /* *{
            box-sizing: border-box;
        } */
        .one{
            /* 手动减法 */
            /* width: 200px; */
            /* height: 200px;  */
            width: 160px;
            height: 160px;
            background-color: aquamarine;
            padding: 20px;
            border: 20px;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: #762222;
            padding: 20px;
            border: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="one">
        我是盒子标签1
    </div>
    <div class="two">
        我是盒子标签2
    </div>
</body>
</html>

外边距（magin）

1.怎么设置内容版心居中

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>33-盒子模型-外边距</title>
    <style>
        div{
            /* 外边距不会撑大盒子 */
            height: 200px;
            width: 200px;
            background-color: aqua;
            /* （1）统一设置所有方向的外边距： */
            /* margin: 100px; */

            /* （2）分别设置四个方向的外边距： */
            /* margin-bottom: 10px;
            margin-top: 20px;
            margin-left: 30px;
            margin-right: 40px; */

            /* （3）单独设置某个方向的外边距 */
            /* 四值：上   右   下   左 */
            /* margin:10px 20px 30px 40px; */
            /* 三值：上  左右  下 */
            /* margin: 10px  20px 30px ; */
            /* 两值：上下 左右 */
            /* margin: 10px  20px; */
            /* 顺时针旋转，那个位置没数那么就看对面 */

            /* （4）版心居中：要求：盒子要有宽度*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>   
        我是div盒子
    </div>
</body>
</html>

2.元素溢出

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>35-盒子模型-元素溢出</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: #30e283;
            /* 隐藏溢出内容 */
            /* overflow: hidden; */
            /* 溢出滚动（无论是否溢出，都显示会滚动条位置） */
            /* overflow:scroll; */
            /*  auto：溢出滚动（溢出才显示滚动条位置）----重要 */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
        <p>元素溢出</p>
    </div>
</body>
</html>

3.合并和塌陷问题

  1. 合并：垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>36-外边距问题-合并和塌陷</title>
    <style>
        /* 合并问题：较大值 */
        .one{
            height: 200px;
            width: 200px;
            background-color: rgb(186, 225, 14);
            margin-bottom: 20px;
        }
        .two{
            height: 200px;
            width: 200px;
            background-color: rgb(5, 255, 172);
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="one">我是标签1</div>
    <div class="two">我是标签2</div>
</body>
</html>
  1. 塌陷：父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动
  • 解决方法：取消自己margin,父级设置padding-----推荐设置使用；父级设置overflow:hidden；父级设置border - top

现象展示：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>36-外边距问题-合并和塌陷</title>
    <style>
         /* 塌陷问题 */
         .father{
            width: 400px;
            height: 400px;
            background-color: #18a40d;
         }
         .son{
            height: 200px;
            width: 200px;
            background-color: rgb(255, 0, 0);
            margin-top: 200px;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="son">我是标签3</div>
    </div>
</body>
</html>
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>36-外边距问题-合并和塌陷</title>
    <style>
         /* 塌陷问题 */
         .father{
            width: 400px;
            height: 400px;
            background-color: #18a40d;
            /* 1、取消自己margin-top 给父级设置padding-top */
            /* padding-top: 50px; */
            /* box-sizing: border-box; */

            /* 2和3都是为了让浏览器找到盒子的正确边缘 */
            /* 2、父级设置overflow:hidden */
            overflow: hidden;

            /* 3、父级设置border-top */
            /* border-top: 1px solid #000; */
         }
         .son{
            height: 200px;
            width: 200px;
            background-color: rgb(255, 0, 0);
            margin-top: 200px;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="son">我是标签3</div>
    </div>
</body>
</html>

3. 高级样式

**圆角效果---**border-radius

  1. border - radius:数字+px + 百分比（圆角半径）

  2. 正圆：直接设置50%(前提要正方形盒子),百分比的最大取值为50%，超过百分之五十仍然是一个圆

  3. 胶囊形：设置圆角为高的一半

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子属性-圆角</title>
    <style>
        div{
            margin:100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
            /* 一次给四个角设置圆角 */
            /* border-radius: 5px; */
            /* 单独给四个角单独设置圆角 */
            /* 顺时针旋转：对角相同 */
            border-radius: 5px 10px 20px 20px;
            border-radius: 20px 50px;
            border-radius: 5px 50px 80px;
        }
    </style>
</head>
<body>
    <div>我是div盒子</div>
</body>
</html>

圆和胶囊：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: red;
        }
        /* 圆角设置为高的一半 */
        .jiaonang{
            width: 400px;
            height: 200px;
            border-radius: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
    <div class="jiaonang"></div>
</body>
</html>

**盒子阴影---**box-shadow

|-------------------------------------------------------------------------------------------------------|
| 1. 属性名：box - shadow 2. 属性：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 3. 注意：x轴偏移量 y轴偏移量 必须书写；盒子默认是外阴影，内阴影需要添加insert |

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-阴影</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* box-shadow: 10px 10px 10px 10px rgb(0, 0, 0); */
            /* box-shadow: 10px 10px 10px 10px rgb(0, 0, 0) inset; */
            box-shadow: 10px 10px 10px 10px rgb(49, 49, 62)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.综合案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品卡片</title>
    <style>
         *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }
        body{
            background-color: #f1f1f1;
        }
        .product{
            margin: 100px auto;
            width: 270px;
            height: 253px;
            background-color: #fff;
            text-align: center;
            padding-top: 40px;

            border-radius: 10px;
        }
        img{
            width: 80px;
            border-radius: 50%;
        }
        .product>h4{
            margin-top: 20px;
            margin-bottom: 12px;
            font-style: 18px;
            color: #333;
            font-weight: 400;
        }
        .product p{
            font-size: 12px;
            color: #555;
        }
    </style>
   
</head>
<body>
    <div class="product">
        <!-- 图片不能设置圆角 -->
        <img src="./bijiimges/douyin.jpg" alt="">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </div>
</body>
</html>

总结：

显示模式总结：

显示模式 特点 代表标签 转换方式
块级元素 1. 独占一行（一行只能显示一个） 2. 宽度默认是父元素的宽度，高度默认由内容撑开 3. 可以设置宽高 div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等 display:block
行内元素 1. 一行可以显示多个 2. 宽度和高度默认由内容撑开 3. 不可以设置宽高 a、span、b、u、i、s、strong、ins、em、del等 display:inline
行内块元素 1. 一行可以显示多个 2. 可以设置宽高 img、input、textarea、button、select等 display:inline-block

显示模式的切换： display:block 转换为块级元素 display:inline-block 转换为行内块元素 display:inline 转换为行内元素

盒子模型总结：

分类 详细内容
盒子模型组成部分 1. 内容区域：width - height 2. 内边距 --padding(出现在内容与边缘之间，会撑大盒子) 3. 边框线：border 4. margin(出现在盒子外面)，拉开两个盒子之间的距离
盒子模型 - 边框线 1. 设置全部的边框线 - 属性名：border(bd) - 属性值：边框线粗细 线条样式（solid dashed dotted） 颜色（不分顺序） 2. 设置单个方向的边框线 - 属性名： border - top、border - left、border - right、border - bottom - 属性值：边框线粗细 线条样式（solid dashed dotted） 颜色（不分顺序）
盒子模型 - 内边距 1. 统一设置所有方向的内边距：padding: 值 2. 分别设置四个方向的内边距：padding: 上 右 下 左 3. 单独设置某个方向的内边距 - padding - top: 设置上内边距 - padding - right: 设置右内边距 - padding - bottom: 设置下内边距 - padding - left: 设置左内边距
盒子模型 - 尺寸计算 1. 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距padding尺寸 2. 内边距和边框线距都会撑大盒子 3. 解决方法：手动做减法；内减模式：box - sizing:border - box
盒子模型 - 外边距 1. 统一设置所有方向的外边距：margin: 值 2. 分别设置四个方向的外边距：margin: 上 右 下 左 3. 单独设置某个方向的外边距 - margin - top: 设置上外边距 - margin - right: 设置右外边距 - margin - bottom: 设置下外边距 - margin - left: 设置左外边距 4. 版心居中（设置水平居中）：margin：数字px auto
盒子模型 - 元素溢出 1. 作用：控制溢出元素的内容的显示方式 2. 属性：overflow 3. 属性值： - hidden:溢出隐藏 - scroll:溢出滚动（无论是否溢出，都显示会滚动条位置） - auto：溢出滚动（溢出才显示滚动条位置）
外边距问题 - 合并和塌陷 1. 合并：垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效 2. 塌陷：父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动 - 解决方法：取消自己margin,父级设置padding-----推荐设置使用；父级设置overflow:hidden；父级设置border - top
行内元素垂直内外边距 1. 场景：行内元素无法设置margin和padding，无法改变元素垂直位置 2. 解决方法：给行内元素添加line - height可以改变垂直位置
盒子模型 - 圆角 1. border - radius:数字+px + 百分比（圆角半径） 2. 正圆：直接设置50%(前提要正方形盒子),百分比的最大取值为50%，超过百分之五十仍然是一个圆 3. 胶囊形：设置圆角为高的一半
盒子模型 - 阴影 1. 属性名：box - shadow 2. 属性：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 3. 注意：x轴偏移量 y轴偏移量 必须书写；盒子默认是外阴影，内阴影需要添加insert
相关推荐
stark张宇几秒前
Web - Javascript 函数与DOM、BOM
前端
上海张律师13 分钟前
组件截图sdk -- screenshot_hm介绍 ##三方SDK##
前端·harmonyos
lineo_16 分钟前
抛弃陈旧写法，你的uniapp定义globalData的正确姿势（setup语法糖）
前端·javascript
spionbo17 分钟前
Vue 结合 D3 实现可拖拽拓扑图的技术方案及具体应用实例解析
前端·javascript
GIS之路18 分钟前
OpenLayers 图形交互编辑
前端
ViceBoy_22 分钟前
前端混淆的概念-缓存&存储
前端·面试
中微子22 分钟前
从C++看JavaScript闭包：执行上下文与作用域的跨语言对比
前端·c++
前端日常开发23 分钟前
利用Web Worker实现稳定定时器：解决浏览器后台定时问题
前端
前端日常开发23 分钟前
自定义指令在 Vue.js 中的应用场景与实践
前端
_Lok24 分钟前
面试题：解释 CSS 中的 BFC 是什么，它的作用是什么？有哪些属性可以设置了会启作用？
前端
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04DeepSeek各版本说明与优缺点分析05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07Coze扣子平台完整体验和实践（附国内和国际版对比）08VMware虚拟机安装Win7专业版保姆级教程（附镜像包）09苍穹外卖面试总结10ImageJ软件使用教程（二）：图像测量