TA的每日心情 | 开心
2021-3-12 23:18 |
|---|
签到天数: 2 天 [LV.1]初来乍到
|
|
首先我们了解到，CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。
fload属性有四个可用的值：left 和right 分别浮动元素到各自的方向，none （默认的） 使元素不浮动，inherit 将会从父级元素获取float值。
需要引起你重视的是，float属性不是你所想象的那么简单，不是通过这一篇文字的说明，就能让你完全搞明白它的工作原理的，我们需要在实践中不断的总结经验，应对所出现的问题。我们通过下面的这个小例子，来说明它的基本工作情况。
我们看下面的CSS代码：
.left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
} left和right为不作任何浮动的类。leftfloat向左浮动的类。 我们再看看xhtml代码： java代码
<div class="left">div left float:none</div>
<div class="right">div right</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right</div>
<span class="left">span left float:none</span>
<span class="right">span right</span> 我们看运行效果： Java代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正确理解css float属性</title>
<style type="text/css">
<!-- .left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
}
-->
</style>
</head>
<body>
<div class="left">div left float:none</div>
<div class="right">div right </div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>
</body>
</html> 结果:
我们看(1)和(2)：容器(1)没有任何浮动，占据了一整行，将(2)挤到了下面一行。而且(2)也占据了一整行的位置。 我们看(3)和(4)：容器(3)声明了左浮动，容器(4)浮动到了它的右侧。实现了这两个容器处于同一行的情况。
源码下载：http://file.javaxxz.com/2014/11/2/235523734.zip |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2014-11-2 23:55:24