CSS 整理（3）

CSS 外边距属性（Margin）

属性	描述	CSS
margin	在一个声明中设置所有外边距属性。	1
margin-bottom	设置元素的下外边距。	1
margin-left	设置元素的左外边距。	1
margin-right	设置元素的右外边距。	1
margin-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）

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

 

padding:10px 5px 15px;

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

 

td {padding-left: 2cm}

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

 

CSS 定位属性（Positioning）

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

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