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中。

1. 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的宽度呢！哈哈！）

1. 颜色赋值

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%的黑色。该属性在低版本的浏览器下是不兼容的。

1. Css中的伪类选择器

:link 选择器用于选取未被访问的链接。 :link 选择器不会设置已经访问过的链接的样式。

:visited 选择器用于选取已被访问的链接。

:active 选择器用于选择活动链接。当在一个链接上点击时，它就会成为活动的（激活的）。

:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。

:focus 选择器用于选取获得焦点的元素。提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

1. Div与span的区别

<div>是一个块级元素，我们可以把它比喻成盒子，它没什么实际语义能用到很多地方，独占一行不能和其它元素在一行，它还能把<div>和<span>”装在盒子里”，主要用来组合段落和布局。

<span>是行内元素，我们可以把它比喻成袋子，它也没有实际语义也能用到很多地方，如果没有样式它在视觉上和<p>一样,能和其它元素在一行，它的内容有多大宽度就有多宽，不能再里面添加<div>，它能把段落中的某一段”装起来”定义样式，能呈现很好的视觉效果。