CSS3 Box Model Temperature and css3 Temperature

CSS3 Box Model Temperature and css3 Temperature

CSS has a basic design model called the box model, which defines how elements in Web pages are parsed as boxes. Each box has a different display interface. The following describes the box model. There are several box models: inline, inline-block, block, table, absolute position, and float.
The browser regards each element as a box model. Each box model is determined by the combination of the following attributes: display, position, float, width, height, margin, paddinghe border, etc, different types of box models produce different la s

What is a box model?
Every element in the page is a box model, including HTML and body. For example, each box model consists of multiple attributes.

Reset the resolution mode of the Box Model
In the W3C traditional CSS2.1 box model, the width and height values are declared to control the width and height of the content area, and then the top margin and border are attached, which is called the content box model.
In CSS, the box model is divided into two types. The first is the W3C standard model, and the other is the traditional IE model. The similarities between the box model and the box model are the element size calculation model, specifically, it is the calculation relationship between the width, height, padding, border, and actual size of the element. The difference is that the calculation methods of the two are inconsistent.
1) W3C standard Box Model
Outer box size calculation (element space size)
Element space Height = content height + inner margin + border + outer margin
Element space width = content width + inner margin + border + outer margin
Inner box size calculation (element size)
Element height = content height + inner distance + border (height is content height)
Element width = content width + inner margin + border (width is content width)
2) Traditional offline model of IE (IE6 or earlier, excluding IE5.5 + in IE6 or QuirksMode)
Outer box size calculation (element space size)
Element space height = content height + outer margin (height includes the element content width, border, and internal margin)
Element space width = content width + outer margin (including element content width, border, and internal margin)
Inner box size calculation (element size)
Element height = content height (height includes the width, margin, and inner margin of the element content)
Element width = content width (width contains the content width, margin, and padding of the element)
In my personal understanding, the box model in IE directly Sets box-sizing: border-box;

1. CSS3 box model attributes
Syntax and parameters: box-sizing: content-box | border-box | inherit
Description of three attribute values:
Content-box: Default Value, allowing elements to maintain the W3C standard box model. Element width and height (width/height) = element border width (border) + element inner distance (padding) + element content width and height (content width/height ), that is, element width/height = border + padding + content width/height
Border-box: This value will redefine the mode composed of box models in CSS2.1, so that elements can maintain the traditional box Model of IE (IE6 or earlier versions and 6 ~ 7 ). The width or height of an element = the width or height of the element content. According to the box model introduction, the content width or height here contains the border, padding, content width or height of the element (here the content width or Height = the width or height of the box-border-inner distance)
Inherit: this value is the box model mode in which the element inherits the parent element.

The box-sizing attribute is mainly used to control the resolution mode of the element's box model. Its main purpose is to control the total width of the element. Box-sizing: border-box; this setting makes the page layout more convenient. You only need to set the width of the element, and the total width remains unchanged.
Note: In Firefox, box-sizing can also set a padding-box attribute value to specify the width or height of the element, including the width or height of the content and the inner distance, the Border width is not included.

Browser compatibility

2. CSS3 content overflow attribute
The box model, that is, a container, has a space and a size. When some content cannot fit in the box, it will exceed the box. In this case, you can use overflow (CSS2.1) attribute to specify how to display content that cannot be accommodated in the box. The overflow-x and overflow-y attributes are added to CSS3.
Syntax and parameters:
Overflow-x: visible | hidden | scroll | auto | no-display | no-content
Overflow-y: visible | hidden | scroll | auto | no-display | no-content
Like the overflow attribute parameters, different values of the overflow-x and overflow-y attribute values play different roles.
Visible: default value. It indicates that no content in the container is cut and no scroll bar is added. The element is cut to the window size of the contained object, and the clip attribute setting will fail.
Hidden: when the content overflows from the container, all content is hidden and the scroll bar is not displayed.
Scroll: overflow-x displays a horizontal scroll bar regardless of whether the content overflows from the container. overflow-y displays a vertical scroll bar.
Auto: Cut the content and add a scroll bar as needed. That is to say, when the content exceeds the width or height of the container, the overflow content will be hidden in the container and a scroll bar will be added. You can drag the scroll bar to view the content hidden in the container.
No-display: the element is not displayed when the content overflows the container. It is similar to adding the display: none declaration to the element.
No-content: the content is not displayed when the content overflows the container. This is similar to adding the visibility: hidden declaration.

Browser compatibility

3. CSS3 free scaling attribute
To enhance user experience, CSS3 adds many new attributes. resize is an important attribute and a very practical attribute, it allows you to change the size of an element by dragging it.
Syntax and parameters:
Resize: none | both | horizontal | vertical | inherit
Attribute value description:
None: you cannot drag an element to modify the size.
Both: You can drag an element and modify its width and height.
Horizontal: You can drag an element to modify the width of the element, but not the height of the element.
Vertical: You can drag an element to modify the height of the element, but not the width of the element.
Inherit: inherits the resize attribute value of the parent element.

Browser compatibility

4. CSS3 external profile attributes
The effect of the outer contour outline on the page is very similar to that of the border, but it is completely different from that of the element border. The outer contour does not occupy the layout space of the webpage, not necessarily the rectangle, the outer contour is a dynamic style that is displayed only when the element gets the focus or is activated.
Syntax and parameters:
Outline: [outline-color] | [outline-style] | [outline-width] | [outline-offset] | inherit
Attribute value description:
Outline-color: defines the color of the contour line. The default value is black.
Outline-style: defines the outline style. The default value is none.
Outline-width: defines the width of the contour line. The attribute value can be a width value. The default value is medium, indicating to draw a contour line of medium width.
Outline-offset: the value that defines the cheap position of the contour border. This value can be a negative value. If it is a positive value, it indicates how many pixels the contour border has shifted outward. If it is a negative value, it indicates how many pixels the contour border has shifted inward.
Inherit: The outline effect of the element inherited from the parent Element

Browser compatibility

Comparison between outline and border
1) border is a part of the box model that directly affects its size. outline does not affect the Document Stream or the webpage layout.
2) border can be set on one side, and outline is always closed; no outline-top or outline-left
3) The external contour line created by outline may be non-rectangular. In my understanding, the outline is hidden when the element is on the edge of the document, while the border is not hidden.
4) border can only be extended out, while both inside and outside outline can.