CSS 盒model and 布局Basics

深入understandingCSS盒model, including in 容, in edge距, edge框 and out edge距, 以及basic 布局techniques

首页 > CSS tutorial > tutoriallist > CSS 盒model and 布局Basics

1. CSS 盒modelIntroduction

CSS盒model is CSS布局 Basics, 它describes了元素 in 页面in所占空间 方式. 每个HTML元素都可以看作 is a 盒子, 这个盒子由四个部group成: in 容 (Content) , in edge距 (Padding) , edge框 (Border) and out edge距 (Margin) .

1.1 盒model 组成

CSS盒model 四个部分 from in to out 依次 is :

盒model演示
width: 300px
height: 200px
padding: 20px
border: 5px
margin: 20px
out edge距 (Margin)
edge框 (Border)
in edge距 (Padding)
in 容 (Content)
  • in 容 (Content) : 元素 practical in 容区域, including文本, graph像etc., 由 width and height property控制.
  • in edge距 (Padding) : in 容 and edge框之间 空间, 由 padding property控制, in edge距会影响元素 背景色 and edge框位置.
  • edge框 (Border) : package围 in edge距 edge界线, 由 border property控制, edge框宽度会增加元素 总宽度 and high 度.
  • out edge距 (Margin) : edge框 out 空间, 由 margin property控制, out edge距用于元素之间 间距, 不会影响元素 背景色.

2. 标准盒model and IE盒model

CSSin has 两种盒model: 标准盒model (W3C盒model) and IE盒model (传统盒model) . 它们 主要区别 in 于计算元素总宽度 and high 度 方式不同.

2.1 标准盒model (W3C盒model)

in 标准盒modelin, 元素 总宽度 and high 度计算公式such as under : 

总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
总 high 度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

其in, width and height 只package含 in 容区域 宽度 and high 度. 

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid #3498db;
    margin: 10px;
    /* 总宽度 = 300 + 20 + 20 + 5 + 5 + 10 + 10 = 370px */
    /* 总 high 度 = 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px */
}

2.2 IE盒model (传统盒model)

in IE盒modelin, 元素 总宽度 and high 度计算公式such as under : 

总宽度 = width + margin-left + margin-right
总 high 度 = height + margin-top + margin-bottom

其in, width and height package含 in 容区域, in edge距 and edge框 宽度 and high 度. 

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid #3498db;
    margin: 10px;
    /* 总宽度 = 300 + 10 + 10 = 320px */
    /* 总 high 度 = 200 + 10 + 10 = 220px */
    /* 其in, width package含了 content + padding + border = 250 + 20 + 20 + 5 + 5 = 300px */
}

2.3 box-sizing property

CSS3in引入了 box-sizing property, 用于控制元素 盒modelclass型:

  • content-box: 标准盒model (默认值) , width and height 只package含 in 容区域.
  • border-box: IE盒model, width and height package含 in 容区域, in edge距 and edge框.
  • padding-box: (已废弃) width and height package含 in 容区域 and in edge距. 
/* using标准盒model */
div {
    box-sizing: content-box;
}

/* usingIE盒model */
div {
    box-sizing: border-box;
}

/* 全局usingIE盒model (推荐)  */
* {
    box-sizing: border-box;
}

best practices

推荐 in 全局范围 in using box-sizing: border-box;, 这样可以更直观地控制元素 尺寸, 避免计算总宽度 and high 度时 complex 性.

3. in 容区域 (Content)

in 容区域 is 元素 core部分, package含元素 practical in 容, such as文本, graph像etc..

3.1 width and height property

using width and height property控制 in 容区域 宽度 and high 度.

3.1.1 宽度property值

  • auto: 默认值, 浏览器自动计算宽度.
  • long 度值: such as px, em, rem etc..
  • 百分比: 相 for 于父元素 in 容区域 宽度.
  • max-content: in 容 固 has 首选宽度.
  • min-content: in 容 固 has 最 small 宽度.
  • fit-content: in 容 固 has 宽度 and 可用宽度之间 最 small 值.

3.1.2 high 度property值

  • auto: 默认值, 浏览器自动计算 high 度.
  • long 度值: such as px, em, rem etc..
  • 百分比: 相 for 于父元素 in 容区域 high 度 (需要父元素 has 明确 high 度) .
  • max-content: in 容 固 has 首选 high 度.
  • min-content: in 容 固 has 最 small high 度.
  • fit-content: in 容 固 has high 度 and 可用 high 度之间 最 small 值. 
