位置：首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS3 調(diào)整尺寸resizing

提問人：劉團(tuán)圓發(fā)布時間：2020-11-19

    在原生的HTML元素中，很少有元素能夠讓用戶自主調(diào)節(jié)元素的尺寸（除了textarea元素）。這其實(shí)是對用戶進(jìn)行了很大的限制。用戶不是專業(yè)開發(fā)人員，如果讓用戶隨意變動頁面的尺寸，很容發(fā)生布局錯亂等問題。但是如果需要用戶自己去調(diào)節(jié)某些元素尺寸時，該如何呢？答案就是通過JavaScript達(dá)到目的，這樣做的問題是對開發(fā)人員不夠友好（代碼很長，代碼交互邏輯也很復(fù)雜），同時用戶端其實(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>

image.png

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部