布局的核心之一：盒子模型（Box Model）

最新推荐文章于 2023-07-06 23:38:13 发布

转载最新推荐文章于 2023-07-06 23:38:13 发布 · 476 阅读

本文深入讲解CSS盒子模型的构成，包括边框(border)、内边距(padding)、外边距(margin)等关键概念，以及如何通过这些属性精确控制网页布局。

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

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

一、盒子模型在网页中的呈现

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子的内边距padding与外边距margin

盒模型的宽度=width+padding+border=margin

盒模型的宽度=width+padding-left+padding-right+border-right+border-left+margin-left+margin-right

width   宽度
padding   内边距   有效内容和边框的距离   padding-left    padding-right
border   4个边框        border-left    border-right
margin   外边距   两个盒子的距离调整盒子的距离   margin-left   margin-right

二、盒子模型各个部分的介绍

1、盒子边框（border）

语法：

border : border-width || border-style || border-color

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

表格的细线边框

border-collpase:collpase
/*表示边框合并再一起*/

盒子边框总结

设置内容                                 样式属性
边框宽度  border-width   边框样式  border-style   边框颜色  border-color
上边框 border-top-width   border-top-style   border-top-color
下边框   border-bottom-width   border-bottom-style   border-bottom-color
左边框   border-left-width   border-left-style   border-left-color
右边框   border-right-width   border-right-style   border-right-color

2.内边距（padding）

设置了盒子的内边距之后，在浏览器中显示的盒子会增大，此时必须减小width

padding-top	上边距
padding-bottom	下边距
padding-left	左边距
padding-right	右边距

注意：padding后面跟几个数值的意思是不一样的

值的个数   表达意思
1个值   padding:3px                          上下左右都是3px
2个值   padding:3px 5px                    上下3px   左右5px
3个值   padding:3px 5px 10px            上3px  左右5px 下10px
4个值   padding:3px 5px 10px 15px    上3px  右5px  下10px 左15px(顺时针)

3.外边距（margin）

（1）总结

margin-top	上外边距
margin-bottom	下外边距
margin-left	左外边距
margin-right	右外边距
margin	上下左右边距

值的个数   表达意思
1个值   margin:3px                          上下左右都是3px
2个值   margin:3px 5px                    上下3px   左右5px
3个值   margin:3px 5px 10px            上3px  左右5px 下10px
4个值   margin:3px 5px 10px 15px    上3px  右5px  下10px 左15px(顺时针)

（2）外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足以下两个条件：

1.必须是块级元素

2.盒子必须制定宽度 width

.box{
    width:300px;
    margin:0 auto;
 
}

（3）清除元素的默认边距：全局选择器


*{
    margin:0;   /*清除外边距*/
    padding:0;   /*清除内边距*/
}

（4）外边距合并

相邻块元素垂直外边距的合并（外边距塌陷）

尽量避免

嵌套块元素垂直外边距的合并

1.父元素定义上边框或上内边距

2.为父元素添加 overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*外边距塌陷，尽量去避免，两个外边距，会选一个大的*/
        .father{
            width: 400px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
        }
        .first-child{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 80px;
 
        }
        .second-child{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 50px;
        }
 
    </style>
</head>
<body>
<div class="father">
    <div class="first-child"></div>
    <div class="second-child"></div>
 
</div>
</body>
</html>