CSS（4）浮动/伪类/背景

一、浮动

1.1 浮动元素双向贴边

1	<div class="box">
2		<p>1</p>
3		<p class="fr">2</p>
4		<p>3</p>
5		<p class="fr">4</p>
6		<p>5</p>
7		<p class="fr">6</p>
8		<p>7</p>
9	</div>
 

1.2 浮动元素没有margin塌陷
上下两个同级排列浮动的元素，上盒子有一个下margin，下盒子有一个上margin，他们的距离是margin之和。没有垂直方向margin塌陷。

1	<div class="box">
2		<p class="no1">1</p>
3		<p class="no2">2</p>
4	</div>

1.3浮动元素让出标准流的位置
两个同级盒子，第一个盒子浮动，第二个盒子不浮动，结果浮动的元素让出标准流的位置，视觉上形成了“压盖效果”。

1	.box1 {
2		/*浮动脱离标准流*/
3		float: left;
4		width: 100px;
5		height: 100px;
6		background-color: lightblue;
7	}
8	.box2 {
9		/*不写浮动就是标准流*/
10		width: 200px;
11		height: 200px;
12		background-color: pink;	}

压盖效果不用浮动，而是用定位实现。
总结：同级元素要浮动都浮动，要不浮动都不浮动。

1.4字围效果
浮动元素会压盖住标准流，但是文字不会被压盖住，而是在浮动元素一周显示。

二、浮动存在的问题

1浮动的元素不能撑高父盒子的高度（高度自适应）
2 浮动的元素影响后面浮动的元素。

1	.box {
2		width: 600px;
3		/*不给父盒子添加高度*/
4		border: 10px solid #000;
5		margin-bottom: 10px;
6	}
7	.box p {
8		float: left;
9		width: 100px;
10		height: 100px;
11		background-color: lightblue;
12		margin-right: 10px;
13	}
14	<div class="box">
15		<p>1</p>
16		<p>2</p>
17		<p>3</p>
18		<p>4</p>
19	</div>
20	<div class="box">
21		<p>1</p>
22		<p>2</p>
23		<p>3</p>
24		<p>4</p>
25	</div>

2.1 直接给父盒子添加高度

解决：对后面浮动元素的影响
没解决：高度自适应

2.2 clear属性
clear: 清除浮动的影响
属性值：left (清除左浮动的影响)
right(清除右浮动的影响)
both(清除左右浮动的影响)

给父盒子添加clear属性

1	.box2 {
2		/*box上面4对后面1造成影响    添加clear*/
3		clear: both;	}
 

解决：对后面浮动元素的影响
没解决：高度自适应

2.3 外墙法
在两个大盒子（父盒子）之间添加一堵“有高度”“清除了浮动”的墙

解决：对后面的影响（height:10px视觉上有10px间隔）
没解决：高度自适应

2.4 内墙法
在所有浮动元素的最后添加一堵清除了浮动的墙。

1	<div class="box">
2		<p>1</p>
3		<p>2</p>
4		<p>3</p>
5		<p>4</p>
6		<div class="cl"></div>
7	</div>
8	<div class="box">
9		<p>1</p>
10		<p>2</p>
11		<p>3</p>
12		<p>4</p>
13		<div class="cl"></div>
14	</div>

解决：问题都解决了
所有问题都解决了，但是我们不使用这种办法，给网页结构增加了很多无意义的标签，增大网页加载。

2.5 overflow属性
overflow: 溢出隐藏处理方法
auto: 溢出滚动，当内容超过盒子高度时，自动出现滚动条，拉动滚动滚动条可以查看全部内容。

hidden: 溢出隐藏(当内容超过盒子高度时，超出部分直接隐藏)
隐藏的是border之外的内容，对于下padding不隐藏。

浮动解决：给父盒子添加overflow:hidden可以完美的结果所有的问题。

