CSS3 調(diào)整尺寸resizing
在原生的HTML元素中,很少有元素能夠讓用戶自主調(diào)節(jié)元素的尺寸(除了textarea元素)。這其實(shí)是對(duì)用戶進(jìn)行了很大的限制。用戶不是專業(yè)開發(fā)人員,如果讓用戶隨意變動(dòng)頁面的尺寸,很容發(fā)生布局錯(cuò)亂等問題。但是如果需要用戶自己去調(diào)節(jié)某些元素尺寸時(shí),該如何呢?答案就是通過JavaScript達(dá)到目的,這樣做的問題是對(duì)開發(fā)人員不夠友好(代碼很長(zhǎng),代碼交互邏輯也很復(fù)雜),同時(shí)用戶端其實(shí)也不夠靈活,這樣就出現(xiàn)了兩邊都不友好的情況。
CSS3提供了resize屬性,規(guī)定是否可由用戶調(diào)整元素尺寸,語法如下:
resize: none|both|horizontal|vertical:
resize屬性的值可以是以下幾種:
?none:用戶無法調(diào)整元素的尺寸。
?both:用戶可調(diào)整元素的高度和寬度。
?horizontal:用戶可調(diào)整元素的寬度。
?vertical:用戶可調(diào)整元素的高度。
【例題】使用resize屬性
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
border:1px solid red;
text-align: center;
font-size: 20px;
line-height: 200px;
margin:10px;
}
.d2{
resize: both;
overflow:auto;
}
</style>
</head>
<body>
<div>這是傳統(tǒng)的div元素</div>
<div>這是可以讓用戶自由調(diào)尺寸的div</div>
</body>
</html>
點(diǎn)擊加載更多評(píng)論>>