思维导图
文章目录
思维导图1：边框2:内边距3：外边距外边距合并1. 相邻块元素垂直外边距的合并2. 嵌套块元素垂直外边距的塌陷所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容
1：边框
border：border-width | border-style | border-color；
div {/* 实线 虚线 点线 */border-style: solid;border-style: dashed;border-style: dotted;}
注：
○也可以单独加上下左右的边框
○边框会影响到盒子的大小
○细线边框：border-collapse: collapse;（相邻的边框合并在一起）
【叽叽歪歪】举个例子吧
<style>table {border-collapse: collapse;}table,td {border: 1px solid black;}</style>
<body><div><table><tr><td>你好吗</td><td>你好吗</td><td>你好吗</td></tr><tr><td>你好吗</td><td>你好吗</td><td>你好吗</td></tr></table></div></body>
以后设置表格，就不用必须在table里面加border，cellpadding=“20px” cellspacing=“0”…
2：边框的复合写法(举例：宽窄为1px的红色的实线)
border：1px solid red;
2:内边距
padding 属性用于设置内边距，即边框与内容之间的距离
四种写法：
注：
当我们给盒子指定 padding 值之后，发生了 2 件事情：
内容和边框有了距离，添加了内边距。padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
3：外边距
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
复合写法和padding一致
❤
外边距的几种应用
让盒子水平居中
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
width:1220px;margin:0 auto;
常见的写法，以下三种都可以：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注：：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可， line-height的值等于盒子height的值就可以垂直居中。
外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:
相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷
1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
注：尽量只给一个盒子添加 margin 值
2. 嵌套块元素垂直外边距的塌陷
【叽叽歪歪】概念好奇的话先自己去查一下，想自己像上面一个画图解释，但没描述出来。
解决方案：
给父盒子加边框，设成透明色给父盒子设置内边距，但不可以是0px，给盒子内容减加的内边距父盒子设置overflow：hidden；
以后写代码，先清除内外边距：
* {padding: 0;margin: 0;}
