[CSS] thinking and re-Learning-about the influence of CSS floating and positioning on the space occupied by element width/margin/other elements, css width

[CSS] thinking and re-Learning-about the influence of CSS floating and positioning on the space occupied by element width/margin/other elements, css width
 I. Difference between width: auto and width: 100% 1. width: 100% is used to fill the width of its reference element.(Generally, the reference element = parent element is written here as a reference element instead of a parent element. I will elaborate on it below)2. width: auto is also aimed at "full reference element width. But the difference is that it can dynamically adjust the width value based on the values of margin and padding.When the width of the reference element is certain, the sub-element's margin or padding is a little more, so the sub-element's width will be a little less.To put it bluntly, width: auto tries to reach this level: sub-element width + padding (left and right) + margin (left and right) = width of the reference element (the reference element is generally a parent element)[Example ]:

<style type="text/css">    .outer{        width:200px;        height:100px;        border:1px solid black;        margin:20px;    }    .inner-100percent{        width: 100%;        height:100px;        background: darkcyan;    }    .inner-auto{        width:auto;        padding:0px 10px;        height:100px;        background:salmon;    }</style>

<div class="outer">        <div class="inner-100percent"></div>    </div>    <div class="outer">        <div class="inner-auto"></div></div>

 

Demo: Looks the same? In fact, they are different. Let's take a look at the box model checker in the console: Here, the 10px padding * 2 + width (auto) = 200px (reference element width)Let's change the CSS above and change the inner-auto part:

