1.4 浮动、伪类和背景

浮动、伪类和背景

一、浮动（重要）

float: none/left/right

应用场景：让纵向排列的元素横向排列。

特点：

• 如果需要元素横向排列的话，都要添加浮动才可以在同一行显示。
• 加了浮动属性的元素会脱离文档流，后面的元素会占据原来浮动元素的位置，产生重叠的情况，遮挡住后面的元素，但是不遮挡后面的文字。
• 当浮动的元素宽度大于外层容器宽度时，放不下的元素会调到下一行。

注意：img引入的图片会自带底部大约3px的留白

img{display:block}

切片选中：ctrl+alt+shift+s

隐藏切片： ctrl+h

二、伪类选择器

1、超链接对应的选择器：link{} ------ 超链接访问之前，只针对超链接

2、超链接对应的选择器：visited{} ------超链接访问之后，只针对超链接

3、：hover{} ----划过，针对所有的元素（常用）

4、：active{} ----鼠标按下，针对所有元素

注意：

• 如果四种状态同时针对超链接的话，顺序必须是 爱(love)恨(hate)法则
• 权重值和类选择器的一样：10

<style type="text/css">
			a:link{
				color: red;
			}
			a:visited{
				color: #00D055;
			}
			a:hover{
				color: #0000FF;
			}
			
			a:active{
				color: #AA00FF;
			}

三、背景属性

1、背景色：background-color：颜色值；默认值透明 transparent

2、背景图：background-image：url（图片路径）

3、背景图重复（平铺）background-repeat:repeat（重复）/repeat-x（横向重复）/repeat-y(纵向重复)/no-repeat(不重复)

background-repeat:no-repeat;
background-repeat: repeat-y; 

4、背景图的位置：background-position：水平 垂直；

(1)数值px

(2)关键字 水平：left/center/right

​ 垂直：top/center/bottom

(3)只写一个值，另一个方向的位置默认居中

 background-position: center center;
 background-position: 50px 50px; 
 background-position: 100px;

复合写法：background:颜色值 背景图路径 背景图重复 背景图的位置；

• 顺序不固定
• 可以只有颜色或只有图

5、背景图和img引入的图片的区别：

• 背景图不占位置，内容可以显示在图片身上

• img占位置

6、雪碧图的使用

​ 图片整合/雪碧图/精灵图：把很多小图片放在一个大图上，这个大图就叫做雪碧图
雪碧图的使用：
​ (1)用背景图引入
​ (2)主要结合背景图的位置属性 background-position