Width: 100% what is the benchmark test, width reference

Width: 100% what is the benchmark test, width reference

At first, we encountered the following problem: when the box model is set to box-sizing: border-box; (this is often done on mobile terminals ). The sub-box width: 100%. Is the sub-box width equal to the contend length of the parent box or the condend + padding + border length?

Css and html:

Result:

(Width of second) = (length of contend of first)

 

 

 

 

Next, we will summarize the reference of width: 100% under normal conditions (box-sizing: contend-box:

1. Standard stream: the sub-box is in the standard stream, and its width is equal to the width of the parent box at the upper level (whether floating or locating the parent box)

2. Floating Condition: Sub-box floating, same as above

3. Positioning: position: relative or absolute. Its width is equal to the width of the last position not static in the upper box.

When the sub-box is position: fixed, width is based on html.