. Inner-auto {width: auto; padding: 0px 10px; // set the left and right margins to 10px margin: 0px 10px; // set the left and right margins to 10px height: 100px; background: salmon ;}

 

Demo: 10px padding * 2 + 10px margin * 2 + width (auto) = 200px (reference element width)  [Note]: width: 100% does not include its own margin and padding in the width of the reference element, so if we change the CSS part of the inner-100percent:

.inner-100percent{        width: 100%;        height:80px;        padding:0px 10px;        background: darkcyan;  }

The demo changes to: After setting width: 100%, the child element "overflows" the parent Element [Note] the default width is width: auto, but the default height is 0.  2. Effects of floating/positioning on width: auto and width: 100%  1. Influence of floating/positioning on width: 100%Floating/Positioning affects width: 100% by changing the reference of the element width, which has the following three rules: 1.1  By default, the reference is based on the width of its parent element.This is what the demo we see above shows 1.2: The child element is relatively located and still uses its parent element width as the reference.We add relative positioning to the style of the inner-100percent

.inner-100percent{   position:relative;   width: 100%;   height:100px;   background: darkcyan;}

Demo: no effect 1.3 The absolute positioning of sub-elements is discussed in two cases.  <1> by default, the width of the body element is used as the reference.We change the style corresponding to the inner-100percent:

.inner-100percent{   position:absolute;   width: 100%;   height:100px;   background: darkcyan;}

 

Then we will see the next bad scene, the width of the inner-100percent turned to the body, that is, the width of the full screen, so what should we do when we use positioning to cause this situation? See the following: <2> If an upper-layer element is located, the width of the element closest to the positioning is used as the benchmark:We add a parent element to the inner-100percent that is relatively positioned:

<div class="outer">      <div>  </div></div>

 

Demo: Then it becomes normal again. 1.4 Child element floating No effect on width: 100% (Not displayed here) 2. Influence of floating/positioning on width: auto  2.1 By default, width: auto occupies a full rowDo not show 2.2 The sub-element is relatively located and has no effect. It still occupies a full row.Do not show 3.3 absolute positioning of sub-elements, fixed positioning, floating, width: auto is equivalent to width: 0Change the style above:

. Inner-auto {position: absolute; // or position: fixed; or float: left width: auto; height: 100px; background: salmon ;}

 

In this case

(Note that inner-auto is originally colored)

At this time, the div width has been squashed to 0. From the console, we can see inner-auto: Therefore, when we are absolutely positioning, fixed positioning, and floating, remember to set the width of the element.  Iii. "stacked phenomenon" of margin" 

<style type="text/css">    *{margin: 0;padding: 0;}    .div{        width:100px;        height:50px;        margin: 10px;        border:1px solid black;    }    .div1{        background:seagreen;    }    .div2{        background: cornflowerblue;    }    .div3{        background: gold;    }    .div4{        background: lightcoral;    }</style><body>    <div class="div div1">div1</div>    <div class="div div2">div2</div>    <div class="div div3">div3</div>    <div class="div div4">div4</div></body>

Demo: the distance between the upper and lower divs is 10px. Why? Why is it 10px? Should the margin of the four divs be 10px and the upper and lower distance between the two divs be 10px + 10px = 20px? Yes, Under normal circumstances (no floating, not the inside-line box), the margin of the side-by-side div can overlap with each other, and the overlapping value is the larger one of the two. 4. Floating will break this cascade relationship. If we add floating to div1, dv2, and div3

.div2,.div3,.div4{         float: left;}

Demo: The spacing is changed to 20 PX. At this time, the margin does not overlap. 5. Influence of floating/positioning on physical space of other elementsThe first thing we need to mention is a word that often hangs in our ears-"getting away from document flow" Off-Document Stream = no space occupied by elements (physical)

.div2,.div3{        float: left;}

Demo: Float, position: absolute/fixed can be separated from the document stream, whilePosition: relative cannot leave Document StreamHere, we classify the elements that are separated from the document stream as "floating streams", and the elements that are not separated from the document stream as "Standard streams". So: 1. the order of floating streams is the same as the order of elements in HTML. Elements floating first in HTMl are placed at the front. This "Front" refers to the end near the edge of the screen, "The back is to stay away from the end of the screen"The above example is based on

.div1,.div2,.div3,.div4{        float: left;}

 

.div1,.div2,.div3,.div4{       float: right;}

 

2. the starting position of the floating stream is determined by the position when the first floating element is not floating.Let's go back to the above example. When div2, div3, and div4 move to the left

 

The starting position of the floating stream is determined by the original position of the first floating element. Other elements can only follow the "lead floating element"  However, even if other elements do not follow the "lead element", but are floating in the opposite direction, they cannot always be higher than the "lead floating element"

.div2,.div3{     float: left;}.div4{     float:right;}

 

3. Floating streams do not affect the positioning of standard stream elements, but affect the positioning of standard stream texts.If we take a closer look at the demo at the beginning of "5", we will find an intolerable bug: isn't the text "div4" wrapped in the div4 element, why is the floating element div2 "deleted? Didn't it just say that floating = out of the Document Stream = does not occupy the physical space of other elements? Yes. Here we are talking about elements, not text. Floating elements will affect the text location! We can even speculate that the initial design of float is to solve the following problem-to wrap the text around an image, just like the W3C case below:

 

4. Floating streams are placed above the standard streams (that is, the elements of the floating streams will overwrite the elements of the standard streams)This can be seen from the above example. I will not talk about it here. Vi. Practical casesWell, after talking so much about it, it is quite easy to use the above knowledge points for a practical case. The following is a classic question about CSS layout: two columns of layout, fixed width on the left, adaptive on the right:

<Style type = "text/css"> * {margin: 0; padding: 0 ;}. div {border: 1px solid black; margin: 10px ;}. left {float: left; width: 200px; height: 200px; background: darkcyan }. right {margin-left: 230px; height: 400px ;} </style> Demo:
 
 
 
[Implementation ]:As mentioned above, float will be separated from the document stream so as not to occupy the physical location of other elements, and we let div1 move to the left, this means that we can regard div1 as nonexistent when considering div2 layout. At this time, because div2 defaults to width: auto; and the reference element is body, set margin-left: 230px; (slightly greater than the width of div1), then due to width: auto automatically calculates the width. In this case, div2 width = body width (full screen width)-230px = removes the remaining screen width of the div1 part to implement adaptive on the right bar.