1	<div class="box"> //overflow:hidden
2		<p>1</p>
3		<p>2</p>
4		<p>3</p>
5		<p>4</p>
6	</div>
7	<div class="box"> //overflow:hidden
8		<p>1</p>
9		<p>2</p>
10		<p>3</p>
11		<p>4</p>
12	</div>
 

overflow:hidden两个引申含义（给父盒子添加overflow:hidden）
1强制让父盒子检测内部子元素高度，并且将检测到的高度撑高自身。
2 强制让父盒子管理住浮动的子盒子，不让子盒子影响其他浮动的元素。

总结：同级元素要浮动都浮动，子盒子浮动，父盒子尽量添加overflow:hidden。

三、a标签

3.1 伪类
a标签有4个特殊属性和状态，根据用户的不同行为，显示不同的状态。
a:link a标签未点击前状态
a:visited a标签点击后的状态
a:hover a标签悬停状态
a:active a标签激活状态

1	a:link {
2		color: red;
3	}
4	a:visited {
5		color: pink;
6	}
7	a:hover {
8		color: blue;
9	}
10	a:active {
11		color: green;}

伪类和类.box区别：
伪类和类一样也有权重，和类权重相同。
伪类样式不能直接加载，只有用户触发相应的行为，a标签才能渲染对应的效果；
.box类样式直接渲染在浏览器不需要用户干预。

3.2 4个伪类顺序不能颠倒
a:link a:visited a:hover a:active(love hate)
4个伪类顺序不能颠倒，颠倒之后不能正常渲染效果。

1	/*错误顺序*/
2	a:visited {
3		color: blue;
4	}
5	a:hover {
6		color: red;
7	}
8	a:active {
9		color: green;
10	}
11	a:link {
12		color: orange;13	}

因为4个伪类也有权重，书写顺序错误，后面的会层叠掉之前。
最终a:link将之前的伪类都层叠掉。

3.3 应用
在使用a标签一般只需要渲染a:hover，其他的样式和a标签相同。
a标签设置样式属性都将加载在4个伪类身上。
有特殊样式再用伪类层叠（只需要将特殊样式书写在伪类选择器上）

a标签是行内元素，想设置宽高，必须转块。a标签颜色和下划线必须单独设置，不能从祖先继承
按钮：

1	/*a标签样式可以渲染在4个伪类身上*/
2	a {
3		/*a标签是行内元素 想设置宽高必须转块*/
4		display: block;
5		width: 200px;
6		height: 80px;
7		background-color: lightblue;
8		/*块级元素水平居中*/
9		margin: 50px auto;
10		/*文字属性*/
11		font-size: 30px;
12		text-align: center;
13		line-height: 80px;
14	}
15	a:hover {
16		/*伪类只需要书写特殊样式*/
17		background-color: pink;
18		color: #fff;19	}
 

导航：

1	.nav ul li {
2		float: left;
3		width: 120px;
4		height: 40px;
5	}
6	.nav ul li a {
7		/*a转块*/
8		display: block;
9		height: 40px;
10		background-color: lightblue;
11		text-align: center;
12		line-height: 40px;
13	}
14	.nav ul li a:hover {
15		background-color: pink;
16		color: #fff;
17	}
18	/*当前选中哪一个nav 特殊效果 表示类名轮换cur    active    selected*/
19	.nav ul li.cur a {
20		background-color: pink;
21		color: #fff;22	}
 

四、background

4.1 background-color
背景颜色。
除了之前学习三种的色值表示法，还可以使用rgba()透明度

1	background-color: rgba(255,0,0,.5);
 

4.2 background-image
背景图。（不能撑开盒子的大小）
url:相对绝对路径。
当背景图小于盒子大小时，默认将盒子铺满。

1	background-image: url(images/in_12.png);
 

背景渲染区域：border以内，padding可以渲染背景。
背景图渲染在背景色之上。

1	background-image: url(images/in_12.png);
2	background-color: green;
 

4.3 background-repeat
设置背景重复
默认值：重复repeat
不重复：（只渲染一次背景图）no-repeat
在水平方向重复： repeat-x;
在垂直方向重复： repeat-y