盒子模型

介绍：

在前端中所有的元素也都可以称为盒子，因为元素可以有大小，需要格外注意的是盒子在页面中所占据的位置问题

元素占据的页面大小=元素的宽高+边框线大小+外边距+内边距

边框线（border）

属性名	描述
border-width	设置边框线宽度
border-style	设置边框线样式
border-color	设置边框线颜色

背景样式（background）

属性名	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片的位置
background-size	设置背景图片的大小
background-repeat	设置背景图片是否重复
background-attachment	设置背景图片相对浏览器的定位位置

div{
	/*去图片中重复的元素*/
	 background-url(./img.jpg)no-repeat 
}

外边距（margin）、内边距（padding）

属性名	描述
margin（padding）-left	距离左侧的距离
margin（padding）-right	距离右侧的距离
margin（padding）-top	距离顶部的距离
margin（padding）-bottom	距离底部的距离

当对父元素中的第一个子元素使用margin-top时，会出现margin塌陷的问题（父元素会随着第一个子元素整体下沉）。

display属性

属性名	描述
display:none;	隐藏元素
display:block;	将元素变为块元素
display:inline;	将元素变为行元素
display:inline-block;	将元素变为行内块元素

浮动（float）

float:left/right（向左、右浮动）
1.浮动后的元素，不论其本身是什么类型的框，都会变成块元素
2.浮动的元素在同一行没有足够的空间显示时，会自动换到下一行
3.浮动后的元素会遮挡下一个未浮动的元素的区域，但不遮挡内容

浮动处理的方式

语法：clear:left/right/both;

1.给浮动元素所在的父元素设置固定高度 常用，但父元素固定，维护修改不方便

2.给父元素的末尾添加一个空标签，指定clear属性 不常用，页面中会多出很多空标签，影响浏览器的解析速度

3.给父元素设置样式overflow，对区域进行剪切处理 不常用，剪切后页面中的内容会丢失

4.给父元素添加伪类样式 常用方式（推荐）

定位（position）

属性名	描述
position:relative;	相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
position:absolute;	绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器）
position:fixed;	相对浏览器进行绝对定位