一、border 边框
1.语法：
border:border-widthborder:border-styleborder:border-color
2.常用边框样式
3.指定边框
可以给四个边框单独指定
4.表格的细线边框
table{ border-collapse:collapse; }
border-collapse:collapse;
可以使相邻边框合并在一起。
<style>table {width: 500px;height: 300px;border: 1px solid red;}td {border: 1px solid red;text-align: center;}table, td {border-collapse: collapse; /*合并相邻边框*/}</style>
二、padding 内边框
padding属性用于设置内边距。 是指边框与内容之间的距离。
1.设置
2.简写
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
内边距产生的问题
会撑大原来的盒子
解决方法：设置盒子宽高，减去相应的内边距的值，维持盒子原有的大小
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子
三、margin 外边框
1.外边距
margin属性用于设置外边距。 控制盒子和盒子之间的距离。
margin值的简写 与 padding 完全相同。
2.块级盒子如何水平居中？
盒子必须指定了宽度（width）然后给左右的外边距都设置为auto.header{width:960px; margin:0 auto;}
常见的写法
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;
3.文字居中和盒子居中区别
盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐块级盒子水平居中 左右margin 改为 autotext-align: center; /* 文字 行内元素 行内块元素水平居中 */margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
4.插入图片和背景图片区别
插入图片 padding margin 更改大小用 width 和 height插入背景图片 background-position 更改位置 用 background-positionimg {width: 200px;/* 插入图片更改大小 width 和 height */height: 210px;margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */margin-left: 50px; /* 插入当图片也是一个盒子 */}div {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no-repeat;background-position: 30px 50px; /* 背景图片更改位置 用 background-position */}
5. 如何清除元素的默认内外边距⭐
代码：
* {padding:0; /* 清除内边距 */margin:0;/* 清除外边距 */}
注意：
行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。
如果觉得《border边框 padding内边框 margin外边框》对你有帮助，请点赞、收藏，并留下你的观点哦！