/* 固定宽度 and  high 度 */
div {
    width: 300px;
    height: 200px;
}

/* 百分比宽度, 固定 high 度 */
div {
    width: 50%;
    height: 200px;
}

/* 自动宽度 and  high 度 */
div {
    width: auto;
    height: auto;
}

/* usingCSS3 new 值 */
div {
    width: max-content;
    height: min-content;
}

3.2 min-width and min-height

using min-width and min-height property设置元素 最 small 宽度 and high 度, 确保元素不会 small 于指定尺寸. 

div {
    min-width: 200px;
    min-height: 100px;
    width: 50%; /* such as果50% small 于200px, 则using200px */
}

3.3 max-width and max-height

using max-width and max-height property设置元素 最 big 宽度 and high 度, 确保元素不会 big 于指定尺寸. 

div {
    max-width: 800px;
    max-height: 500px;
    width: 100%; /* such as果100% big 于800px, 则using800px */
}

4. in edge距 (Padding)

in edge距 is in 容 and edge框之间 空间, using padding property设置.

4.1 padding property

padding property可以同时设置四个方向 in edge距, 语法such as under : 

/* 四个方向  in edge距相同 */
padding: 10px;

/*  on  under  in edge距 10px,  left  right  in edge距 20px */
padding: 10px 20px;

/*  on  in edge距 10px,  left  right  in edge距 20px,  under  in edge距 30px */
padding: 10px 20px 30px;

/*  on  10px,  right  20px,  under  30px,  left  40px (顺时针顺序)  */
padding: 10px 20px 30px 40px;

4.2 方向 in edge距property

也可以分别设置每个方向 in edge距: 

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

4.3 padding property值

  • long 度值: such as px, em, rem etc..
  • 百分比: 相 for 于父元素 in 容区域 宽度.

注意: in edge距不能 for 负值. 

div {
    padding: 20px; /* 固定 in edge距 */
    padding: 2em; /* 相 for  in edge距 */
    padding: 5% 10%; /* 百分比 in edge距,  on  under 5%,  left  right 10% */
}

5. edge框 (Border)

edge框 is package围 in edge距 edge界线, using border property设置.

5.1 border property

border property is a 简写property, 可以同时设置edge框 宽度, 样式 and 颜色: 

border: 宽度 样式 颜色;
div {
    border: 2px solid #3498db;
}

5.2 edge框宽度 (border-width)

using border-width property设置edge框 宽度: 

/* 四个方向 edge框宽度相同 */
border-width: 2px;

/*  on  under  2px,  left  right  4px */
border-width: 2px 4px;

/*  on  2px,  left  right  4px,  under  6px */
border-width: 2px 4px 6px;

/*  on  2px,  right  4px,  under  6px,  left  8px */
border-width: 2px 4px 6px 8px;

也可以分别设置每个方向 edge框宽度: 

border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 6px;
border-left-width: 8px;

5.3 edge框样式 (border-style)

using border-style property设置edge框 样式, 常用样式including:

  • none: 无edge框 (默认)
  • solid: 实线edge框
  • dashed: 虚线edge框
  • dotted: 点线edge框
  • double: 双线edge框
  • groove: 3D凹槽edge框
  • ridge: 3D脊状edge框
  • inset: 3D嵌入edge框
  • outset: 3D突出edge框
/* 四个方向 edge框样式相同 */
border-style: solid;

/*  on  under 实线,  left  right 虚线 */
border-style: solid dashed;

/* 分别设置每个方向 edge框样式 */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

5.4 edge框颜色 (border-color)

using border-color property设置edge框 颜色: 

/* 四个方向 edge框颜色相同 */
border-color: #3498db;

/*  on  under 红色,  left  right 蓝色 */
border-color: #e74c3c #3498db;

/* 分别设置每个方向 edge框颜色 */
border-top-color: #e74c3c;
border-right-color: #3498db;
border-bottom-color: #2ecc71;
border-left-color: #f39c12;

5.5 单方向edge框

可以 for 元素设置单个方向 edge框: 

/* 只 has  on edge框 */
border-top: 2px solid #3498db;

/* 只 has  right edge框 */
border-right: 2px solid #3498db;

/* 只 has  under edge框 */
border-bottom: 2px solid #3498db;

/* 只 has  left edge框 */
border-left: 2px solid #3498db;

5.6 edge框圆角 (border-radius)

using border-radius property设置edge框 圆角: 

/* 四个角 圆角半径相同 */
border-radius: 10px;

