相关文章
技巧:病毒都喜欢那些软件呢?
企通互联网页设计配色应用实例剖析—灰色系
企通互联photoshop制作lomo风格非主流效果
北京网站建设如何正确使用标题元素、段落和强制换行
网站制作Photoshop滤镜组合打造魔幻背景
网站制作你对html了解多少呢？
北京网页设计入门：Dreamweaver轻松制作网页页内连接
企通互联网页设计基本配色参考色谱——动感
北京网站建设奇妙的javascript图片放大镜
北京网页设计网站设计的思考（五）
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 企通互联北京网站制作详细学习CSS中的网页布局的属性
企通互联北京网站制作详细学习CSS中的网页布局的属性
布局（Layout）属性：
在以前的 北京网页设计HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记的功能。 中.国站长站
position属性： 站长.站
position属性用来决定元素的位置类型，详见属性： 中.国.站长站
属性名称: 'position'
Www_Chinaz_com
属性值: absolute | relative | static
初始值: static 中.国.站.长.站
适合对象: 所有元素
是否继承: no Www@Chinaz@com
百分比备注: 被禁止 Www_Chinaz_com
其属性值分别代表：
absolute：屏幕上的绝对位置。
[中国站长站]
relative：屏幕上的相对位置。 中.国.站.长.站
static：固有位置。 中.国站长站
direction属性： Chinaz.com
direction属性决定BOX的排列方向，详见属性：
[中国站长站]
属性名称: 'direction'
中.国.站长站
属性值: ltr| rtl 站长.站
初始值: ltr Www.Chinaz.com
适合对象: 所有元素 Www@Chinaz@com
是否继承: yes
中国站.长站
百分比备注: 被禁止 中国站.长站
float和clear属性： Www~Chinaz~com
在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方： Www^Chinaz^com
属性名称: 'float' 中国站长.站
www.qitongnet.com属性值: left| right|none 中国站长.站
初始值: none 中国站.长站
适合对象: 所有元素
网站设计中国站长_站,为中文网站提供动力
是否继承: no Www~Chinaz~com
百分比备注: 被禁止 中.国站长站
例如：
<STYLE type="text/css">北京网站制作
IMG { float: left }企通互联
BODY, P, IMG { margin: 2em }北京网站设计
</STYLE>网站制作
<BODY>网页设计
<P>网页设计
<IMG src=img.gif>网站设计
Some sample text that has no other...网站设计
</BODY>
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称: 'clear' 站长.站
属性值: left| right|both|none
Chinaz@com
初始值: none
Chinaz_com
适合对象: 所有元素
Chinaz@com
是否继承: no 中国. 企通互联站.长站
百分比备注: 被禁止 Chinaz_com
绝对位置属性：
Chinaz^com
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：
中国.站长站
属性名称: 'top'、'right'、'bottom'、'left'
Www@Chinaz@com
属性值: <length>|<percentage>|auto [中国站长站]
初始值: none
适合对象: 所有元素 [中国站长站 网站建设]
是否继承: no
中国站长.站
百分比备注: 被禁止
站长.站
利用以上属性，用户就可以精确定义元素的位置，如： Chinaz
<P style="position: relative; margin-right: 10px; left: 10px;">北京网站建设
I used two red hyphens to serve as a change bar. They企通互联
will "float" to the left of the line containing THIS网页设计
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>北京网页设计
word.</P> 中国站长_站,为中文网站提供动力
z-index属性： 站.长站
在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数。 Chinaz^com
属性名称: 'z-index'
Chinaz^com
属性值: auto|<integer> Www~Chinaz~com
初始值: auto
适合对象: 使用position属性的元素 站长.站
是否继承: no Chinaz.com
百分比备注: 被禁止
width属性： Www_Chinaz_com
规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少： Www@Chinaz@com
属性名称: 'width' Www~Chinaz~com
属性值: <length> | <percentage> | auto
初始值: auto Www_Chinaz_com
适合对象: 块元素 Www@Chinaz@com
是否继承: no 站.长站
百分比备注:根据父元素的width而定
中.国站长站
在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之间。 Chinaz_com
属性名称: 'min-width'
中.国.站长站
属性值: <length> | <percentage>
Www@Chinaz@com
初始值: 0 站长.站
适合对象: all 中国站.长站
是否继承: no Www@Chinaz@com
百分比备注:根据父元素的width而定
属性名称: 'max-width' 中国站.长.站
属性值: <length> | <percentage> Www~Chinaz~com
初始值: 100%
适合对象: all
中国.站长站
是否继承: no
中国站.长.站
百分比备注:根据父元素的width而定
中国站.长站
height属性： 站.长.站
相同的BOX还有height属性来控制本身的高度： Www_Chinaz_com
属性名称: 'height'
中.国.站.长.站
属性值: <length> | <percentage> | auto 中.国站长站
初始值: auto
适合对象: 块元素 中.国站长站
是否继承: no
Www@Chinaz@com
百分比备注:根据父元素的height而定 站长.站
在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度之间。 站长.站
属性名称: 'min-height'
属性值: <length> | <percentage>
Www@Chinaz@com
初始值: 0
Chinaz
适合对象: all
是否继承: no 中国站.长.站
百分比备注:根据父元素的height而定 中.国.站长站
属性名称: 'max-height' 站.长站
属性值: <length> | <percentage>
初始值: 100% 中国站长_站,为中文网站提供动力
适合对象: all Chinaz@com
是否继承: no
百分比备注:根据父元素的height而定 中.国.站.长.站
overflow属性： 中.国.站长站
在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow属性： 站长.站
属性名称: 'overflow' Chinaz^com
网站制作属性值: visible | hidden | scroll | auto
中国站.长站
初始值: visible
中国站.长.站
适合对象: 元素的position属性
是否继承: no 中国站.长站
百分比备注: 被禁止 Chinaz~com
属性值含义如下： Chinaz^com
visible：扩大面积以显示所有内容。 Www@Chinaz@com
hidden：隐藏超出范围的内容。
中国站长.站
scroll：在元素的右边显示一个滚动条。
中国站长.站
auto：当内容超出元素面积时，显示滚动条。 中国站.长站
clip属性： Www^Chinaz^com
CSS还提供了一种clip属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种： Chinaz_com
属性名称: 'clip'
中国站长_站,为中文网站提供动力
属性值: <shape> | auto [中国站长站]
初始值: auto
适合元素: 元素的position属性被设为absolute 中国站长_站,为中文网站提供动力
是否继承: no
百分比备注: 被禁止
<shape>值为rect(top right bottom left)。
line-height和vertical-align属性： Chinaz_com
line-height属性可以规定元素内部的行间距，使用长度单位或百分数：
属性名称: 'line-height'
属性值: normal | <number> | <length> | <percentage>
初始值: normal Www~Chinaz~com
适合对象: 所有元素
是否继承: yes
百分比备注:根据元素的字体大小而定 Chinaz
例如下面的例子，虽然表达方式不同，但结果一样：
中国.站.长站
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt } Chinaz@com
DIV { line-height: 120%; font-size: 10pt } Chinaz~com
vertical-align属性决定元素在垂直位置的显示：
中.国.站.长.站
属性名称: 'vertical-align'
Www_Chinaz_com
属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
Chinaz
初始值: baseline Www~Chinaz~com
适合对象: inline elements 中.国.站长站
适合继承: no
中国.站.长站
百分比备注: 根据元素的line-height属性而定 中国站长.站
属性值含义如下：
中国.站.长站
baseline：与元素的基线对齐。 站.长站
middle：与元素中部对齐。
sub：字下沉。 中.国站长站
super：字上升。
Www.Chinaz.com
text-top：文本顶部对齐。
Www~Chinaz~com
text-bottom：文本底部对齐。
Top：和本行位置最高元素对齐。 中国站.长.站
Bottom：和本行位置最低元素对齐。 中国.站长站
Visibility 北京网站制作属性:
该属性用于控制元素的显示或隐藏：
中国站.长站
属性名称: 'visibility' 中国.站长站
属性值: inherit | visible | hidden
中.国站长站
初始值: inherit 站.长站
适合对象: 所有元素 中.国站长站
是否继承: 如果该值为inherit，则继承父元素属性
百分比备注: 被禁止 中国.站.长站
上一篇：北京网页设计详细学习CSS中的网页布局的属性
下一篇：网站建设实现连续长字符在IE与FireFox下自动换行的方法
