1. 对齐
- 对齐块元素
块元素指的是占据全部可用宽度的元素,并且在其前后都会换行。
块元素的例子:
<h1>
<p>
<div>
- 使用 margin 属性来水平对齐
通过将左和右外边距设置为 "auto",来对齐块元素。
.center
{
margin-left:auto;
margin-right:auto; #或者直接使用margin:auto;
width:70%;
background-color:#b0e0e6;
}
- 使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
- 使用 float 属性来进行左和右对齐
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
2. 尺寸 (Dimension)
属性 |
描述 |
height |
设置元素的高度。 |
line-height |
设置行高。 |
max-height |
设置元素的最大高度。 |
max-width |
设置元素的最大宽度。 |
min-height |
设置元素的最小高度。 |
min-width |
设置元素的最小宽度。 |
width |
设置元素的宽度。 |
3. 分类
属性 |
描述 |
clear |
设置一个元素的侧面是否允许其他的浮动元素。 |
cursor |
规定当指向某元素之上时显示的指针类型。 |
display |
设置是否及如何显示元素。 |
float |
定义元素在哪个方向浮动。 |
position |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility |
设置元素是否可见或不可见。 |
<body>
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>