css应用四
1.Float属性详解
float属性定义元素在哪个方向浮动。
Left 左浮动；
Right 右浮动；
None 默认，不浮动；
Inherit 继承父元素float属性。
示例一：
<div style=”width：300px;”>
<div style=”width:100px;height:100px;border:1px #000 solid;
float:left;”>div1</div>
<div style=”width:100px;height:100px;border:1px #000 solid; float:right;”>div2</div>
<div style=”clear:both”></div>
</div>
效果图：
示例二:
<div style="width:300px;">
<div style="width:100px;height:110px;border:1px #000 solid;
float:left;">div1</div>
<div style="width:100px;height:100px;border:1px #000 solid;
float:right;">div2</div>
<div style="width:100px;height:100px; border:1px #000 solid;
float:left;">div3</div>
<div style="clear:both"></div>
</div>
效果图：
<div style = "clear : both"></div>行，clear : both；用来清除浮动。减少样式冲突。如下：
<div style="width:300px;">
<div style="width:100px;height:100px;border:1px #000 solid;
float:left;">div1</div>
<div style="width:100px;height:100px;border:1px #000 solid;
float:right;">div2</div>
<div style="width:100px;height:100px; border:1px #000 solid;
float:left;">div3</div>
</div>
<div style="width:300px;">
<div style="width:100px;height:110px;border:1px #000 solid;
float:left;">div4</div>
<div style="width:100px;height:100px;border:1px #000 solid;
float:right;">div5</div>
<div style="width:100px;height:100px; border:1px #000 solid;
float:left;">div6</div>
<div style="clear:both"></div>
</div>
Div 1,2,3和div 4,5,6是在两个单独的div中，div 1,2,3所在的div没有清除浮动，现在的效果就出现了问题，div 1,2,3,4,5,6 挤到了一块去了。
如图：
如添加清除浮动，就会如下图所示：
Div 1,2,3和div 3,4,5分别显示在各自所在的div中。
- Width的介绍
Width是来设置元素宽度的，但有些元素是没法直接设置宽度的，如<a> </a>标签，<span> </span>标签等。需要添加”display : block” 属性将该标签转化为块状元素， 这时设置的width值才能体现出来。
Width中还有max-width，意为：该元素的最大宽度为多少。在没到达最大宽度是，显示元素的实际宽度，当到达或者超过最大宽度，则显示最大宽度，元素的宽度不会随实际的宽度而变化。
Min-width，意为：该元素的最小宽度为多少。但元素的实际宽度小于或等于min-width时，该元素的宽度为min – width所设置的数值。当元素的实际宽度大于min – width时，这按照实际宽度显示。
Width：100%；该元素的宽度是多少呢？这就取决于该元素的父元素了。如该元素的父元素为100px，那么该元素就是100px；如果该元素的父元素为200px，那么该元素的宽度就为200px；
如下：
<div style="width:100px;height:40px;padding:10px;border:1px #000 solid;">
<div style="width:100%;height:20px;border:1px #F00 solid;"></div>
</div>
请问，红框的宽度是多少呢？102px（因为还有border的2px的宽度呢！哈哈！）
- 颜色赋值
Color，background-color，border，都会用到颜色。网站上的颜色赋值方法有：十六进位制，颜色的英文名称，rgb代码。在css3中还有一种颜色代码：rgba格式的；rgba和rgb的结构是相同的，就是多了一位透明度的数值设定。
如：
十六进制：#000000,，黑色
rgb（0,0,0）;
color:block；
rgba（0,0,0,1）表示透明度为:1的黑色。
rgba（0,0,0,0.8）表示透明度为80%的黑色。该属性在低版本的浏览器下是不兼容的。
- Css中的伪类选择器
:link 选择器用于选取未被访问的链接。 :link 选择器不会设置已经访问过的链接的样式。
:visited 选择器用于选取已被访问的链接。
:active 选择器用于选择活动链接。当在一个链接上点击时，它就会成为活动的（激活的）。
:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。
:focus 选择器用于选取获得焦点的元素。提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。
- Div与span的区别
<div>是一个块级元素，我们可以把它比喻成盒子，它没什么实际语义能用到很多地方，独占一行不能和其它元素在一行，它还能把<div>和<span>”装在盒子里”，主要用来组合段落和布局。
<span>是行内元素，我们可以把它比喻成袋子，它也没有实际语义也能用到很多地方，如果没有样式它在视觉上和<p>一样,能和其它元素在一行，它的内容有多大宽度就有多宽，不能再里面添加<div>，它能把段落中的某一段”装起来”定义样式，能呈现很好的视觉效果。
