盒子模型
所有html元素都可以看做盒子，CSS盒模型本质上就是一个盒子，封装周围的html元素，包括：外边距、边框、内边距、内容 。我们看到的一张网页，就是一个一个盒子堆起来的。
我们学习盒子模型也就是说需要学习以下这些属性，来设置盒子模型：
- width 盒子内容宽度
- height 盒子内容高度
- padding 盒子的内边距（补白），盒子内容与盒子边框之间的距离，上下左右都有
padding- margin 盒子的外边距 盒子边框之外的距离，也分上右下左
- border 盒子的边框 盒子的边框也是有上边框，右边框，下边框，左边框
- background 盒子背景 背景默认情况下会填充内容和
padding
盒子模型的重点：
- 对于行内标签来说，width和height设置无效
- width属性默认值为auto，块元素的贪婪性和行内元素的懒惰性
- 对于行内元素而言，其宽度有内容本身决定，而其高度则有font-size决定
- 有些标签有默认的padding值，如ul、ol等。我们可以在body的属性中加入
*{padding:0}属性
对于块级元素，我们可以对它设置盒子模型的6大属性:
1、margin
外边距，即盒子与盒子之间的距离，分上、下、左、右四个方向的margin
margin在定义时有四种方式，分别是后面跟有一个、两个、三个、四个数值
margin：10px 10px 10px 10px;
一个数值：定义外边框
两个数值：分别定义上下、左右边框
三个数值：分别定义上、左右、下边框
四个数值：分别定义上、右、下、左边框
有些标签有默认的margin，我们可以在body的属性中加入*{margin:0}
margin对于块级标签在四个方向上都有作用，对于行内标签，只在水平方向上有效，在垂直方向上无效
margin重叠（塌陷）：
-
块级标签在垂直方向上会发生margin重叠现象
-
兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先
解决重叠：
display:inline;将块级元素变为行级元素- 浮动（浮动元素是不会塌陷的）
-
父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠
解决重叠：
- 给父元素设置border-top 不想要边框，使用transparent
- 给父元素设置padding-top
display:inline;将块级元素变为行级元素
-
margin可以设置负值。
2、border
设置盒子的边框
order 粗细 线型 颜色;
border:1px solid red;
border-top 上边框
border-righ 右边框
border-bottom 下边框
border-left 左边框
border-width 宽度
border-style 样式
border-color 颜色
border 在页面是占空间的
3、padding
设置所有内边距属性
- 内边距：内容与border之间的距离
- 一个数值：定义外边框
- 两个数值：分别定义上下、左右边框
- 三个数值：分别定义上、左右、下边框
- 四个数值：分别定义上、右、下、左边框
应用：调整内容与
border之间的间隙padding在页面是占空间的
4、content
内容的宽度和高度
- width:内容的宽度
- height：内容的高度
- 块级标签可以设置宽度和高度，行内标签不能设置宽度和高度
- 行内标签它的宽度由内容决定，高度由font-size决定
- width和height可以设置百分比，该百分比是父元素的百分比。
5、background
设置盒子的背景
- background-color:设置盒子的背景颜色
- background-image:设置盒子背景为图片
- 默认水平和垂直方向都会平铺
- 如果空间不足，图片也会显示，只是显示不完整
- url后面的路径引号可加可不加
- 背景图片默认会填充border,padding,content
- background-repeat:设置是否及如何重复背景图像
- background-position:设置背景图像的起始位置
- background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
