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

This article mainly introduces "what is the css box model". In daily operation, I believe many people have doubts about what is the css box model. Xiaobian consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "what is the css box model"! Next, please follow the small series to learn together!

CSS box model is a mental model used by CSS technology, which is often used in web design.

So, after knowing what the css box model is, what should we understand about the css box model?

Understanding CSS Box Model

We can understand the css box model as a box in everyday life.

Content is what is in the box, it has height and width, can be a picture, can be text or small box nesting, in reality, the content can not be larger than the box, the content is larger than the box will burst the box, but in CSS, the box has elasticity, at most the content is too large will expand the box, but will not damage the box.

Padding is filling, just as we fill something in order to ensure that the things in the box are not damaged, such as foam or plastic film, the filler is large and small, soft and hard, and the response is the size of padding in the web page.

Border is the border of the next layer, because the border has size and color attributes, which correspond to the thickness of the box and its color or material.

Margin is the distance between our box and another box or something else. If there are many boxes, the margin is the direct distance between the boxes, which can be ventilated, beautiful and easy to take out.

There are two types of CSS box models, one is the W3C box model, which is the standard model, and the other is the IE box model.

CSS Two box model setup methods:

/* Standard Model */

box-sizing:content-box;

/*IE model */

box-sizing:border-box;

At this point, the study of "what is a css box model" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

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.