本文主要是介绍CSS盒子模型： 盒子模型( Box Model)组成 ，边框， 表格的细线边框 ，内边距（padding) 边框会影响盒子的实际大小， 外边距 (margin) 外边距合并， 清除内外边距，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 盒子模型：
- 盒子模型( Box Model)组成
- 边框
- 表格的细线边框
- 内边距（padding)
- 边框会影响盒子的实际大小
- 外边距 (margin)
- 外边距合并
- 清除内外边距
盒子模型：
页面布局要学习三大核心：盒子模型，浮动和定位
页面布局过程：
- .先准备好相关的网页元素，网页元素基本都是盒子Box。
- 利用CSS设置好盒子的样式，然后摆放到相应位置。
- 往盒子里面装内容。
网页布局的核心本质：就是利用CSS摆盒子。
盒子模型( Box Model)组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。
边框
border 可以设置元素的边框。边框有三部分组成：边框宽度（粗细) , 边框样式 , 边框颜色。
语法：
border : border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框的颜色 |
边框样式 border-style可以设置如下值：
- none: 没有边框即忽略所有边框的宽度（默认值）。
- solid: 边框为单实线（最为常用）。
- dashed: 边框为虚线。
- dotted: 边框为点线。
例子：
<style>div {width: 300px;height: 200px;/*border-width 边框的粗细，一般情况下用 px*/border-width: 5px;/*border-style 边框的样式 solid实线边框 dashed 虚线边框 dotted点线边框*/border-style: solid;/* border-style: dashed; *//* border-style: dotted; *//* border-color 边框的颜色 */border-color: pink}</style>
</head><body><div></div>
</body>
边框简写：
boder:1px solid red;没有顺序
例子：
<style>div {width: 300px;height: 200px;/* border-width: 5px;border-style: solid; border-color: pink; *//*边框的复合写法 简写:*/border: 5px solid pink;}</style>
</head><body><div></div>
</body>
边框分开写法：
border-top: 1px solid red; /*只设定上边框，其余同理*/
案例：
设置一个200*00的盒子，设置上边框的颜色为红色，其余边框为蓝色（提示：一定注意边框的层叠性）
<style>div {width: 200px;height: 200px;/* border-top: 1px solid red;border-bottom: 1px solid blue;border-left: 1px solid blue;border-right: 1px solid blue; *//*boder 包含四条边*/border: 1px solid blue;/*层叠性 只是层叠了上边框 利用就近原则*/border-top: 1px solid red;}</style>
</head><body><div></div>
</body>
表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。
它控制相邻的单元格的边框。
语法：
border-collapse:collpase;
例子：
<head><style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid pink;/*合并相邻的边框*/border-collapse: collapse;}</style>
</head>
<body><table align="center" cellspacing="0" ><thead><tr><th>排名</th><th>关键词</th><th>封面</th></tr></thead><tbody><tr><td>1</td><td>靠近你会掉刺</td><td><img src="images/1.jpg"></td></tr><tr><td>2</td><td>魔尊要抱抱</td><td><img src="images/2.jpg"></td></tr><tr><td>3</td><td>触碰的旋律</td><td><img src="images/3.jpg"></td></tr><tr><td>4</td><td>穿越成反派要如何活命</td><td><img src="images/4.jpg"></td></tr></tbody>
</table>
展示图：
- collapse单词是合并的意思
- border-collapse: collapse：表示相邻边框合并在一起。
内边距（padding)
padding属性用于设置内边距，即边框与内容间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-rigth | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding属性（简写属性）可以有一到四个值。
| 值得个数 | 表达意思 |
|---|---|
| padding:5px | 1个值，代表上下左右都有5像素内边距； |
| padding:5px 10px | 2个值，代表上下边距是5像素 左右内边距是10像素 |
| padding:5px 10px 20px | 3个值，代表上边距5像素，左右内边距10像素，下边距20像素； |
| padding:5px 10px 20px 30px; | 4个值，上是5像素，右10像素，下20像素，左是30像素，顺时针 |
练习：
<style>/*1.要求盒子有一个内边距是5像素*/div {padding-left: 5px;}/*2./*要求简写的形式写出 一个盒子上下是25像素 左右是15像素*/div {padding:25px 15px;}/*要求简写的形式写出一个盒子 上内边距是12像素 下内边距是0 左内边距是25像素 有内边距是10像素*//*上右下左*/div {padding: 12px 10px 0 25px;}</style>
边框会影响盒子的实际大小
当我们给盒子指定padding值之后，发生了2件事：
1.内容和边框有了距离，添加内边距。
2.padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
我们有两种方案解决：
1.测量盒子大小的时候，不量边框。
2.如果测量的时候包含了边框，保证盒子跟效果图一致，则需要 width/heigth减去边框宽度。
例子：
<head><style>div {/* width: 200px;height: 200px; */width: 160px;height: 160px;background-color: pink;padding: 20px;}</style>
</head><body><div>你没对象，你没钱，你还秃，你没对象，你没钱，你还秃，你没对象，你没钱，你还秃，你没对象，你没钱，你还秃</div>
</body>
展示图：
案例：新浪导航案例 -padding影响盒子好处
1.padding内边距可以撑开盒子。
2.因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。
案例分析：
1.上边框为3像素，颜色为#ff8500
2.下边框为1像素 ，颜色为#edeef0
3.盒子高度为41像素，背景颜色为 #fcfcfc
4.文字的颜色为#4c4c4c。
案例：
<head><style>.nav {/*高度*/height: 41px;/*上边框*/border-top: 3px solid #ff8500;/*下边框*/border-bottom: 1px solid #edeef0;/*背景颜色*/background-color: #fcfcfc;/*文字垂直居中*/line-height: 41px;}.nav a {/*a 属于行内元素，此时必须要转换 行内块元素*/display: inline-block;/*高度为41像素，不给宽度，因为字数不一样，直接用padding撑大盒子*/height: 41px;/*内边距：上下0像素，左右20像素*/padding: 0 20px;/*字体12像素，颜色为#4c4c4c*/font-size: 12px;color: #4c4c4c;/*取消链接的下划线*/text-decoration: none;}/*链接伪类样式*/.nav a:hover {/*鼠标经过的背景色*/background-color: #eeeeee;/*鼠标经过的字体颜色*/color: #ff8500;}</style>
</head><body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">电脑端</a></div>
</body>
展示图：
案例：小米导航案例修改 -padding影响盒子大小的计算。
- padding内边距可以撑大盒子，有时候，也可以让我们去修改宽度。
- 所以小米侧边栏这个案例，文字距离左侧的距离不应该用 text-indent这样不精确。
- 实际开发的做法是给padding值，这样更加准确。
例子：
<head><title>简单版小米侧边栏</title><style>a {/*转换为块级元素*/display:block;/*宽高*//* width: 230px; *//*因为左内边距的为30px，所以230-30=200*/width: 200px;height: 40px;/*背景颜色*/background-color: #55585a;/*字体大小*/font-size: 14px;/*字体颜色*/color: #fff;/*链接取消下划线*/text-decoration: none;/*首行缩进两厘米*//* text-indent: 2em; *//*这样的写法在实际开发中不准确*//*左内边距为30px*/padding-left: 30px;/*让文字居中*/line-height: 40px;}/*鼠标经过的颜色*/a:hover {background-color: #ff6700;}</style></head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 显示器</a><a href="#">家电 插线板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">电源 配件</a><a href="#">健康 儿童</a><a href="#">耳机 音箱</a><a href="#">生活 箱包</a></body>如何盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小？
例子：
<head><style>div {width: 300px;height: 100px;background-color: plum;}/*没右指定宽高，孩子和父亲一样宽*/div p {/*如果再写100%，此时会多出60像素*//* width: 100%; */padding: 30px;background-color: skyblue;}</style>
</head><body><div><p></p></div>
</body>外边距 (margin)
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin简写方式代表的意义跟padding完全一致。
例子：
<head><style>div {width: 200px;height: 200px;background-color: pink;}/* .one {margin-bottom: 20px;} */.two {margin-top: 20px;}</style>
</head><body><div class="one">1</div><div class="two">2</div>
</body>
展示图：
外边距典型运用
外边距可以让块级盒子 水平居中，但是必须满足两个条件:
1.盒子必须指定了宽度（width)。
2.盒子左右的外边距都设置为auto。
.header{width:960px; margin:0 auto;}
常见的写法，以下三种都可以：
- 只要左右为auto，就可以实现水平居中
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto; （上下为0，左右auto，用最多）
例子：
<head><style>.header {width: 900px;height: 200px;background-color: pink;margin: 0 auto;}</style>
</head><body><div class="header"></div>
</body>
注意：以上方法是让块元素水平居中，行内元素或行内元素水平居中给其父元素添加 text-align:center即可。
例子：
<head><style>.header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;}</style>
</head><body><div class="header"><span>好饿啊</span></div><div class="header"><img src="images/xie.jpg" alt=""></div>
</body>
展示图：
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况：
1.相邻块元素垂直外边距的合并
当上下相邻的两块元素（兄弟关系）相遇时，如果上面的元素有下外边距mrgin-bottom，下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。
取两值中的较大者这种现象被称为相邻元素垂直外边距的合并。
例子：
<head><style>.milk_cap, .cake{width: 200px;height: 200px;background-color: pink;}.milk_cap {margin-bottom: 100px;}.cake {margin-top: 200px;}/*下的外边距为100，上的外边距200，以大的为准，意思是100+200=200*/</style>
</head><body><div class="milk_cap">奶盖</div><div class="cake">蛋糕</div>
</body>
解决方案：
尽量给一个盒子添加 margin 值。
2.嵌套块元素垂值外边距的塌陷
对于两个嵌套的关系（父子关系）的块元素，父元素有上外边距同时子元素也有上边距。此时父元素会塌陷较大的外边距值。
塌陷的例子：
<head><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>
</head><body><div class="father"><div class="son"></div></div></body>解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow：hidden。
例子：
<head><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/*边框*//* border:1px solid red; *//*边框*//* border: 1px solid transparent; *//*内边距*//* padding: 1px; *//*可以为父元素添加 overflow：hidden。可以避免外边距合并或塌陷问题*/overflow: hidden;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>
</head><body><div class="father"><div class="son"></div></div>
</body>
还有其他的方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。
清除内外边距
网页元素很多都是带默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前 ，首先要清除网页元素的内外边距。
* {padding:0; /*清除内边距*/margin:0; /*清除外边距*/}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但转换为块级元素和行内块元素就可以了。
这篇关于CSS盒子模型： 盒子模型( Box Model)组成 ，边框， 表格的细线边框 ，内边距（padding) 边框会影响盒子的实际大小， 外边距 (margin) 外边距合并， 清除内外边距的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
