十.盒子模型
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 | 右边框线 |
拆分设：
| 属性 | 边框线位置 | 边框线位置 | 边框线位置 | 边框线位置 | 边框线位置 |
|---|---|---|---|---|---|
| 边框线样式 | top | bottom | left | right | |
| 边框线样式 | style | border-top-style | border-bottom-style | border-left-style | border-right-style |
| 边框线样式 | color | border-top-color | border-bottom-color | border-left-color | border-right-color |
| 边框线样式 | width | border-top-width | border-bottom-width | border-left-width | border-right-width |
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;
关于浮动，会经常遇到，这里会单独出一个关于浮动的详细解决方案。
