The resize attribute is a property in CSS3 UI that allows users to resize elements. The resize attribute is a property in CSS3 UI that allows the user to resize an element.
resize:none|both|horizontal|vertical;
The syntax is explained as follows:
● none: Users cannot adjust the size of the element;
●both: Users can adjust the height and width of elements;
●horizontal: The user can adjust the width of the element;
●vertical: The user can adjust the height of the element.
You also need to pay attention to the following points when using the resize attribute:
●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 be set with the resize attribute. For example, the img and table attributes cannot use the resize attribute.
(resize) adjust the size of the element
1. Resize: none resize: none
Example:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:none;}</style></head><body><h1>TheresizeProperty</h1 ><div><p>resize:none</p></div></body></html>Running results:
2.Resize: both
Example:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:both;overflow:auto;}</style></head><body><h1> TheresizeProperty</h1><div><p>resize:both</p></div></body></html>Running results:
3.Resize: horizontal resize: horizontal
Example:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:horizontal;overflow:auto;}</style></head><body><h1> TheresizeProperty</h1><div><p>resize:horizontal</p></div></body></html>Running results:
4.Resize: vertical resize: vertical
Example:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:vertical;overflow:auto;}</style></head><body><h1> TheresizeProperty</h1><div><p>resize:vertical</p></div></body></html>Running results:
