标签：Box 3px 盒子 margin 边框 padding width Model border
目录
其实，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>
标签：Box,3px,盒子,margin,边框,padding,width,Model,border 来源： https://blog.csdn.net/weixin_44239541/article/details/87923761
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。