CSS学习（5）--float浮动元素、元素的定位和堆叠、以及css文件的验证

1 float属性，可用来令元素向左或向右浮动 ，属性值可为left、right、none

例：假如我们想让一张图片被一段文字包围，如下面链接所示效果：

http://zh.html.net/tutorials/css/lesson13_ex1.php

上面例子的html代码如下：

<div id="picture">
        <img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

在css文件中设置如下：

#picture{

float="left";

width:100px;}

设置图片所在盒子的宽度，再设置图片的float属性为left，表示向左浮动，后面的文字会自动填充

例：使用float属性实现文档分列显示

html代码为：

<div id="column1">
        <p>Haec disserens qua de re agatur
        et in quo causa consistat non videt...</p>
</div>
<div id="column2">
        <p>causas naturales et antecedentes,
        idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3">
        <p>nam nihil esset in nostra
        potestate si res ita se haberet...</p>
</div>

在css中设置如下：

#column1{

float:left;

width:33%;}

#column2{

float:left;

width:33%;}

#column3{

float:left;

width:33%;}

 

效果如下：

http://zh.html.net/tutorials/css/lesson13_ex2.php

2 clear属性，用于控制浮动元素的后继元素的行为，值可以为left、right、both、none ，默认为left

 例：让后继的文本位于浮动图片的下边距的下方

html元素为：

<div id="picture">
        <img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>

在css中设置如下：

#picture{

float:left;

width:300px;}

.floatstop{

clear:both;}

显示示例如下：

http://zh.html.net/tutorials/css/lesson13_ex3.php

 3 元素的定位

联合使用浮动与定位，可以创建多种高级的布局 ；

定位的原理为 把浏览器窗口想象成一个以像素为单位的坐标，原点在左上角；

定位方式可以分为绝对定位和相对定位。

①绝对定位

例：#box1{

position:absolute;

top:30px;

left:40px;}

②相对定位

例：

#box2{

position:relative;

top:30px;

right:40px;}

③绝对定位和相对定位的比较

绝对定位和相对定位以position属性的值区分，绝对定位使用absolute，相对定位使用relative，然后设置距离参考位置的像素值；

绝对定位以body或父元素的位置为参考物，相对定位以该元素的原始位置作为参考物；

绝对定位的元素被定位后不会留下任何控件，相对定位的元素被定位后会在原来的位置留下空白

4 z-index属性，用于进行层次堆叠

css可以处理高度、宽度、深度三个维度，z-index就是用来处理深度；

为每一个元素的z-index属性指定一个数字，数字较大的元素会堆叠在数字较小的元素之上

例：#div1{

position:absolute;

top:100px;

left:100px;

z-index:1;}

#div2{

position:absolute;

top:125px;

left:115px;

z-index:2;}

div2的元素会堆叠在div1的元素之上

 

5 可将自己所写的css文件通过下面的链接验证是否符合W3C标准。

http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options

 

注：W3C是一个制订相关Web标准（例如html、css、xml等）的非盈利组织。