/*  on  under  10px,  left  right  20px */
border-radius: 10px 20px;

/*  on  10px,  left  right  20px,  under  30px */
border-radius: 10px 20px 30px;

/*  on  left  10px,  on  right  20px,  under  right  30px,  under  left  40px */
border-radius: 10px 20px 30px 40px;

/* 椭圆圆角 */
border-radius: 10px / 20px; /* 水平半径 10px, 垂直半径 20px */

/*  complex 圆角 */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;

6. out edge距 (Margin)

out edge距 is edge框 out 空间, using margin property设置, 用于元素之间 间距.

6.1 margin property

margin property 语法 and padding propertyclass似: 

/* 四个方向  out edge距相同 */
margin: 10px;

/*  on  under  10px,  left  right  20px */
margin: 10px 20px;

/*  on  10px,  left  right  20px,  under  30px */
margin: 10px 20px 30px;

/*  on  10px,  right  20px,  under  30px,  left  40px (顺时针顺序)  */
margin: 10px 20px 30px 40px;

6.2 方向 out edge距property

也可以分别设置每个方向 out edge距: 

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

6.3 margin property值

  • auto: 自动计算 out edge距, 常用于水平居in.
  • long 度值: such as px, em, rem etc..
  • 百分比: 相 for 于父元素 in 容区域 宽度.
  • 负值: 可以 for 负值, 用于调整元素位置 or 重叠元素. 
/* 固定 out edge距 */
div {
    margin: 20px;
}

/* 水平居in */
div {
    width: 50%;
    margin: 0 auto;
}

/* 负值 out edge距 */
div {
    margin-left: -20px;
    margin-top: -10px;
}

6.4 out edge距merge

out edge距merge is 指当两个垂直 out edge距相遇时, 它们会merge成一个 out edge距, 取较 big 那个值.

6.4.1 相邻元素 out edge距merge

当两个相邻元素 on under 排列时, 它们 垂直 out edge距会merge: 

.box1 {
    margin-bottom: 30px;
    background-color: #e74c3c;
    height: 100px;
}

.box2 {
    margin-top: 20px;
    background-color: #3498db;
    height: 100px;
}
/* 两个盒子之间 practical间距 is  30px, 而不 is  30+20=50px */

6.4.2 父子元素 out edge距merge

当父元素没 has edge框, in edge距 or 清除浮动时, 子元素 on edge距会 and 父元素 on edge距merge: 

.parent {
    background-color: #f39c12;
    /* 没 has edge框 or  in edge距 */
}

.child {
    margin-top: 20px;
    background-color: #2ecc71;
    height: 100px;
}
/* 子元素  margin-top 会 and 父元素  margin-top merge */

6.4.3 空元素 out edge距merge

当一个空元素只 has 垂直 out edge距时, on under out edge距会merge: 

.empty {
    margin-top: 10px;
    margin-bottom: 20px;
    /* 没 has  in 容, edge框 or  in edge距 */
}
/* 空元素 practical high 度 is  20px, 而不 is  10+20=30px */

6.4.4 such as何避免 out edge距merge

  • for 父元素添加edge框 or in edge距
  • for 父元素设置 overflow: hidden;
  • using浮动 or 定位
  • using flexbox or grid 布局

7. basic布局techniques

7.1 水平居in

以 under is 几种common 水平居inmethod:

7.1.1 块级元素水平居in

.center {
    width: 50%; /* 必须设置宽度 */
    margin: 0 auto;
}

7.1.2 行 in 元素水平居in

.parent {
    text-align: center;
}

.child {
    display: inline-block;
}

7.1.3 Flexbox 水平居in

.parent {
    display: flex;
    justify-content: center;
}

.child {
    /* 不需要设置宽度 */
}

7.2 垂直居in

以 under is 几种common 垂直居inmethod:

7.2.1 单行文本垂直居in

.center {
    height: 100px;
    line-height: 100px; /* etc.于containers high 度 */
}

7.2.2 many 行文本垂直居in (表格布局) 

