CSS 整理（3）

CSS 外边距属性（Margin）

属性描述CSSmargin在一个声明中设置所有外边距属性。1margin-bottom设置元素的下外边距。1margin-left设置元素的左外边距。1margin-right设置元素的右外边距。1margin-top设置元素的上外边距。1

1.margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。（4个值：上-->右-->下-->左）

margin:10px 5px 15px 20px;margin:10px 5px 15px;margin:10px 5px;margin:10px;

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。

同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

JavaScript 语法：object.style.margin="10px 5px"

2.margin-top 、margin-bottom、margin-left、margin-right

值描述auto浏览器计算外边距。length规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。%规定基于父元素的宽度的百分比的外边距。inherit规定应该从父元素继承外边距。

 

p.bottommargin{margin-bottom: 25%}

JavaScript 语法：object.style.marginBottom="10px"

 

CSS 内边距属性（Padding）

属性描述CSSpadding在一个声明中设置所有内边距属性。1padding-bottom设置元素的下内边距。1padding-left设置元素的左内边距。1padding-right设置元素的右内边距。1padding-top设置元素的上内边距。1

 

padding:10px 5px 15px;

JavaScript 语法：object.style.padding="10px 5px"

 

td {padding-left: 2cm}

JavaScript 语法：object.style.paddingLeft="10px"

 

CSS 定位属性（Positioning）

属性描述CSSbottom设置定位元素下外边距边界与其包含块下边界之间的偏移。2clear规定元素的哪一侧不允许其他浮动元素。1clip剪裁绝对定位元素。2cursor规定要显示的光标的类型（形状）。2display规定元素应该生成的框的类型。1float规定框是否应该浮动。1left设置定位元素左外边距边界与其包含块左边界之间的偏移。2overflow规定当内容溢出元素框时发生的事情。2position规定元素的定位类型。2right设置定位元素右外边距边界与其包含块右边界之间的偏移。2top设置定位元素的上外边距边界与其包含块上边界之间的偏移。2vertical-align设置元素的垂直对齐方式。1visibility规定元素是否可见。2z-index设置元素的堆叠顺序。2

1.position 属性规定元素的定位类型。

任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

相对定位元素会相对于它在正常流中的默认位置偏移。

值描述absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。

 

img{position:absolute;bottom:10px}

h2.pos_left{position:relative;left:-20px}

p.two{position:fixed;top:30px;right:5px;}

JavaScript 语法：object.style.position="absolute"

2.float 属性定义元素在哪个方向浮动。

值描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit规定应该从父元素继承 float 属性的值。

 

div{float:right;width:120px;margin:0 0 15px 20px;padding:15px;border:1px solid black;text-align:center;}

JavaScript 语法：object.style.cssFloat="left"

3.clear 属性规定元素的哪一侧不允许其他浮动元素。

值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。inherit规定应该从父元素继承 clear 属性的值。

 

img  {  float:left;  clear:both;  }

JavaScript 语法：object.style.clear="left"

4.overflow 属性规定当内容溢出元素框时发生的事情。

div {background-color:#00FFFF;width:150px;height:150px;overflow: scroll}

5.top bottom left right 属性定义了 定位元素 各个 外边距边界 与其 包含块各个边界 之间的 偏移。

如果 "position" 属性的值为 "static"，那么设置 "top 、bottom、 left、 right" 属性不会产生任何效果。

img{position:absolute;top:5%}

6.clip 属性剪裁绝对定位元素。"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
唯一合法的形状值是：rect (top, right, bottom, left)

img {position:absolute;clip:rect(0px 50px 200px 0px)}

JavaScript 语法：object.style.clip="rect(0px,50px,50px,0px)"

7.vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

值描述baseline默认。元素放置在父元素的基线上。sub垂直对齐文本的下标。super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部。bottom把元素的顶端与行中最低的元素的顶端对齐。text-bottom把元素的底端与父元素字体的底端对齐。length %使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。inherit规定应该从父元素继承 vertical-align 属性的值。

 

img.bottom {vertical-align:text-bottom}

JavaScript 语法：object.style.verticalAlign="bottom"

8.visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

值描述visible默认值。元素是可见的。hidden元素是不可见的。collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。inherit规定应该从父元素继承 visibility 属性的值。

 

h1.visible {visibility:visible}h1.invisible {visibility:hidden}

JavaScript 语法：object.style.visibility="hidden"

9.display 属性规定元素应该生成的框的类型。

值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。

 

p {display: inline}div {display: none}

span  {display: block}

JavaScript 语法：object.style.display="inline"

10.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index 仅能在定位元素上奏效（例如 position:absolute;）！

img.x{position:absolute;left:0px;top:0px;z-index:10}

 

CSS 文本属性（Text）

属性描述CSScolor设置文本的颜色。1direction规定文本的方向 / 书写方向。2letter-spacing设置字符间距。1line-height设置行高。1text-align规定文本的水平对齐方式。1text-decoration规定添加到文本的装饰效果。1text-indent规定文本块首行的缩进。1text-shadow规定添加到文本的阴影效果。2text-transform控制文本的大小写。1unicode-bidi设置文本方向。2white-space规定如何处理元素中的空白。1word-spacing设置单词间距。1hanging-punctuation规定标点字符是否位于线框之外。3punctuation-trim规定是否对标点字符进行修剪。3text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3text-justify规定当  text-align 设置为 "justify" 时所使用的对齐方法。3text-outline规定文本的轮廓。3text-overflow规定当文本溢出包含元素时发生的事情。3text-shadow向文本添加阴影。3text-wrap规定文本的换行规则。3word-break规定非中日韩文本的换行规则。3word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3

1.color 属性规定文本的颜色。 属性设置了一个元素的前景色

body {color:red}h1 {color:#00ff00}p.ex {color:rgb(0,0,255)}

2.line-height 属性设置行间的距离（行高）。

p.big {line-height: 200%}p.big {line-height: 30px  }

JavaScript 语法：object.style.lineHeight="2"

3.text-align 属性规定元素中的文本的水平对齐方式。

值描述left把文本排列到左边。默认值：由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。

 

h1 {text-align: center}h2 {text-align: left}h3 {text-align: right}

JavaScript 语法：object.style.textAlign="right"

 

(以上内容摘自http://www.w3school.com.cn)