2017 summary of the front-end article--CSS box model detailed

CSS box model is the basis of CSS, but also difficult, this problem often in the interview will be asked, belongs to the classic problem. A lot of the blog is also very vague, so, I am here to reorganize. You can think of each HTML tag as a block, and then this block is wrapped in a few small squares, like a box layer of wrapping, this is the so-called box model. Box model is divided into IE box model and standard box model. IE box model and the standard box model differenceWhat is it? 1. Standard Box Model: The Width,height property contains content only and does not contain border and padding. 2. IE Box Model: the attribute width,height contains border and padding, which refers to Content+padding+border. Which box model to use in the ie8+ browser can be used by box-sizing(CSS new property) control, the default value is Content-box, that is, the standard box model, if the box-sizing is set to Border-box is the IE box model. If DOCTYPE is missing in ie6,7,8, ie mode will be triggered. In the current standard, the box model can be switched freely by box-sizing. Content-box (standard box model) Width = content height = content border-box (ie box model) width = border + padding + content height = border + padding + Content of the height of the Google browser, press F12, and then pull the scroll bar on the right bar to the bottom you will see a thing:

The code to understand it, more intuitive, as follows

. Box {        width:200px;         height:200px;         background-color:pink;}

At this point, the box size is the content size.

. Box {        width:200px;         height:200px;         background-color:pink;         padding:20px;}

At this point, the width of the box becomes 240x240, obviously, padding is able to change the size of the box, then the box size is equal to content+padding.

. Box {        width:200px;         height:200px;         background-color:pink;         padding:20px;         Border:10px solid black;}

At this point, the width of the box becomes 260x260, so the box size is equal to Content+padding+border. But the size of the box has not changed. So, the size of the box is content+padding+border that is, the content (width) + The inner margin plus the border, without margin. Most of the time, we will mistakenly calculate the margin, in which case, the box size should be 260x270, but the reality is not so. CSS's box model consists of content, padding (padding), Border (border), margin (margin). But the size of the box is determined by the parts of Content+padding+border, The margin is the position of the box, not the size of the box! We can try to set the Box-sizing property for the pink squares above for border-box discovery, and will find: no matter how we change border and padding box size is always defined by width and height. As follows

. Box {        width:200px;         height:200px;         background-color:pink;         box-sizing:border-box;         padding:20px;}

We should try to use the standard Web model when writing page code (to declare the DOCTYPE type in the page), which avoids the incompatibility of multiple browsers on the same page. Because if the DOCTYPE type is not declared, IE will interpret the box model as IE box model, and Firefox will interpret it as a box model. If the DOCTYPE type is declared on the page, all browsers will interpret the box model as a box model.

Duo to Mi er
Links: https://juejin.im/post/59ef72f5f265da4320026f76
Source: Denver Nuggets
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

2017 summary of the front-end article--CSS box model detailed