Frontend path for backend programmers 04-box model details, backend 04 --

Frontend path for backend programmers 04-box model details, backend 04 --

Directory

• Illustration
• Box Model size reference
• Use the developer tool of the browser to view the problems encountered when the element height (width) is high.

I. Illustration

Note: content, padding (inner margin), border (border), and margin (outer margin) are selected from the inside and outside ).

For example, a courier car contains many express parcels (packed in boxes), and each package contains different items.

Content: a region that truly accommodates other things. For example, the content of a courier is the space where the packages are located;

The content of each package is the space of those things.

Other elements, text, and images can be placed in the content..

Border: border of the box. For example, the iron sheet of the courier and the outer box of the package.

You can specify the border color, width, and style.

Padding: the distance between content and border.

Margin: the distance between a package and a package. This distance can be negative because it can overlap with each other.

Note: Each browser initializes the margin and padding values of an element.

Therefore, each time you write a style, you need to initialize the elements involved in the page..

/* List the elements in the current page */body, div, span {margin: 0px; padding: 0px ;}

 

Ii. Box Model size reference

By default, you can set the width and height of an element. In fact, you can set the width and height of content.

Q: What is the actual width and height of the element?

A: The actual width is equal to that of left margin + Left border + Left padding + content + right padding + Right border + marmargin.

 

Q: What if I want to directly set the actual height of an element?

A: CSS3 adds the box-sizing attribute to solve this problem. It has three values: content-box, border-box, and inherit.

Content-box: it is the general default situation, which refers to the content height and width.

Border-box: it is literally the height and width of border.

Inherit: inherits the value of the box-sizing attribute from the parent element.

 

Iii. problems encountered when viewing the high (WIDE) degrees of elements using browser Developer Tools

When Google Chrome is used to review the element feature, it prompts the height and width of the current element. However, the actual height and width of the calculated element are inconsistent with the prompt information.

<Style> div {width: 200px; padding: 20px; border: 1px solid red; margin: 10px ;}</style> <div> text content </div>

The calculation result shows that the actual div width is 10 + 1 + 20 + 200 + 20 + 1 + 10 = 262px;

The result displayed by the developer tool is 242px, with a difference of 20 PX;

By adjusting different parameters, we can conclude that:The result calculated by the review element does not include the margin value.