Examples of css box models and css box models

Examples of css box models and css box models

1. Overview of the css Box Model

1> let's take a look at w3c overview.

2> In fact, each element of css is a box (Box Model)

2.css box model type

1> w3c standard model ---------> element space width = content + border + padding + margin

2> traditional IE model (IE6-) -----> element = content (border + padding) + margin

3. Usage of box-sizing

1> attribute: box-sizing: content-box | border-box | inherit

2> usage: content-box is the default, and border-box is the traditional IE model.

3> one sentence: Use box-sizing to save layout problems

4> compatibility: IE8 +

Div + css Box Model

① Perform their respective duties. div is used to combine into a block (division), ul is used to create an unordered list, and li is the subitem of ul.
② Almost all elements in html have the "Box Model" feature, except link, style, script, mata and other elements that do not actually show.

What is the css box mode (Box Model)

You do not need to use tables for webpage layout. You can use boxes and box nesting with different sizes defined by CSS to orchestrate webpages. The webpage code in this way is concise, easy to update, and compatible with more browsers. You can add the content you want to add in the box.