The user interface module of CSS3 provides more effects and options for the UI performance of the page.
Added some new user interface features to adjust element size, box size and outer border.
resize attribute
Attribute definition and usage instructions
resize attribute specifies one Whether the element is resized by the user.
Note: The resize attribute is suitable for calculating whether the overflow value of other elements is "visible".
Default value: none
Inheritance: no
##Version: CSS3
JavaScript syntax: object.style.resize="both"
Browser support: Firefox 4 +, Chrome, and Safari support the resize attribute.
Syntax
resize: none|both|horizontal|vertical:
none: Does not allow the user to resize the element. Do not allow the user to resize the element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 600px;
height: 300px;
border: 1px solid #000;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p>请注意观察方框右下角</p>
<div class="box"></div>
</body>
</html>
box-sizing attributebox-sizing has two values: content-box and border-box.
When box-sizing:content-box; is set, the browser's interpretation of the box model complies with the W3C standard. When it defines width and height, its Width does not include border and padding.
box-sizing: border-box;
When box-sizing:border-box; is set, the browser interprets the box model the same as pre-IE6 versions when it defines width and height. , border and padding are included in the width and height. The width and height of the content can be obtained by defining the width and height minus the width of the padding and border in the corresponding direction. The width and height of the content must be guaranteed not to be negative. If necessary, the size of the border box of the element will be automatically increased so that the width or height of the content is at least 0.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
</head>
<body>
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
</body>
</html>##outline-offset attribute The outline-offset property offsets the outline and draws it beyond the edge of the border.
There are two differences between outlines and borders:
1. The outline does not take up space
2. The outline may be non-rectangular
Syntax:outline-offset：<length> | inherit
<length>: Defines the value of the contour distance container. inherit: Default inheritance. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 100px;
width: 100px;
margin: 50px auto;
outline: 10px solid rgba(255,255,0,9);
background: black;
outline-offset: 10px;
border:5px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
