整理的CSS属性

作者在 2010-01-12 10:38:34 发布以下内容

<1> word-wrap   :   normal   |   break-word      

<2>  normal     :    默认值。允许内容顶开指定的容器边界    

<3> break-word     :    内容将在边界内换行。如果需要,词内换行(   word-break   )也将发生

<4>padding-bottom:Padding属性包含了padding left :左补距离(设置距左内边距) ;padding top

:头顶补距离(设置距顶部内边距);padding right :右补距离(设置距右内边距) ;padding

bottom :底补距离(设置距低内边距)。
padding left用法:padding-left:10px; 这个意思距离左边补距10像素,可跟百分比如(padding-

left:10%;   距离左边补10%的距离);
padding right用法:padding-right:10px; 这个意思距离右边补距10像素,可跟百分比如(padding-

right:10%; 距离右边补10%的距离);
padding top用法:padding-top:10px; 这个意思距离顶边补距10像素,可跟百分比如(padding-

top:10%; 距离顶边补10%的距离);
padding bottom用法:padding-bottom:10px; 这个意思距离低边补距10像素,可跟百分比如(padding

-bottom:10%; 距离底边补10%的距离);
例:如简写方式有:
padding:10px; 意思就是上下左右补丁距离就是10px(10像素)等于padding-top:10px; padding-

bottom:10px; padding-left:10px; padding-right:10px; 一样效果简写;
padding:5px 10px; 意思上下补丁距离为5px,左右的补丁距离为10px,等于padding-top:5px;

padding-bottom:5px; padding-left:10px; padding-right:10px; 一样效果简写;
padding:5px 6px 7px; 意思上补丁距离5px,下补丁距离为7PX,左右补丁距离为6px,等于padding-

top:5px; padding-bottom:7px; padding-left:6px; padding-right:6px; 一样效果简写;
padding:5px 6px 7px 8px; 意思上补丁为5px,左补丁距离为6px ,下补丁距离为7px,左补丁距离8px

,等于等于padding-top:5px; padding-right:6px; padding-bottom:7px; padding-right:8px; 一样效

果简写

<5>Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离

, 它们是透明不可见的,
格式如下:(上下左右全为40)
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;

<6>overflow-x:overflow-x : visible | auto | hidden | scroll
取值:
visible :  默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的

window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto :  在必需时对象内容才会被裁切或显示横向滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示横向滚动条

<7>border:为属性设置边界
例如:border:0px solid #f00 设置颜色为#f00的实线边框
具体语法如下
border : border-width border-style border-color
三个属性也可以单独定义,现介绍如下:
border-color
语法:
border-color:color;
border-width
语法:
border-width : medium | thin | thick | length
参数:
medium :  默认宽度
thin :  小于默认宽度
thick :  大于默认宽度
length :  由浮点数字和单位标识符组成的长度值。不可为负值。
比如: border-width :1px;
border-style
语法:
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset |

outset
参数:
none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
outset :  根据border-color的值画3D凸边
除了这三个基本属性以外,还可以分别对四条边(left,right,top,bottom)进行样式定义
比如:
boeder-left:1px dotted #ffffff;
以下是定义这些属性需要注意的地方:
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
如果border-style设置为none,本属性将失去作用

 

改变布局的距离可用javascript
  window.onload=function(){
     document.getElementById

("tablelist").style.width=document.documentElement.offsetWidth*0.93+"px";
    };
    tablelist为DIV的ID

默认分类 | 阅读 1461 次
文章评论,共0条
游客请输入验证码
文章分类
文章归档