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

This article mainly explains "what is the model construction of Css". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the model construction of Css".

In the "box" model, each HTML element can be treated as a "box". A "box" has: width, border, inner fill, outer margin

1. Width (width) and height (height): refers to the width and height of the content, excluding borders, outer margins, and inner padding.

two。 Padding: refers to the distance between the content and the border, including four directions: top, right, bottom, and left

3. Margin: refers to the distance outside the border line.

Calculate the total emptiness of a box

Suppose: the total width is 100px, the border is 1px, the inner fill is 10px, and the width of the content is calculated.

Width = 100px-1px*2-10px*2 = 78px

Suppose: the total width is 100px, the width of the content 50px, how much is the left and right inner filling?

Padding-left = (100px-50px) / 2 = 25px

Filling padding in CSS

Padding-left: distance from the left line to the content

Padding-right: the distance from the right line to the content

Padding-top: the distance from the top line to the content

Padding-bottom: the distance from the bottom line to the content

Padding: sets the inner fill distance of four edges at the same time

Padding:10px; / / indicates that the top and bottom, left and right inner padding are all 10px.

Padding:5px 10px; / / indicates that the top and bottom are 5px and the left and right are 10px.

Padding:5px 10px 15px; / / indicates that the top is 5px, the left and right is 10px, and the bottom is 15px

Padding:5px 10px 15px 20px; / / indicates that different inner fillings are set on the top, right, bottom and left, and the order cannot be disordered.

CSS outer margin margin

Margin-left: the distance beyond the left edge

Margin-right: distance beyond the right sideline

Margin-top: the distance beyond the top boundary line

Margin-bottom: the distance beyond the bottom line

Margin:10px; / / indicates that the four outer margins are all 10px

Margin:10px 15px; / / indicates that the top and bottom edges are 10px, and the left and right margins are 15px.

Margin:5px 10px 15px / / indicates that the upper margin is 5px, the left and right margin is 10px, and the lower margin is 15px

Margin:5px 10px 15px 20px; / / set four outer margins respectively, in the order of "top right, bottom left"

Thank you for your reading, the above is the content of "what is the model construction of Css". After the study of this article, I believe you have a deeper understanding of what the model construction of Css is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.