In order to enhance the user experience, a very useful resize attribute has been added to CSS3, which allows users to freely scale the size of elements by dragging. Before that, a lot of JavaScript code was needed to achieve similar effects. The syntax of the resize attribute is as follows:
resize: none|both|horizontal|vertical;
The syntax is explained as follows:
- none: the user cannot resize the element;
- both: the user can adjust the height and width of the element;
- horizontal: the user can adjust the width of the element;
- vertical: The user can adjust the height of the element.
When using the resize attribute, you need to pay attention to the following points:
- Setting the resize attribute alone is invalid. The resize attribute needs to be used in conjunction with the overflow attribute to be effective, and the value of the overflow attribute needs to be set to auto, hidden or scroll;
- Not all elements can set the resize attribute, such as img and table attributes, there is no way to use the resize attribute.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border: 1px solid;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>通过 resize 属性您可以调整元素在水平和垂直方向的大小</div>
</body>
</html>The running effect is shown in the figure below:
