转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
CSS容器属性         ★★★★

CSS容器属性

作者:闵涛 文章来源:闵涛的学习笔记 点击数:570 更新时间:2009/4/23 13:47:33

出于 CSS 精确定义网页样式的本意,在格式化页面对象时, CSS 将所有的元素都放置在一个“容器”里面,这个“容器”叫做 BOX。对于容器的格式化,CSS 提供了强大的支持,现在,首先了解一下与格式化“容器”有关的属性。 
“容器”的属性共有以下的几类: 
l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。 
l 填充距(padding)类的属性决定了究竟在边框和内容之间应该插入多少空间的距离。 
l 边框(border)类的属性定义了一个元素边距的样式。 
l 剩下的一类中包括了宽度和高度属性以及浮动和清除属性。 

margin-top 
属性值:<length> | <percentage> | <auto> 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 
  该属性设置了一个元素顶端的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。比如:BODY{margin-top:0px} 就是将浏览器窗口中的内容紧贴窗口的上边界。 
注意:这个属性可以是负值,但是,很遗憾的是 Netscape 4 不支持这个负的边距值。 

margin-right 
属性值:<length> | <percentage> | auto 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 
  该属性设置了一个元素右侧的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。 
注意:这个属性可以是负值。 

margin-bottom 
属性值:<length> | <percentage> | auto 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 
  该元素设置了一个元素底部的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。 
注意:这个属性可以是负值。 

margin-left 
属性值:<length> | <percentage> | auto 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 
  该元素设置了一个元素左侧的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。具体以上四个属性我们可以通过以下这个例子就会明白的。 

<HTML> 
<head> 
<title>CSS Demo</title> 
<style type="text/css"> 
p{ 
margin-top:0em; 
margin-right:2em; 
margin-bottom:3em; 
margin-left:6em; 

</style> 
</head> 
<body> 
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p> 
</body> 
</HTML> 

padding-top 
属性值:<length> | <percentage> 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 
  该属性设置了一个元素的顶端填充距。它的属性值可以使用长度值或者百分比值来指定。但它的值不能为负,如果指定了负值,那么浏览器在执行时将把它变成所能支持的最接近的值:0 
P{padding-top:15px} 

padding-right 
属性值:<length> | <percentage> 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 
  该属性设置了一个元素的右侧填充距。它的属性值可以使用长度值或者百分比值来指定,但是不能使用负值。 

padding-bottom 
属性值:<length> | <percentage> 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 

该属性设置了一个元素的底端填充距。它的属性值可以使用长度值或者百分比值来指定,但是不能使用负值。 

padding-left 
属性值:<length> | <percentage> 
初始值:0 
适用于:所有元素 
继承:否 
百分比值:参考上级元素的宽度 
该属性设置了一个元素的底端填充距。 
 它的属性值可以使用长度值或者百分比值来指定,但是不能使用负值。上面所介绍的四个属性我们可以通过以下例子看出: 

<HTML> 
<head> 
<title>CSS Demo</title> 
<style type="text/css"> 
p{ 
padding-top:0em; 
padding-right:2em; 
padding-bottom:3em; 
padding-left:6em; 

</style> 
</head> 
<body> 
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p> 
</body> 
</HTML> 
[page]
border-top-width 
属性值:thin | medium | thick | <length> 
初始值:“medium” 
适用于:所有元素 
百分比值:不适用 
继承:否 
  该元素设置了元素顶端边框的宽度,其属性值可以使用关键字或数字来指定。关键字共有三个:其中thin表示为最细的边框,thick表示为最粗,medium表示为中等宽度。 

border-right-width 
属性值:thin | medium | thick | <length> 
初始值:“medium” 
适用于:所有元素 
百分比值:不适用 
继承:否 
  该元素设置了元素右边边框的宽度,其属性值可以使用关键字或数字来指定。 

border-bottom-width 
属性值:thin | medium | thick | <length> 
初始值:“medium” 
适用于:所有元素 
百分比值:不适用 
继承:否 
  该元素设置了元素底端边框的宽度,其属性值可以使用关键字或数字来指定。 

border-left-width 
属性值:thin | medium | thick | <length> 
初始值:“medium” 
适用于:所有元素 
百分比值:不适用 
继承:否 
  该元素设置了元素左边边框的宽度,其属性值可以使用关键字或数字来指定。 

border-color 
属性值:<color>{1,4} 
初始值:“color”属性的值 
适用于:所有元素 
继承:否 
百分比值:不适用 
  边框颜色属性可以设置元素四条边框的颜色,当你给出四个颜色属性值时,它们的表示顺序为上,右,下,左。如果仅给出一个值,那么四条边框的颜色都一样。如果给出两个或三个值,那么缺失边的颜色将从对边获取。如果在指定边框时没有给出颜色值,那么,边框的颜色就等于该元素“color”属性值的颜色。 

border-style 
属性值:none | dotted | dashed | solid | double | groove | ridge | inset | outset 
初始值:none 
适用于:所有元素 
继承:否 
百分比值:不适用 
  “border-style”决定了边框的样式。如果在边框宽度时值为0,那么这个属性值就无效了。也就是说,这个属性必须用于可见的边框。 
“border-style”属性值共有九个关键字来描述,它们的名称和定义如下: 
关键字 解释 
none  不画边框,不论border-width的宽度是多少,边框都不会显示。 
dotted 边框的样式为由点组成的虚线。 
dash  边框的样式为由短线组成的虚线。 
solid 边框为实线。 
double 边框线为双线。双线再加上它们之间的空白部分的宽度就等于border-width宽度。 
groove 3D沟槽状的边框。 
ridge 3D脊状的边框。 
inset 3D内嵌的边框(颜色较深) 
outset 3D外嵌的边框(颜色较浅) 

  属性值可以指定一个、两个、三个或四个。如果仅给出一个属性值,那么所有的边框都是这个样式,如果给出四个值,它们分别作用于上、右、下、左四条边框。如果仅给出两个或三个值,那么缺失边的属性值将从对边获取。 

width 
属性值:<length> | <percentage> | auto 
初始值:auto 
适用于:块级元素和可替换元素 
继承:否 
百分比值:参考上级元素的宽度 
  所有的块级元素和可替换元素都拥有 width(宽度) 属性。宽度可以用长度值、百分比值来定义元素的宽度。 

height 
属性值:<length> | auto 
初始值:auto 
适用于:块级元素和可替换元素 
继承:否 
  所有的块级元素和可替换元素都可以拥有 height 属性。它的定义方式与 width 属性是相似的。不过需要注意的是,height 属性不能用百分比值来指定。如果把 height 和 width 结合起来使用就能够很好地控制一个元素的高度和宽度值。在 height 和 width 都是“auto”的情况下,改变它们任何一个都可以相应地使图片按比例缩放。 

float 
属性值:left | right | none 
初始值:none 
适用于:所有元素 
继承:否 
百分比值:不适用 
  使用 float 元素可以使文字环绕在一个元素的四周。当属性值是 right 或 left 时,该元素就会相应地出现在右边或边,即:文字环绕于该元素的左边或右边。 

clear 
属性值:none | left | right | both 
初始值:none 
适用于:所有元素 
继承:否 
百分比值:不适用 
  这个属性是与 float 有关的,它可以指定在一个元素的某一边是否允许有环绕的文字(或其它对象)出现。如果指定属性值是“right”,那么该元素右侧的所有空间都不会放进任何对象。如果属性值是“none”,那么该元素四周都有对象环绕,这也是默认的属性值。



没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台