Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the attributes of the css3 box model". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope that this article "what attributes the css3 box model has" can help you solve the problem.

Css3 box model has five properties: 1, width property, set the width of the content; 2, height property, set the height of the content; 3, padding property, set the inner margin; 4, margin property, set the outer margin; 5, border property, set the border.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css3 frame model

Box model, also known as frame model, is a kind of thinking model used by CSS technology, which is often used in web design. The box model (Box Modle) can be used to lay out elements, including inner margins, borders, outer margins, and actual content.

The area in the box

There are five main properties in a box: width, height, padding, border, and margin. As follows:

Width and height: width and height of the content (not width and height of the box).

Padding: inside margin.

Border: border.

Margin: outer margin.

For better understanding, here are examples from life:

Common box model area

Among the attributes of the box model, you can divide areas according to the effect of different attributes:

(1) Writing element content area: width+height

(2) the area where the box can be materialized: width+height+padding+border

(3) the actual position of the box: width+height+padding+border+margin

In the course of learning, learn to view the box model diagram in the browser console:

1. Width width

Width width attribute description attribute name width function setting width property value description auto (default) browser can calculate the actual width px pixel value defined width% defines the percentage width of the reference parent element width width special application

(1) if an element does not add a width attribute, element browsers with a default attribute value of auto; will automatically calculate the actual width according to its characteristics.

For example, if an element has an exclusive row, the value of its width attribute will automatically fill the width area of the parent element.

If it is an element and so on that does not need an exclusive row, the value of its width attribute is the width that the content of the internal element automatically expands.

(2) the element is special, there is no need to set the width attribute, the width will automatically adapt to the width of the browser window.

2. High height

Height height attribute description attribute name height function setting height attribute value attribute value for the area where element content can be added auto (default) browser can calculate the actual height px pixel value defined height% defines the percentage width of the reference parent element height height special application

If an element does not add a height attribute, and the default attribute value is auto, the browser will automatically calculate the actual height, that is, the height at which the contents of the internal element are automatically stretched out. The height of the element adapts to the height of the internal content.

Third, the inner margin padding

The inner margin padding attribute indicates that the attribute name padding functions to set the distance between the inside of the border and the width and height of the element. The background can be loaded, but the value of the inner margin padding attribute of the nested content can not be written, which indicates the value of the commonly used px unit.

① can be divided into a single attribute in four directions according to the direction of the inner margin.

Padding-top upper inner margin padding-right right inner margin padding-bottom lower right inner margin padding-left left inner margin padding four single attribute examples: P {padding-top: 10pxposition paddingMutual right: 20pxpositionpaddingMui bottom: 30pxtranspaddingMui left: 40px;}

The value of the inner margin padding attribute indicates that the ② simplifies the writing of a single attribute in four directions, which can have 1-4 values. Values are separated by spaces. Padding has multiple values. According to the number of attribute values of padding, there are four representations:

Four attribute values are set by the four-value method, three values are assigned to the upper, right, lower and left three-value method, two values are assigned to the upper, right and lower two-value method, only one attribute value is assigned to the upper and lower right and left single-value method, the values on the upper right and lower left are the same as those on the four sides of the padding four-value method example: P {padding: 10px 20px 30px 40px;}

Example of padding ternary method: P {padding: 10px 20px 30px;}

Example of padding binary method: P {padding: 10px 20px;}

Example of padding single value method: P {padding: 10px;}

4. Frame border

Border border property description

It is a compound attribute that sets the boundary area outside the inner margin. The ① composite attribute value of the outermost layer of the box is composed of three values, which are divided into the width, shape and color of the line.

Width, attribute value: a value in the form of a common PX

Shape, attribute value: word of shape

Color, attribute value: color name or color value for example border: 1px solid red; ② single attribute value

a. Divided by the type of attribute value

Lineweight: border-width attribute value: a common value in the form of PX. There are border widths in all four directions, property values are similar to padding, and there are four ways to write values. For example: border-width:1px 2px 3px 4px; linetype: border-style attribute value: word of shape. For details of common attribute values, see below; overall, it is also a comprehensive attribute writing method similar to padding. For example: border-style: solid; color: border-color attribute value: color name or color value. On the whole, it is also a comprehensive attribute writing method similar to padding. For example: border-color: # 00f # f00 # 0f0 # ff0;b. Each single attribute divided according to the direction of the border must be consistent with the compound property border, setting three property values. Top frame: border-top example: border-top: 1px solid blue; right border: border-right example: border-right: 1px solid blue; lower border: border-bottom example: border-bottom: 1px solid blue; left border: border-left example: border-left: 1px solid blue;c. Further subdivide border- direction according to direction and type. Note that when subdividing, you must first write direction division and then write type division, otherwise the attribute name is wrong, for example border-top-color: # ff0

Border-bottom-width: 2px

Add: possibility of border-style attribute value:

5. Outer margin margin

The outer margin margin attribute indicates that the attribute name margin sets the distance between the box and the box. The background attribute value cannot be rendered. The setting method of the outer margin is exactly the same as that of the inner margin padding, which is usually measured in px:

① single attribute:

P {margin-top: 20px; margin-right: 20px; margin-left: 20px; margin-bottom: 10px;}

② comprehensive writing method:

Four-valued method margin: 10px 20px 30px 40px

Ternary method margin: 10px 20px 30px

Binary method margin: 10px 20px

Single value method margin: 10px

This is the end of the content about "what are the properties of the css3 box model". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.