所谓盒子模型：就把html页面中的布局元素看作是一个矩形的盒子，也就是一个
盛装内容的容器。css 盒子模型本质上是一个盒子，封装周围的html元素，它包括
边框，外边距，内边距，和实际内容
边框
border-width border-style border-color
border-width :定义边框粗细，单位是px
border-style :边框的样式
border-color ：边框颜色
<style>
div {
border-style: solid; /* 实线边框*/
border-style: dashed; /*虚线边框*/
border-style: dotted /*点线边框*/
}
</style>
border-collapse: collapse;
- collapse是单词合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起
内边距
padding属性可以有一道四个值
image.png
- 添加
边框和内边距都会影响盒子的实际大小 如果保证盒子跟效果图大小保持
一致，则让width/height减去多出来的内外边距大小即可 - 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
- 如果想要在给盒子设置了宽高的情况下加内边距不影响盒子实际大小那么需要给盒子添加一个属性：
box-sizing:border-box
那么padding和border就不会撑大盒子（前提不会超过它的宽度）
外边距
margin属性用于设置外边距，即控制盒子与盒子之间的距离。
属性：
left;right;top;bottom
块级盒子水平居中
margin: 0 auto
上下外边距为0 左右外边距为居中
外边距垂直合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框
border:1px solid transparent; - 可以为父元素定义上内边距
padding: 1px - 可以为父元素加
overflow:hidden;
清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致。因此我们在布局中，首先要清除下网页元素的内外边距。
<style>
* {
margin: 0;
padding: 0;
}
</style>
/*这句话也是我们css中的第一行代码*/
去掉li前面的项目符号
list-style: none
