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等)的非盈利组织。