布局的核心--盒模型 Box Model

最新推荐文章于 2024-08-03 23:47:17 发布

原创最新推荐文章于 2024-08-03 23:47:17 发布 · 400 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#布局的核心 #盒模型

web开发同时被 2 个专栏收录

12 篇文章

订阅专栏

布局的核心

3 篇文章

订阅专栏

本文深入解析网页布局中的盒模型概念，包括边框(border)、内边距(padding)、外边距(margin)的详细设定方法及技巧，如边框的宽度、样式、颜色，内边距的调整方式，以及如何通过外边距实现盒子居中。

一、盒子在网页中的呈现

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

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

内padding外margin

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

二、各个部分的介绍

1.border边框

（1）语法：

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

border-width:边框宽度

border-style:边框样式

none	没有边框，即忽略所有边框的宽度（默认值）
solid	边框为单实线（最常用）
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

border-color:边框颜色

（2）表格的细线边框：

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

（3）盒子边框总结：

设置内容	样式属性
设置内容	边框宽度 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>