June 25 = 211-215

9.1.1 box-sizing attribute added by css3

Css3 adds the box-sizing attribute to set the width and height to control the width and height of the areas, which makes it easier for developers to control.

For example, what developers need to control is not the width and height of the content of the element, but the overall width of the element (including the overall width of the padding area and border ).

And height). This attribute supports the following attribute values:

Content-box: Set width and height to control the content area width and height of the element.

Padding-box: Set the width and height of the content area and patch area of the width and height control element.

Border-box: Set the content area and patch area of the width and height control elements plus the width and height of the border area.

Code example:

// Set the content area of the DIV element to PX in width and PX in height. The width and height of the border and the inner patch area are calculated as CSS styles.

Div {

Width: 200px;

Height: 100px;

Border: 20px solid # CCC;

Padding: 20px;

Box-sizing: Content-box;

}

 

9.1.1 resize attribute added by css3

Css3 also adds a resize attribute to specify whether to allow users to drag to change the element size.

This attribute supports the following attribute values:

None: the setting does not allow users to drag to change the component size.

Both: The setting does not allow users to drag to change the height and width of the component.

Horizontal: you are not allowed to drag to change the width of a widget.

Vertical: the setting does not allow users to drag to change the height of the component.

Inherit: inherits the resize attribute value from the parent element. This is the default value.

The resize attribute is valid for all HTML components with overflow configured.

Code example:

// Allows the DIV to change the CSS style of height and width by dragging

Div {

Width: 200px;

Height: 100px;

Border: 1px solid # CCC;

Resize: horizontal;

Overflow: auto;

}

 

9.2 locate relevant attributes

Location-related attributes are used to set the location of the target component, including whether it is floating on the page. By using the floating <div> element, You can freely move the page element.

To produce Donghua effect on the page.

Common positioning attributes are as follows:

Position: used to set the Positioning Method of the target object. This attribute is set to absolute, which allows the object to float on the page without considering it.

The layout of the surrounding content. If it is set to relative, the object will remain in the normal HTML stream. The position of the target object will refer to the previous object.

If the object is set to static, the target object is only referenced by the page.

The following attributes are valid only when the position attribute value is relative or absolute.

Z-index: used to set the sequence of the floating layer of the target object. The larger the value, the more floating layer floated above. This property does not affect the window controls (such as <SELECT> elements.

Top: used to set the top edge offset of the target object relative to the last parent object with the positioning settings.

Right: used to set the right offset of the target object relative to the last parent object with the positioning settings.

Bottom: used to set the bottom edge offset of the target object relative to the last parent object with the positioning settings.

Left: used to set the left offset of the target object relative to the last parent object with the positioning settings.

 

9.3 profile-related attributes

Profile-related attributes are mainly used to make a "Halo" effect around the target object, which does not occupy the actual physical layout of the page.

Profile-related attributes include the following:

Outline: This is a composite attribute. You can set the color, line type, and line width of the target object contour.

Outline-color: used to set the outline color of a component.

Outline-style: used to set the contour of a component. This attribute supports the following attributes: None, dotted, dashed, solid,

Double, groove, ridge, inset, and outset. These attribute values have the same meaning as the border line type.

Outline-width: used to set the Lun width of the target component.

Outline-offset: used to set the contour offset of the target component (that is, the distance between the contour and the border ).

Code example:

// Set the CSS style of the gray solid line outline with a width of 10px for the DIV Element

Div {

Width: 200px;

Height: 100px;

Outline: rgba (50,50, 50, 0.5) solid 10px;

}