Several error-prone css box model details and error-prone css

Several error-prone css box model details and error-prone css

Css is one of the skills required by the front-end. Box Model ,:

Generally, it is border, margin, padding, and content. The concept is quite understandable. However, when the box model is used with other attributes, it may be difficult for you to answer the question. Let's take a look at the details of the css box model that is easy to make mistakes.

Question 1: When nesting block-level elements, what is the reference standard of the child element margin? Specifically, is the content-box, padding-box, or border-box of the parent element?

Let's look at the following example:

        #box3        {            width:400px;            height:400px;            margin:20px;            padding:20px;            border:20px solid;            background-color:#ccc;            overflow:hidden;        }        #box3_3        {            width:200px;            height:200px;            margin:20px;            padding:20px;            border:20px solid #0f0;            background-color:#f00;        }

 

We can clearly see that the sub-element margin takes the content-box element as a reference.

Question 2: overflow: Where is the hidden excess? Specifically, if content-box is exceeded, Will padding-box or margin-box be hidden?

For example, css is as follows:

        #box1        {            width:100px;            height:100px;            margin:20px;            padding:20px;            border:20px solid;            background-color:#ccc;            overflow:hidden;        }        #box1_1        {            width:200px;            height:200px;            background-color:#f00;        }

 

You can see through the above example. Overflow: hidden, hide the part beyond the padding-box

Question 3: position: What is the Positioning Reference point of absolute?

We all know that after applying position: absolute to an element is absolutely positioned. The Positioning Reference is based on the parent element that has the positioning attribute recently. You can also use left and top to specify the offset distance relative to the parent element. In this case, what is the parent element in the upper left corner? Which point is used to locate the element itself?

        #box2        {            position:relative;;            width:400px;            height:400px;            margin:20px;            padding:20px;            border:20px solid;            background-color:#ccc;        }        #box2_2        {            position:absolute;            left:auto;            top:auto;            width:100px;            height:100px;            padding:20px;            border:10px solid #0f0;            background-color:#f00;        }

 

Sub-RMB are known as margin Sub-element without margin Left/top is the default value. Left/top is 0

Click the button above to draw the following conclusion:

• The reference point of the element itself is the outer box, that is, margin-box. If there is no margin, it is border-box, and so on.
• After the left/top value is specified, refer to the upper left corner of the padding-box of the parent element.
• Left/top is the default value, and the child element is still in the original position, that is, the upper left corner of content-box relative to the parent Element

Question 4: Which region does the background of an element cover? border-box? Padding-box or margin-box?

The background-color and background-image must be distinguished here.

• 1. For the background color, the color will fill the border-box.
• 2. For background images, padding-box is filled by default. In the upper-left corner, fill in from the padding-box area. The right side and lower side will go beyond the border-box area, but will not go beyond the margin-box area.
• 3. In css3, you can use background-originr to change the filling Area of the background image.

Let's look at the following css,

        #box4        {            width:100px;            height:100px;            margin:20px;            padding:20px;            border:20px dotted;            background-color:#ccc;            overflow:hidden;        }        #box5        {            width:400px;            height:300px;            margin:20px;            padding:20px;            border:20px dotted;            background-color:lightblue;            background-image:url('http://images.cnitblog.com/i/207603/201404/151302359783891.png');            background-repeat:no-repeat;            overflow:hidden;        }

Background-origin:   Border-box    Padding-box    Content-box