resize不是已知的css属性
resize是已知的css屬性。resize是CSS3中新增的一個屬性,用于指定一個元素是否是由用戶調整大小的;resize屬性允許用戶通過拖動的方式,來自由縮放元素的尺寸。
該方法適用于所有品牌的電腦。
相關推薦:《CSS3視頻教程》
css resize屬性
resize屬性可以指定一個元素是否是由用戶調整大小的。
resize是CSS3中新增的一個屬性,它允許用戶通過拖動的方式,來自由縮放元素的尺寸,用以增強用戶體驗。這在以前只能通過Javascript 編寫大量腳本來實現,費時費力,效率低下。
resize屬性可以用于根據用戶需要以及在哪個方向上調整元素的大小。 resize屬性可以采用4個值。
句法:
Element{
Resize : none|both|vertical|horizontal;
}
讓我們看一下每個屬性...
1) resize : none
當用戶不想調整元素的大小時, none值不會應用于resize屬性 。 也是默認值。
句法:
Element{
resize:none;
}
例:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>None value doesn’t allow resizing of this p element.</p>
</p>
</body>
</html>
輸出
在上面的示例中,您無法調整p元素的大小。 它是靜態的。
2) resize : both
當用戶希望其元素在寬度和高度的兩側都可調整大小時, 兩個值都將應用于resize屬性 。
句法:
Element{
resize:both;
}
例:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>click and drag the bottom right corner to resize the height and width of this p element.</p>
</p>
</body>
</html>
輸出
在上面的示例中,要調整大小,請單擊并拖動此p元素的右下角。
3) resize : vertical
當用戶要根據需要調整元素的高度時,將垂直值應用于resize屬性 。
句法:
Element{
resize:vertical;
}
例:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>click and drag the bottom right corner to resize the height of this p element.</p>
</p>
</body>
</html>
輸出
在上面的示例中,用戶可以單擊并拖動此p元素的右下角以調整其高度。
4) resize : horizontal
當用戶要根據需要調整元素的寬度大小時,將水平值應用于resize屬性 。
句法:
Element{
resize:horizontal;
}
例:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid;
padding: 15px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>
<p>click and drag the bottom right corner to resize the width of this p element.</p>
</p>
</body>
</html>
輸出
在上面的示例中,用戶可以單擊并拖動此p元素的右下角以調整其寬度。
更多編程相關知識,請訪問:編程教學!!
總結
以上是生活随笔為你收集整理的resize不是已知的css属性的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 米聊PK微信:微信是一朵奇葩
- 下一篇: 罗技驱动有必要开机启动吗? 罗技鼠标驱动