2009.12.21(3)——css+div布局一

lipeng88213

浏览: 958094 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

CSS 浏览器 IE HTML

2009.12.21(3)——css+div布局一
今天谢让我看css+div
1.float和clear的用法

首先，必须要明白两件事：
     1 .浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的.
     2.HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是

占据整行; in-line对象则相反,允许其他对象与它在一行中显示. 例如两个div之间，在使用float之后，两

个div显示在同一行.但是span则不然，即使不使用float，仍然在同一行显示。

float属性, 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独自占

据一行

而clear在什么时候用呢？
        当属性设置float（浮动）时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流

能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需

要用clear:both;来清除，如果不用它，后面的元素还是会在同一行出现的

clear:both;
作用：该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

用CSS的float和clear创建三栏液态布局的方法三栏布局是目前最常见的网页布局，下面介绍一种用CSS的

float和clear属性来获得三栏液态布局”（它可以根据用户浏览器窗口宽度自动伸缩）的方法。

基本方法

基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度

的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在

左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩

。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左

栏或者右栏）的底端也是这样。
例子如下

<body>
<div id="header">
     <h1>Header</h1>
</div>
<div id="left">
     Port side text...
</div>
<div id="right">
     Starboard side text...
</div>
<div id="middle">
     Middle column text...
</div>
<div id="footer">
     Footer text...
</div>
</body>

下面是CSS代码：

body {
     margin: 0px;
     padding: 0px;
}
div#header {
     clear: both;
     height: 50px;
     background-color: aqua;
     padding: 1px;
}
div#left {
     float: left;
     width: 150px;
     background-color: red;
}
div#right {
     float: right;
     width: 150px;
     background-color: green;
}
div#middle {
     padding: 0px 160px 5px 160px;
     margin: 0px;
     background-color: silver;
}
div#footer {
     clear: both;
     background-color: yellow;
}

代码说明

   HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个

边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或

者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面

而不是中栏的旁边了。

div#header和div#footer样式（style）中的clear:both申明用来确保这浮动部分不会占据标题和页脚的空间

。div#header样式中的padding:1px申明用来消除页头背景色中的异常边，如果padding设置为零，那么在

Netscape浏览器中就会看到这个异常。

div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度，不过

你也可以把它的宽度设置为其它具体值。类似的，div#right样式中的float:right申明用来把右栏div挤压到

右侧。在本例中，float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而，如果这些div被其它

div包含，那么float将会把它们挤压到包含它们的div的边缘。

在div#middle样式中，clear申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px

申明设置了到左栏和右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。

这个例子非常粗糙和简单，但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术。

float注意：
注意1：理论上，我们可以控制源文件上的任意元素的浮动，但由于IE浏览器的BUG，要浮动层需要首先出现

在源文件上
注意2：浮动层是必须设置宽度(width)才能正常浮动的
注意3：float控制的是文本流方向，当为层设置了“position:absolute;”后，float将不再有效，应为此时

层已经脱离该文本流。

2.margin的用法
margin-right:   200px;
无负号时表示元素与右边框之间滴距离是   200px；

margin-right:-200px;
有负号时表示与右边框之间滴距离是   -200px，即   右侧滴对象向左移动   200px

3.padding的用法及和margin的区别
padding 向内补白在这个div内部多出来多少px
margin 向外补白在这个div外部多出来多少px

margin是对外元素的距离（外补丁），而padding是对内元素的距离（内补丁）。

如果有一点Html基础的话,就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如

果将这些元素细分,又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.

1.Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔.

常用的块级元素包括: p, h1~h6, div, ul等; 2. Inline element: 指依附其他块级元素存在,紧接于被联元

素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等; 3. Top-levelelement: 包括html,

body, frameset, 表现如Block-level element, 属于高级块级元素.块级元素是构成一个html的主要和关键

元素, 而任意一个块级元素均可以用Box model来解释说明. Box Model:任意一个块级元素均由content(内容

), padding, background(包括背景颜色和图片), border(边框),margin五个部分组成，如"margin和

padding.jpg"和"margin和padding2.jpg"

何时应当使用margin

1.需要在border外侧添加空白时。
2.空白处不需要背景（色）时。
3.上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding

1.需要在border内测添加空白时。
2.空白处需要背景（色）时。
3.上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

Margin的合并

Margin有一个很有趣的特性，在垂直方向，两个盒子相连的margin会自动合并，也就是上面一个盒子的

margin-bottom和下一个盒子的margin-top会合并，合并后的margin为两个原始margin中较大的一个，
之所以有这个的设计，可能是源自文字段落的天然特性，两段文字的margin如果不合并，就会导致段落间距

过大，不美观。这个合并特性给使用margin来做精确定位带来了一些不可预知性，我刚开始用margin时总是

被弄糊涂，不过水平方向的margin是没有这个合并的，还有padding也是不会合并的（无论水平还是垂直），

这是margin和padding的一个很大的区别。

4.position的用法
position属性有五个取值，分别为：static, relative, absolute, fixed, inherit, 其中“static”为默

认值。
position:static
该值为position的默认值，可以省略不写，当position取值为static或者没有设置position属性的时候，

div的显示方式为按文本流的顺序从上至下，或者从左到右顺序显示。
position:relative
最初位置也就是当position取值为static时的位置，也就是说这里的相对定位是相对于它在正常情况下的默

认位置的。
注意：
A:设置了position:relative而不设置left,top等属性的时候，层显示的位置和不设置position属性或者

position值取static时一样。
B:当一个层设置了position:relative，而且使得层位置产生相对偏移时，并不影响文本流中接下来的其他层

的位置。
C:position:relative有防止重叠的作用，当设置了position:relative，层的层叠级别高于默认的文本流级

别。当然了，如果都设置了position:relative，同等级别下将会按照文本流的顺序层叠显示。
position:absolute
当我们设置position的值为static或者relative时，层依然存在于文本流中，也就是不管位置是否偏移，文

本流中依然为它保留了该有的位置,即使原来位置上没有东西，已经发生偏移了，但是仍然会留下原来那个位

置。但当层设置了position:absolute并产生偏移（设置了top,left等值）时，该层将完全从文本流中脱离。

一般会以父容器的坐标原点为参考点进行偏移，如果父容器没有设置position属性或position值为static时

，将以body的坐标原点为参考

另，top,right,bottom,left,这四个属性在设置了position属性，并且值不为static时生效。当position取

值relative时，偏离文本流初始位置；当position取值absolute时，以父容器对应的初始点为原点偏移，如

果父容器没有设置positon或者position取值static时，以body对应的坐标点为参考点偏移。

top,right,bottom,left属性的取值除了具体的数值外，还可以是百分比、继承、或者auto（默认值）。
5.去掉下划线

#footer a {
color: #c9c9c9;
text-decoration: none;/*让下划线消失*/
}

6.鼠标放上去变色
/*
鼠标放上去变色
*/

#footer a:hover {
color: #db6d16;
}

查看图片附件

分享到：

2009.12.21(2)——在Eclipse里面设置文件 ... | 2009.12.18——jquery例子简易导航栏

2009-12-21 21:17
浏览 1382
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论