1. 對(duì)齊
- 對(duì)齊塊元素
塊元素指的是占據(jù)全部可用寬度的元素睬隶,并且在其前后都會(huì)換行阁苞。
塊元素的例子:
<h1>
<p>
<div>
- 使用 margin 屬性來水平對(duì)齊
通過將左和右外邊距設(shè)置為 "auto"尚卫,來對(duì)齊塊元素喧伞。
.center
{
margin-left:auto;
margin-right:auto; #或者直接使用margin:auto;
width:70%;
background-color:#b0e0e6;
}
- 使用 position 屬性進(jìn)行左和右對(duì)齊
對(duì)齊元素的方法之一是使用絕對(duì)定位:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
- 使用 float 屬性來進(jìn)行左和右對(duì)齊
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
2. 尺寸 (Dimension)
屬性 |
描述 |
height |
設(shè)置元素的高度窟她。 |
line-height |
設(shè)置行高纸泡。 |
max-height |
設(shè)置元素的最大高度漂问。 |
max-width |
設(shè)置元素的最大寬度赖瞒。 |
min-height |
設(shè)置元素的最小高度。 |
min-width |
設(shè)置元素的最小寬度蚤假。 |
width |
設(shè)置元素的寬度栏饮。 |
3. 分類
屬性 |
描述 |
clear |
設(shè)置一個(gè)元素的側(cè)面是否允許其他的浮動(dòng)元素。 |
cursor |
規(guī)定當(dāng)指向某元素之上時(shí)顯示的指針類型磷仰。 |
display |
設(shè)置是否及如何顯示元素袍嬉。 |
float |
定義元素在哪個(gè)方向浮動(dòng)。 |
position |
把元素放置到一個(gè)靜態(tài)的灶平、相對(duì)的伺通、絕對(duì)的、或固定的位置中逢享。 |
visibility |
設(shè)置元素是否可見或不可見罐监。 |
<body>
<p>請(qǐng)把鼠標(biāo)移動(dòng)到單詞上,可以看到鼠標(biāo)指針發(fā)生變化:</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>
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者