CSS Self-study note (+): CSS3 user interface

In CSS3, there are also new properties on the user interface that can reset elements or box sizes, outlines, and so on.

Browser support for new partial properties

Properties	Browser Support
Resize	Ie	Firefox	Chrome	Safari	Opera
Box-sizing	Ie	Firefox (-moz-)	Chrome	Safari	Opera
Outline-offset	Ie	Firefox	Chrome	Safari	Opera

Note:

• The current mainstream browsers are not very good at supporting new attributes, so be careful when defining these attributes.

New Attributes and descriptions:

Properties	Description
Appearance	Change the appearance of elements, etc.
Box-sizing	Allows a way to define specific content that adapts to an area.
Icon	Provides the creator with the ability to set element styles using the icon equivalents (currently not supported by the browser)
Nav-down	Where to navigate when using the Arrow-down navigation key.
Nav-index	Defines the tab control order for an element.
Nav-left	Where to navigate when using the Arrow-left navigation key.
Nav-right	Where to navigate when using the Arrow-right navigation key.
Nav-up	Where to navigate when using the Arrow-up navigation key.
Outline-offset	Offsets the contour and draws the outline at a position beyond the edge of the border.
Resize	Whether the dimension of the element can be adjusted by the user.

After the resize attribute is defined, the element size of the element can be adjusted by the user in the format:

resize:none|both|horizontal|vertical;

Note: None is the user cannot resize the element, both is the user can adjust the height of the element, horizontal is the user can adjust the width of the element, vertical is the user can adjust the level of the element.

Users can resize themselves

The Box-sizing property is primarily intended to address the high-width parsing of the box in IE6 previous versions of the browser including border and padding, while other browsers do not include border and padding when parsing the width of the box.

Define the box-sizing format:

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

Box-sizing the meaning of each attribute value:

value	Description	Case
Content-box	Standard Box Properties, element width =width + border + padding, i.e. padding and border are not included within the defined width and height.	*{box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee;}
Border-box	Weird Box Properties, element width =width, i.e. padding and border are included within the defined width and height.	*{box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee;}
Inherit	Inherits the value of the Box-sizing property from the parent element.

Border-box the effect of the property value:

Left half part right half

With the same CSS style code, the box-sizing attribute is defined as the Content-box effect:

Left half part right half

Outline-offset is the value of the offset container that sets or retrieves the line outline outside the object, in the format:

Outline-offset: <length>|inherit;

<length>: Defines the contour offset with a length value and allows negative values.

Inherit: Inherits the value of the Outline-offset property from the parent element.

*{width:220px;padding:10px;outline:1px dashed #333; outline-offset:4px;border:3px solid #333;}

CSS Self-study note (+): CSS3 user interface