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

于 2025-04-30 22:25:31 发布
阅读量1.1k 收藏 14
点赞数 15
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74488469/article/details/147639966
版权

一、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
<!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转换为行内块元素

实例代码：

<!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.综合案例

案例一： 

<!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>

运行结果：

案例二：

<!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）

<!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）

<!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

<!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.怎么设置内容版心居中

<!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.元素溢出

<!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中的较大值生效

<!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>


2. 塌陷：父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动
    - 解决方法：取消自己margin,父级设置padding-----推荐设置使用；父级设置overflow:hidden；父级设置border - top

现象展示：

<!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>

<!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. 胶囊形：设置圆角为高的一半

<!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>

 

圆和胶囊：

<!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
<!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.综合案例

<!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

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值