css盒子模型

盒子模型的元素的内容
1.盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组 成。
2.盒子里面的文字和图片等元素是 内容区域
3.盒子的厚度 我们成为 盒子的边框
4.盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
5.盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

盒子边框：
边框粗细：border-width
边框样式：border-style
边框颜色：border-color
边框样式:
None:默认值 solid：单实线 dashed:虚线 dotted：边框为点线
合并相邻的边框：border-collapse: collapse;

padding内边距：
左内边距：padding-left 右内边距：padding-right
上边距：padding-top 下边距：padding-bottom
padding值的个数 表达意思 ：
1个值 padding：上下左右内边距;
2个值 padding: 上下内边距 左右内边距 ；
3个值 padding：上内边距 左右内边距 下内边距；
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；

margin ：外边距
左外边距：margin-left 右外边距：margin-left
上边距：margin-top 下边距：margin-bottom

如何使用块级盒子水平居中：
margin-left：auto margin-right：auto
Margin：auto margin：0 auto
背景图片更改位置：background-position: 30px 50px;
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素

元素之间是如何转换的：
1.变为块级元素（独占一行，可控）：display: block;
2.变为行内元素（不会独占一行，不可控）：display: inline;
3.变为行内块元素（可设置宽高，margin,padding）：display: inline-block;

常用的元素：
常用的块级元素有：div , p , h1~h6 , ol , ul , dl , form , table , address …
常用的行内元素有：span , br , a , em , b , i , strong
常用的行内元素有：img , input , td
background属性：Background-color background-image background-repeat background-position

盒子3种机制：普通流，浮动，定位。
浮动的属性值：float：none float：left float：right；
清除浮动的方法：clear：left clear：right clear：both（清除左右浮动）
额外标签法 父级after伪元素 overflow：hidden 父级双伪元素

盒子阴影：
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
box-shadow: 0（垂直阴影） 15px（模糊距离） 30px（阴影尺寸） rgba(0, 0, 0, .4);（阴影颜色）