Home >Web Front-end >CSS Tutorial >resize is not a known css property?
resize is not a known css property?
- 青灯夜游Original
- 2020-11-24 14:08:422235browse
resize is a known css property. resize is a new attribute in CSS3 that is used to specify whether an element is resized by the user; the resize attribute allows the user to freely scale the size of the element by dragging.
This method is suitable for all brands of computers.
Related recommendations: "CSS3 Video Tutorial"
css resize attribute
The resize attribute can specify whether an element is resized by the user.
Resize is a new attribute in CSS3, which allows users to freely scale the size of elements by dragging to enhance the user experience. In the past, this could only be achieved by writing a large number of scripts in Javascript, which was time-consuming, labor-intensive and inefficient.
The resize attribute can be used to resize an element according to user needs and in which direction. The resize attribute can take 4 values.
Syntax:
Element{
Resize : none|both|vertical|horizontal;
}
Let’s look at each attribute...
1) resize : none
The none value will not be applied to the resize attribute when the user does not want to resize the element . Also the default value.
Syntax:
Element{
resize:none;
}
Example:
<!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>
Output
resizable on both sides of width and height. #resize attribute.
Syntax: 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>
3) resize : vertical
When the user wants to adjust the height of the element as needed, apply the vertical value to the
resize attribute.
Syntax: 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>
4) resize : horizontal
Apply the horizontal value to the
resize attributewhen the user wants to adjust the width size of an element as needed.
Syntax: 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>
For more programming-related knowledge, please visit:
Programming TeachingThe above is the detailed content of resize is not a known css property?. For more information, please follow other related articles on the PHP Chinese website!