背景
background-color:背景颜色。
background-image:用于设置背景图片。
注意：如果同时设置背景颜色(background-color)
和背景图片(background-image)，背景颜色会被背景图片覆盖。该属性需要使用url()函数指定图片地址，图片的地址既可以是相对的，也可以是绝对的。
background-repeat:用于设置对象的背景图片是否平铺(重复显示)。
在指定该属性之前，必须先指定背景图片(background-image)
该属性有4个值。
repeat(纵横同时重复)no-repeat(不重复)repeat-x(x轴方向重复)repeat-y(y轴方向重复)
background-position:用于控制背景图片的位置。
background-position有5个关键字值分别是：
- top,left,bottom,right,center。
可以通过任意两个关键字组合来定位。
也可以通过百分比来定位。
- 例如：background-position:
50% 50%.
第一个百分比对应横坐标，第二个百分比对应纵坐标。
background-attachment:设置背景图片是随对象内容滚动还是固定。
- 在指定该属性之前，必须先指定背景图片。
该属性的两个值：
- scroll(默认)
- fixed(固定)
background:这是一个复合属性，可以同时设置背景颜色、背景图片、背景重复、背景位置等。
CSS3还可以给元素背景添加多个背景图片。
示例
- body
```css<body> <div class="divcolor"></div> <div class="divone"></div> <div class="divtwo"></div> <div class="divone"></div> <div id="divfive"></div> </body>
.divcolor{
width:800px;
height:30px;
background-color:#900;
margin:0px auto;
}
.divone {
width: 800px;
height: 400px;
border: 3px solid #900;
margin:20px auto;
background-image:url(image/flower.gif),background-repeat:repeat-y, repeat-x, repeat;url(image/haha.png), url(image/backgroundimage.jpg);
background-position:center top, left center, left top;
}
.divtwo {
width: 800px;
height: 400px;
border: 3px solid #900;
margin:20px auto;
background-image:url(image/backgroundimage.jpg);
background-attachment:fixed;
}
divfive {
width: 800px; height: 400px; border: 3px solid #900; margin:20px auto; background:#900 url(image/flower.gif) repeat-x center; }
# 浮动和定位 ## 浮动 **在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。** 浮动(float)的三个属性值： - `left(左浮动)` - `right(右浮动)` - `none` 浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后， 原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。 > **如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。** - 浮动(float)的三个属性值：left(左浮动),right(右浮动),none. - clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both --- ### 示例1 - body ```html <body> <div class="divone"></div> <div class="divtwo"></div> <div class="divthree"></div> </body> - css
````css
div {
width:300px;
height:200px;
}
.divone{
float:left;
background:#900;
}
.divtwo{
float:left;
background:#BD19D3;
}
.divthree{
float:left;
background:#6D7DDC;
}
### 示例2 - body ```html <!doctype html> <html> <head> <meta charset="utf-8"> <title>float 应用----多栏布局</title> </head> <body> <div class="header"></div> <div class="content"> <div class="content-one"></div> <div class="content-two"></div> <div class="content-three"></div> </div> <div class="footer"></div> </body> </html> - css
.*{ margin:0; padding:0; } .header{ width:900px; height:80px; margin:0 auto; background:#DF999B; } .content{ width:900px; height:300px; margin:0 auto; background:#E42DE9; } .footer{ width:900px; height:80px; margin:0 auto; background:#DF999B; } .content-one{ width:300px; height:300px; background-color:#5936EB; float:left; } .content-two{ width:300px; height:300px; background-color:#0FE8E5; float:left; } .content-three{ width:300px; height:300px; background-color:#15E720; float:left; }示例3
- html
```html
<!doctype html>
- css ```css @charset "utf-8"; /* CSS Document */ /*取消所有标签默认的内外边距*/ *{ margin:0; padding:0; } a{ text-decoration:none; color:#000; font-size:20px; display:block; } .nav{ width:800px; height:40px; background:#eee ; margin:10px auto; } ul li{ list-style:none; line-height:40px; float:left; } ul li a{ padding:0 10px; } ul li:hover a{ background:#900; color:#fff; } position定位（核心）
我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。
三大属性：position属性，display属性，float属性。
- position 属性控制页面上元素间的位置关系。
- display 属性控制页面元素是否显示或者是堆叠还是并排显示。
- float 属性提供控制方法。
- 通过float这种控制方法，可以实现多栏布局，导航菜单等等。
position属性是干嘛用的？怎么用？有哪些属性值？
- position属性控制页面上元素间的位置关系，也就是排版。
- 怎么用？要知道怎么用就要先了解position的属性值。
- 属性值：
- static（默认状态）：页面元素默认的定位。
- relative（相对定位）
relative相对定位，相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）
- absolute（绝对定位）
absolute绝对定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）。
- fixed（固定定位）
fixed固定定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。
想一想，我们的absolute绝对定位，它的定位点在哪里？
定位点：浏览器的左上角。能不能改变它的定位点？
答案是肯定的。
用relative和absolute配合使用就能改变我们的定位点。
示例1
<!doctype html> <html> <head> <meta charset="utf-8"> <title>回到顶部</title> <style> a{ background:url(image/top_bg.png); width:40px; height:80px; display:block; position:fixed; top:540px; left:1310px; } </style> </head> <body> <div class="one"> <img src="image/天猫tmall.com.png"/> </div> <a href="#"></a> </body> </html> 示例2
<!doctype html> <html> <head> <meta charset="utf-8"> <title> position---fixed固定定位</title> <style> * { margin: 0px; padding: 0px; } div { width: 800px; height: 200px; margin: 10px auto; } #two{ position:fixed; top:100px; left:30px; } </style> </head> <body> <div style="background:#900;">红色div</div> <div id="two" style="background:#F90;">橙色</div> <div style="background:#FF0;">黄色div</div> <div style="background:#0F0;">绿色div</div> <div style="background:#00C;">蓝色div</div> <div style="background:#90F;">紫色div</div> </body> </html> 示例3
<!doctype html> <html> <head> <meta charset="utf-8"> <title>position--absolute 绝对定位</title> <style> *{ margin:0; padding:0; } .one{ width:300px; height:300px; margin:100px; background:#900; } .two{ width:200px; height:200px; background:#000; position: absolute; top: 0px; left: 100px; /*position:absolute; top:0px; left:0px;*/ } /*.three{ width:800px; height:300px; margin-left:200px; background:#E721D3; position:relative; } .four{ width:200px; height:200px; background:#E9F42D; position:absolute; top:20px; left:20px; } .five{ width:800px; height:300px; margin-left:200px; background: #17D763; }*/ </style> </head> <body> <div class="one"></div> <div class="two"></div> <!-- <div class="three"> <div class="four"></div> </div> <div class="five"></div>--> </body> </html> 示例4
<!doctype html> <html> <head> <meta charset="utf-8"> <title>position---relative相对定位</title> <style type="text/css"> *{ margin:0; padding:0; } .one{ width:300px; height:300px; background:#900; position:relative;/*设置相对定位*/ top:20px;/*向下偏移20px*/ left:20px;/*向左偏移20px*/ } </style> </head> <body> <div class="one"></div> </body> </html> 示例5
<!doctype html> <html> <head> <meta charset="utf-8"> <title>position 定位</title> <style type="text/css"> *{ margin:0; padding:0; } .one{ width:300px; height:300px; background:#900; position:relative; top:20px; left:20px; } .two{ width:400px; height:200px; background:#000; position:absolute; top:200px; left:100px; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div></div> </body> </html> #
清除浮动
clear清除浮动
float浮动这种控制方法，可以实现多栏布局，导航栏等功能。
但是float不是万能的，她也有她的副作用。
副作用是什么？被设置了float的元素后面的元素，会在空间允许的情况下，向上提升到浮动元素平起平坐的位置。
如果我并不想紧跟在我后面的元素浮动，也就是让它自己停留在原来的位置上，不跟着浮动，那么我们就对该元素设置clear（清除浮动）属性。
- clear（清除浮动）的三个属性值：
left（清除左侧浮动）,right,both。
```html
<!doctype html>
```
