十.盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。所有HTML元素可以看作盒子，盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。一个元素实际的宽由content内容宽高+padding内边距+border边框+margin外边距组成。
下面的图片说明了盒子模型(Box Model)：
1.content：width设内容宽，height设内容高。
2.border：设边框，下面介绍设边框的几种方法：
一般设法：border: 10px dotted red;即尺寸，线条，线条。
| 线条 | 解释 |
| dotted | 点状线 |
| dashed | 虚线 |
| solid | 实线 |
单独设：border-bottom:10px solid yellow;
| 边框线 | 解释 |
| border-top | 上边框线 |
| border-bottom | 下边框线 |
| border-left | 左边框线 |
| border-right | 右边框线 |
拆分设：
3.padding:即内边距
边框到content内容的距离
设置方法：
第一种：
| 边框线 | 解释 |
| padding-top | 上边距 |
| padding-right | 右边距 |
| bpadding-left | 左边距 |
| padding-bottom | 右边距 |
第二种：
padding:50px;
四周内边距为50px
第三种：
padding:50px 100px;
上下内边距为50px 左右内边距为100px
第四种：
padding:10px 20px 30px 40px;
上边距为10px右边距为20px下边距为30px左边距为40px
4.margin:即外边距
设置方法：
第一种：
| 边框线 | 解释 |
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-left | 左外边距 |
| margin-bottom | 右外边距 |
第二种：
margin:100px;
上下左右外间距都是100px
第三种：
margin:50px 100px;
上下外边距为50px，左右外边距为100px；
第三种：
margin:50px 100px 150px;
上外边距为50px, 左右外边距100px,为下外边距150px
第四种：
margin:50px 100px 150px 200px;
上外边距为50px,右外边距为100px,下外边距为150px,左外边距为200px
注意事项：
垂直方向的margin会重叠取最大值
行内元素只有margin左右，没有margin上下
width与height对行内元素不启用
十一.背景
| 属性名 | 解释 |
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 背景重复 |
| background-position | 背景位置 |
1.background-color
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 100px;height: 100px; background-color: gold; } </style> </head> <body> <div> </div> </body> </html>
2.background-image
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 100px;height: 100px; background-image: url(images/icon-r.png); } </style> </head> <body> <div> 你好 </div> </body> </html>
注意：
这里没有设置图片重复，该图片在100*100容器的x轴和y轴一直重复
3.background-repeat
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div1 { width: 100px; height: 100px; background-image: url(images/icon-r.png); background-repeat: no-repeat; } .div2 { width: 100px; height: 100px; background-image: url(images/icon-r.png); background-repeat: repeat-x; } .div3 { width: 100px; height: 100px; background-image: url(images/icon-r.png); background-repeat: repeat-y; } </style> </head> <body> <div class="div1"> div1 </div> <div class="div2"> div2 </div> <div class="div3"> div3 </div> </body> </html>
注意：
这里第一个div设置的是norepeat，即背景图片只在100100的容器内只重复一次
第二个div设置的是repeat-x，即背景在x轴上重复
第二个div设置的是repeat-y，即背景在y轴上重复
默认不设置即为在100100容器的x轴和y轴一直重复
4.background-position
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div1 { width: 100px; height: 100px; background-image: url(images/icon-r.png); background-repeat: no-repeat; background-position: left; background-color: #3B639F; } .div2 { width: 100px; height: 100px; background-image: url(images/icon-r.png); background-repeat: no-repeat; background-position: right top; background-color: #55ffff; } .div3 { width: 100px; height: 100px; background-image: url(images/icon-r.png); background-repeat: no-repeat; background-position: center center; background-color: #00ff7f; } .div4 { width: 100px; height: 100px; background-image: url(images/icon-r.png); background-repeat: no-repeat; background-color: #ffff7f; background-position: 10px 70px; } </style> </head> <body> <div class="div1"> div1 </div> <div class="div2"> div2 </div> <div class="div3"> div3 </div> <div class="div4"> div4 </div> </body> </html>
注意：
第一个div的背景图片设置的水平方向上靠左，垂直方向上默认居中
第二个div的背景图片设置的水平方向上靠右，垂直方向上考上
第三个div的背景图片设置的水平方向上居中，垂直方向上居中
第四个div的背景图片设置的水平方向上距左边10px，垂直方向上距上边70px
5.背景简写：
background: gold url() no-repeat center center
颜色 地址 重复 水平对齐 垂直对齐
十二.三种元素与浮动
首先说明html中任意一个元素都属于行内元素，块元素，或行内块中的一种，而在css中可以通过display改变元素的属性。下面介绍三种元素：
1.行内元素：
常见的有:span a em i b em big small strong sub sup textarea u select label
默认属性：display:inline;
规则：只能设置margin左右，不能设置宽高和margin上下的水平排列
2.块元素：
常见的有:p h1~h6 div dl dd dt form hr ol ul li table
默认属性：display:block;
规则：可以设置宽高和margin的垂直排列
3.行内块元素：
常见的有:img input
默认属性：display:inline-block;
规则：可以设置宽高和margin的水平排列
下面说浮动：
1.设置方法：float:left;或者float:right;
2.设置浮动后产生的结果：
会使该元素脱离文档流
父元素和兄弟元素都会认为该元素不存储兄弟元素会占据其位置，文本会留处其位置
多个float元素默认会水平排列，父元素宽度如果容不下，则会换行
如果子元素都浮动了，那么父元素的高度也就没有了
行内元素设置浮动后会变成块元素(原因是行内元素被设置浮动后脱离文档流)
清除浮动的方法：
1.给父元素手动的设置一个高度
2.给父元素设一个overflow:hidden
3.把父元素的最后一个元素设置不浮动再加上clear:both;
关于浮动，会经常遇到，这里会单独出一个关于浮动的详细解决方案。
未完待续…
