The essence of the box model is to describe a rectangular box from a specific aspect. The CSS box model is a conceptual model formed by describing an element in the DOM and its layout in the document according to the visual format model.
Model size
Each box (element) includes: inner edge content and optional and re-settable surrounding attributes: padding, margin, border. ( According to different browsers, the default value of each attribute is somewhat different. The main difference is the PC side: IE and other high-level browsers; the mobile side: WeChat browser, android and IOS browsers. )
Since we are talking about size, we need to mention how to achieve this size. The size of the content area can be changed according to the amount of content in the box, the size, quantity, etc. of pictures and text; it can also be changed by setting the values of width and height attributes. Padding, margin, border can be directly set to control.
Figure 1.1 Box model
What is the difference between the browser implementation and the standard?
The standard is good, but not every browser can obediently follow this rule, there will always be two noises. The lower version of Internet Explorer (IE6/IE5) is a very famous group.
What is each Element used for? Package content (or empty content) chant! So how to define the length and width of this content, there are differences. Refer to Figure 1.1
IE6: element width = content width and height + padding + border ( If you set an element width=100px, padding=20px, then you find that the width of your text and image is only 100-20*2=60px. )
Other: element width = width and height of content
How to solve it? Ok! The simplest and rude way is to calculate: subtract the value of padding and border, the unity of content display.
CSS3之box-sizing？
Purpose: The attribute is used to specify the width and height values to be applied to the content box or the border box. Not compatible with lower version browsers! !
Note: Use this attribute to analyze the box the same way as IE6. In the usual development process, you will find border-box (IE6 parsing method), which is more convenient and reasonable.
Margin is invalid?
Description: If multiple divs are nested, the margin-top setting value of the inner layer is applied to the outer div. It often appears in IE.
solve:
- Parent div setting: overflow: hidden
- Change margin-top to padding-top
- The parent element produces overlapping margins, and there is a padding that is not 0 or a border that has a width of not 0 and style is not none; the parent div plus: padding-top: 1px;
- Let the parent element generate a block formating context (see the following table for the implementation method); add the parent div: float: left/right; position: absolute; display: inline-block/table-cell (or other table types); overflow: hidden /auto
reference:
（1）Box model（www.w3.org）