.parent {
    display: table;
    height: 200px;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

7.2.3 Flexbox 垂直居in

.parent {
    display: flex;
    align-items: center;
    height: 200px;
}

.child {
    /* 不需要设置 high 度 */
}

7.2.4 绝 for 定位垂直居in

.parent {
    position: relative;
    height: 200px;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*  or  */
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: fit-content;
}

7.3 水平垂直居in

结合水平 and 垂直居inmethod, 可以implementation元素 完全居in:

7.3.1 Flexbox 水平垂直居in

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.child {
    /* 不需要设置宽度 and  high 度 */
}

7.3.2 绝 for 定位水平垂直居in

.parent {
    position: relative;
    height: 300px;
    width: 100%;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*  or  */
.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

8. 实战case: 卡片布局

under 面 is a simple 卡片布局case, 展示such as何using盒model and basic布局techniques: 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片布局case</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }
        
        .card-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .card-content {
            padding: 20px;
        }
        
        .card-title {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #3498db;
        }
        
        .card-text {
            color: #666;
            margin-bottom: 20px;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px 20px;
        }
        
        .card-btn {
            display: inline-block;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        
        .card-btn:hover {
            background-color: #2980b9;
        }
        
        .card-date {
            font-size: 0.9rem;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>卡片布局case</h1>
        <div class="card-grid">
            <div class="card">
                <img src="https://picsum.photos/id/1015/300/200" alt="风景graph片" class="card-img">
                <div class="card-content">
                    <h3 class="card-title">风景卡片 1</h3>
                    <p class="card-text">这 is a 风景卡片example, 展示了such as何usingCSS盒model and 布局techniquescreation美观 卡片design. </p>
                </div>
                <div class="card-footer">
                    <a href="#" class="card-btn">查看详情</a>
                    <span class="card-date">2025-01-05</span>
                </div>
            </div>
            
            <div class="card">
                <img src="https://picsum.photos/id/1016/300/200" alt="风景graph片" class="card-img">
                <div class="card-content">
                    <h3 class="card-title">风景卡片 2</h3>
                    <p class="card-text">这 is a 风景卡片example, 展示了such as何usingCSS盒model and 布局techniquescreation美观 卡片design. </p>
                </div>
                <div class="card-footer">
                    <a href="#" class="card-btn">查看详情</a>
                    <span class="card-date">2025-01-05</span>
                </div>
            </div>
            
            <div class="card">
                <img src="https://picsum.photos/id/1018/300/200" alt="风景graph片" class="card-img">
                <div class="card-content">
                    <h3 class="card-title">风景卡片 3</h3>
                    <p class="card-text">这 is a 风景卡片example, 展示了such as何usingCSS盒model and 布局techniquescreation美观 卡片design. </p>
                </div>
                <div class="card-footer">
                    <a href="#" class="card-btn">查看详情</a>
                    <span class="card-date">2025-01-05</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

9. 练习

练习 1: 盒modelunderstanding

  1. creation一个HTMLfile, package含一个div元素.
  2. for div元素添加以 under 样式: 
    div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid #3498db;
    margin: 10px;
    background-color: #f8f9fa;
    color: #333;
}
  3. using不同 box-sizing 值 (content-box and border-box) , 观察元素总宽度 and high 度 变化.
  4. in div in 部添加一些文本 in 容, 观察 in edge距 for in 容布局 影响.

练习 2: in edge距 and out edge距

  1. creation一个HTMLfile, package含以 under structure: 
    <div class="container">
    <div class="box box1">盒子 1</div>
    <div class="box box2">盒子 2</div>
    <div class="box box3">盒子 3</div>
</div>
  2. for .container添加样式: 
    .container {
    width: 80%;
    margin: 0 auto;
    background-color: #f0f0f0;
    padding: 20px;
}
  3. for .box添加Basics样式: 
    .box {
    background-color: white;
    border: 2px solid #3498db;
    text-align: center;
    padding: 20px;
    margin: 10px 0;
}
  4. for 每个盒子添加不同 in edge距 and out edge距:
    • box1: on in edge距 30px, under out edge距 20px
    • box2: left in edge距 50px, right out edge距 10px
    • box3: under in edge距 40px, on out edge距 30px
  5. 观察盒子之间 间距变化, understanding out edge距merge现象.

练习 3: 居in布局

  1. creation一个HTMLfile, package含以 under structure: 
    <div class="parent">
    <div class="child">居in 子元素</div>
</div>
  2. for parent添加样式: 
    .parent {
    width: 100%;
    height: 400px;
    background-color: #f0f0f0;
}
  3. for child添加样式: 
    .child {
    width: 200px;
    height: 150px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 150px;
}
  4. using至 few 三种不同 methodimplementationchild元素 in parent元素in 水平垂直居in:
    • usingmargin and position
    • usingFlexbox
    • usingtable-cell
  5. 比较不同method Pros and Cons.
on 一节: CSS 文本样式 and 排版 under 一节: CSS 浮动 and 定位