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

This article mainly shows you the "CSS box model how to achieve web page width and height design", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS box model how to achieve web page width and height design" this article.

Using the principle of CSS box model to design the width and height of web pages

When we design and lay out a web page, we often encounter such a situation, that is, the width or height of the final web page will exceed our pre-designed size, in fact, this phenomenon is caused by the so-called CSS box model.

# test {margin:10px;padding:10px;width:100px;height:100px;}

As in the previous paragraph of code, very often we will calculate its position as width:120px,height:120px, because under normal understanding, padding is the inner margin, which should be included in the width, while margin is the outer margin, so width=margin-left+margin-right+width, but the browser's interpretation of the CSS box model is not the case, so in the end, we will find that the width and height of the layout page will exceed our expected calculation. * causes a dislocation on the display.

◆ is not the case, the real calculation of the position occupied by test should be width=margin-left+margin-right+padding-left+padding-right+width, that is, the real size of width should be the inner margin + outer margin + width itself, that is to say, the real size of test should be 140px. The calculation of height is the same as that of width.

◆ and if you add a border to the test, the width and height algorithm should also add the size of the border.

# test {margin:10px;padding:10px;border:5px; width:100px;height:100px;}

The width of the test here should be the outer border + inner border + border + width itself, so the width of test is 150px.

As shown in the following figure, the real location of width and height is not its own small piece, but all the way to the outermost dark blue layer.

These are all the contents of the article "how to achieve web page width and height design with CSS box model". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.