CSS基础学习（2）——盒子模型布局_css盒子模型布局元素-优快云博客

本文是CSS基础学习的第二部分，主要介绍CSS盒子模型，包括内容区、边框、内边距和外边距的详细设置，如overflow属性、边框样式、内边距复合属性以及外边距复合属性的使用。同时，讨论了块元素和内联元素的特点，以及如何通过display属性改变元素的类型。

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

【往期文章】

CSS基础学习（1）

盒模型构成

1. 盒模型内容区

内容（content）可以是文本、图像。支持属性：height、width、overflow。

1.1 overflow属性

overflow属性值见下表：

值	描述
visible	默认值。内容不会被裁剪，会呈现在元素之外
hidden	内容会被裁剪，并且其余内容是不可见的。
scroll	内容会被裁剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被裁剪，浏览器显示滚动条来查看其余内容

<!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>内容溢出</title>
    <style>
        .parent{
            width: 200px;
            height: 200px;
            background-color: #FFD758;
            overflow: hidden;
        }
        .child{
            width: 300px;
            height: 100px;
            background-color: #6D6AF7;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

        </div>
    </div>
</body>
</html>

2. 边框border

border-style:设置边框样式
border-width:设置边框宽度
border-color:设置边框颜色
border:快捷边框属性(综合上面3个属性)

2.1 边框样式border-style

值	描述
none	定义无边框
hidden	与none相同，但应用于表时除外；对于表，hidden用于解决边框冲突
dotted	定义点状边框
dashed	定义虚线
solid	定义实线
double	定义双线
groove	定义3D凹槽边框
ridge	定义3D垄状边框
inset	定义3D inset边框
outset	定义3D outset边框

2.2 边框宽度

border-width属性值见下表：

值	描述
thin	细的边框
medium	默认，中等边框
thick	粗的边框
length	自定义边框的宽度

3. 内边距padding

内边距是内容区和边框之间的空间。

padding-top
padding-bottom
padding-left
padding-right

3.1 内边距复合属性padding

把padding-top、padding-right、padding-bottom、padding-left合并为一条CSS样式。padding属性可以有1~4个值。

//4个方向的值都是100px
padding:100px;

//第一个属性值代表padding-top、padding-bottom;第二个属性值代表padding-left、padding-right
padding:50px 100px;

//第一个属性代表padding-top；第二个属性值代表padding-right和padding-left；第三个属性值代表padding-bottom
padding:50px 100px 150px;

//第一个属性值代表padding-top；第二个属性值代表padding-right；第三个属性值代表padding-bottom；第四个属性值代表padding-left；
padding:50px 100px 150px 200px;

复合属性写法顺序从padding-top开始，顺时针方向设置。

4. 外边距margin

margin-top
margin-right
margin-bottom
margin-left

4.1 外边距复合属性margin

margin:长度值|百分比|auto

margin的值可以取1~4个。属性规则同padding相同。

代码示例：

<!DOCTYPE html>

<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>
        .box{
            width: 600px;
            height: 600px;
            /* 设置边框颜色 */
            background-color: #FFD758;
            /* 设置边框样式 */
            border-style: dotted|solid|dashed|double|groove|ridge|inset|outset;
            /* 设置边框宽度 */
            border-width: 2px;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;
            padding-left: 200px;
        }
    </style>
</head>

<body>

    <div class="box">

        <div class="child">

        </div>
    </div>

</body>

</html>

5. 块元素和内联元素

CSS中，盒子的显示方式有3种：块元素、内联元素和行内块元素。

5.1 块元素和内联元素的特点

常见块元素<p>、<div>、<h1>~<h6>、<ul>、<li>。块元素的display属性值默认为block。

【块元素特点】：
1.块元素默认独占一行
2.块元素可以设置高度、宽度、内边距和外边距
3.块元素宽度为默认值(未设置width属性)时，宽度是其容器100%

内联元素
常见内联元素<a>、<img>、<span>等，内联元素的display属性值默认为inline。

【内联元素特点】：
1.内联元素与相邻的内联元素同处一行
2.内联元素不可设置高度、宽度
3.内联元素中，垂直方向的border、padding、margin不会影响布局
4.内联元素不可以包含块元素

5.2 display属性规定元素的类型

使用display属性可以指定元素的类型

值	描述
none	元素不会被显示
block	元素将显示为块元素
inline	元素会被显示为内联元素
inline-block	元素会被显示为行内块元素
list-item	此元素会作为列表显示

代码示例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size: 30px;
        }
        /* div元素将显示为内联元素 */
        div{
            background-color: #6ebfb5;
            margin: 10px;
            display: inline;
        }
        /* span元素将显示为块元素 */
        span{
            background-color: #ffc7c7;
            margin: 10px;
            display: block;
        }
    </style>
</head>
<body>
    <div>div元素</div>
    <div>div元素</div>
    <div>div元素</div>
    <span>span元素</span>
    <span>span元素</span>
    <span>span元素</span>
</body>
</html>