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

This article mainly introduces what the box model in Css is, which can be used for reference by interested friends. I hope you can learn a lot after reading this article. Let's take a look at it.

The attribute names commonly used in web page design: content (content), padding (padding), border (border), border (margin), CSS box mode all have these properties.

These attributes can be understood by using the box, a common thing in daily life, as an analogy, so we call it the box pattern.

CSS box model is a kind of thinking model used by CSS technology which is often used in web design.

1.width (width)

2.height (height)

3.Margin (margin)-clears the area outside the border, which is transparent.

4.Border (border)-the border around the inside margin and outside the content.

5.Padding (inside margin)-clears the area around the content, and the inside margin is transparent.

6.Content (content)-the contents of the box, displaying text and images.

Total width = width + left fill + right fill + left border + right border + left margin + right margin.

Total height = height + top fill + bottom fill + top border + bottom border + top margin + bottom margin.

Code and effect demonstration:

The code section is as follows:

Box model

When not declared, the page defaults to margin and padding. You can remove the default margin and padding from the page by using the following code.

The code is demonstrated as follows:

If you write padding:20px; directly, the default is 20px up and down.

When padding:10px 20px; is set to two values, the first indicates up and down, and the second indicates left and right

When padding:10px 20px 30px is set to three values, the first value indicates that the second value above indicates left or right, and the third value represents the following.

For four values, use the upper right, lower right and left.

Thank you for reading this article carefully. I hope the article "what is the Box Model in Css" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.