CSS3 Summary Study (i): CSS3 user interface

In CSS3, there are many new user interface properties, this article focuses on Resize,box-sizing,offset.

browser support, e.g., images from W3school

1.CSS resizing

The Css3,resize property specifies whether the user can adjust the element size.

Note: If you want this property to take effect, you need to set the element's overflow property, which can be auto, hidden, or scroll.

Grammar:

resize:none|both|horizontal|vertical;

Value	Describe
None	The user cannot adjust the dimensions of the element.
Both	The user can adjust the height and width of the element.
Horizontal	The width of the element can be adjusted by the user.
Vertical	The height of the element can be adjusted by the user.

Display, the lower right corner of the place can be freely adjusted size.

2.CSS3 Box Sizing

The Box-sizing property allows you to define exactly what is appropriate for a particular area.

We know that the box model is divided into Standard model and IE model, the width and height of the standard box model is the width of content, and the width and height of the IE box model is composed of Content+padding+border. In order to be compatible with different browsers, we usually use box-sizing to turn the standard box model into an IE box model (or vice versa, as long as the uniform standard is on the line).

Grammar:

Box-sizing:content-box|border-box|inherit;

Value	Describe
Content-box	This is the width height behavior specified by the CSS2.1. The width and height are applied to the element's content box, respectively. Draws the inner margin and border of the element outside the width and height.
Border-box	The width and height set for the element determines the bounding box of the element. That is, any padding and borders specified for the element will be drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and padding from the set width and height.
Inherit	Specifies that the value of the Box-sizing property should be inherited from the parent element.

3.CSS3 Outline Offset

The Outline-offset property offsets the outline and draws the outline at a position beyond the edge of the border.

The outline differs from the border by two points:

• Contour does not occupy space
• The profile may be non-rectangular

Grammar:

Outline-offset:length|inherit;

Value	Describe
Length	The distance between the outline and the edge of the border.
Inherit	Specifies that the value of the Outline-offset property should be inherited from the parent element.

Display, red for outline:

Specific website Description: http://www.w3school.com.cn/css3/css3_user_interface.asp

CSS3 Summary Study (i): CSS3 user interface