标签是矩形的 那这个矩形的标签就是一个盒子，一张网页，就是由一个个盒子堆起来的。

属性

• width 盒子的内容的宽度
• height 盒子的内容的高度
• border 盒子的边框 也分上边框、右边框、下边框、左边框。
• padding 盒子的内边距（补白），是盒子内容与边框之间的距离，上右下左都有padding。
• margin 盒子的外边距 盒子边框之外的距离，也分上右下左。
  background 盒子背景 背景默认情况下会填充内容和padding

在标准盒模型中（以块级元素为例）：
水平方向上占据的总宽度：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
垂直方向上占据的总高度：margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

width和height对于块元素和行内块元素，表示内容区域；对于行内元素，width和height无效。width的默认值是auto，auto对块元素是贪婪性（即无限大），对行内元素是懒惰性（即无限小，只有内容大小）。
实际上，对于行内元素而言，其宽度由其内容决定，其高度则由font-size决定。width和height可以设置百分比，相比父元素的width和height而言。
border的特性和设置：border有三个方面。

• 边框大小（粗细） border-width 用具体的像素 5px；还有表示粗细的英文，不建议使用。

• 边框的样式 border-style
  solid 实线 dotted 点画线 dashed 虚线
  double：定义边框为双边框线 groove：定义边框为3D凹槽
  ridge：定义为边框3D凸槽 inset：定义边框为3D凹边
  outset 定义边框为3D凸边 hidden：隐蔽边框 IE不支持 。

• 边框的颜色 border-color 颜色英文名，十六进制，rgb函数 而border可以简写的，是以上三个的简写。三个属性没有固定的顺序，属性之间使用空格隔开。他还有四个方向的子属性，如border-top-style。

在border中的三个属性中，其实它们都有默认值，

• border-width，默认是medium，一般是3px
• boder-color，默认是字体的颜色
• border-style，默认是none

用border实现设置三角形
“div{ border：10px solid transparent；
border-top：10px soild black； }”

padding的特性及设置 padding，表示内边距，又或者叫补白。所表示的区域是边框到内容的那块空间。

• padding有四个方向上的子属性：
• padding-top、padding-right、padding-bottom、padding-left
• 具体写法有几种：
• 单独的设置某一个子属性；
• padding：一个值，四边相同；
• 两个值，第一个表示上下的，第二个表示左右的；
• 三个值，第一个表示上的，第二个表示左右的，第三个表示下的；
• 四个值，分别是上、右、下、左。
  注意padding可以使用百分比，是相对于父元素的width值，一般在响应式web中使用。 有些标签有默认的padding值，如ul、ol等。 对于行内元素，padding在垂直方向上不影响行高。

在开发页面的时候，为了保证所有的这些标签都有统一的一个padidng值，采取一刀切 *{padding：0；}

• 对于padding而言，如果是行内元素，它在垂直方向上不影响行高。

margin的特性及设置 margin表示边界，外边距，当前元素和另一个元素之间的距离，是在border之外的。

• margin有四个方向上的子属性：
• margin-top、margin-right、margin-bottom、margin-left
• 具体写法有几种：
• 单独的设置某一个子属性；
• margin：一个值，四边相同；
• 两个值，第一个表示上下的，第二个表示左右的；
• 三个值，第一个表示上的，第二个表示左右的，第三个表示下的；
• 四个值，分别是上、右、下、左。
  注意
• margin可以使用百分比，是相对于父元素的width值。
• 有些标签有默认的margin值，如body、h1~h6、p、ul、ol、dl等
• 对于行内元素，margin在垂直方向上无效。
• margin的auto设置；实现元素的水平居中 margin：20px auto；
• 块状元素在垂直方向上有重叠现象。
• margin可以使用负值。
• 清除页面默认的margin用 {margin：0；}

塌陷（重叠现象）分两种

兄弟关系的垂直重叠和父子关系的重叠

• 兄弟元素之间的重叠：上盒子的margin-bottom和下盒子的margin-top会重叠 ---->取大优先 解决方法：把男标签（块级元素）变成非男标签 设置浮动 只设置一个盒子的margin。
• 父子（第一个子或最后一个子）元素之间的重叠：父元素的margin-top 和子元素的margin-top --->取大优先 父元素的margin-bottom 与 子元素的 margin-bottom ---->取大优先 解决方法：把男标签变成非男标签， 设置 border padding

background深入（重难点）5个属性

• background-color 颜色值 定义背景颜色
• background-image url/none 定义元素的背景图片
• background-repeat repeat/no-repeat/repeat-x/repeat-y 定义背景图片是否以及如何铺排
• background-position 关键字/长度值/百分比 定义背景图片的位置
• background-attachment scroll/fixed 定义背景图片是否随元素滚动还是固定

background-position
作用：用来设置背景图片的位置。
格式：background-position：position-x position-y
具体在设置的时候，有如下三种设置方式：

• 使用关键字：top、left、right、bottom、
• 使用百分比：0%、50%、100%
• 使用像素值：25px、100px
  除了像素值，还可以使用关键字
• 水平方向：left、center、right
• 垂直方向：top、center、bottom
  注意：当我们使用关键字的时候，比如使用top，它的意思是元素的顶端和背景图片的顶端对齐。比如使用center，其含义是元素的中心点和背景图片的中心点是对齐的。

关于百分比的使用

0%，水平方向相当于 left，垂直方向相当于top
50%，水平方向相当于center，垂直方向相当于center 100%，水平方向相当于right，垂直方向相当于bottom 友情提示：background-position理解起来确实有点困难，一定要自己写对应代码，分析定位的过程，并加以理解。

background-attachment

作用：定义背景图片是随元素滚动还是固定

有两个值：

scroll，表示背景图片会随着滚动条的滚动而滚动
fixed，固定不变，
注意细节：

background中的背景颜色，默认值是transparent，透明的。
background所覆盖的区域，包括padding和内容区域。（border先放一下，应用比较少）
在设置背景的时候，很容易覆盖前面的设置。
background的顺序有要求，按照顺序来写。