Css default width and css default width

Css default width and css default width

<Div class = "boxa"> <div class = "boxb"> I am a div </div>

. Boxa {width: 300px; height: 300px; background-color: green; border: 2px solid red;}. boxb {<! -- If there is no write width, the default width is 100% of the parent element --> height: 300px; background-color: orange; border: 2px solid red ;}

The actual width of boxb in this CodeNo300px;

Although it inherits 100% of the parent element;

That's what I understand.

The boxc width is PX, And the boxd width is 296px. That is to say, the parent element boxc can set the box model at will.

The boxd width is equal to the PX width you set, not the width of all the box models.

You only inherit its width but not its other values..

Boxd calculates all the box models together, that is, the box model with 300 pixel boxd of 296px width + 4px = boxc of the border is not changed.

Let's look at a picture.

The boxd in this figure is 276x276 + 20 + 4 = 300px in width.

Equal to the width of boxc

That is, how do you add the box model to your parent element.

You can add a box model to the sub-element. The final value must be equal to the width of the parent element. If this parameter is exceeded, it is subtracted from the width.

 

If you have any bad or wrong words, please correct them.