CSS: Discussion about element width_html/css_WEB-ITnose

Discussion about element width

1. The element has no width

The first case: the element is an element in the document flow

<!-- 父元素宽度为100px --><div style="width:100px;">     <div style="background:orange;">dd</div></div>

<!-- 父元素宽度为200px --><div style="width:200px;">     <div style="background:orange;">dd</div></div>

<!-- 父元素不设宽度，继承body宽度 --><div>      <div style="background:orange;">dd</div></div>

Conclusion 1: Change the positioning of the sub-element to position: relative behaves the same as the above example, so when the element does not set a width, if If the element is an element in the document flow, then this element inherits the width of its parent element

The second case: the element is an element out of the document flow

    <!-- 父元素不设宽度，继承body宽度 -->    <div>        <div style="float:left;background:orange;">dd</div>    </div>

Conclusion 2: Changing the positioning of the sub-element to position:absolute or position:fixed has the same performance as the above example. Therefore, when the element does not have a width, if the sub-element is an element out of the document flow, Then the width of this element is equal to its content width.

2. The element width is 100%

The first case: the element is an element in the document flow

Conclusion 3: Change the above The example element width in Conclusion 1 is changed to 100%, and the performance is the same as the example in Conclusion 1. Therefore, if the element is an element in the document flow, , the width of the child element is 100% of the width of the parent element .

The second case: the element is out of the document flow element

1. The element is a floating element

<!-- 父元素宽度为100px --><div style="width:100px;">     <div style="float:left;background:orange;width:100%">dd</div></div>

<!-- 父元素宽度为200px --><div style="width:200px;">     <div style="float:left;background:orange;width:100%">dd</div></div>

Conclusion 4: When the element width is 100%, if the element is a floating element, then the width of this element is 100% of the width of the parent element .

2. The element is an absolutely positioned element

    <!-- 父元素宽度为100px -->    <div style="width:100px;">         <div style="position:absolute;background:orange;width:100%">dd</div>    </div>

<!-- 父元素宽度为100px --><div style="width:100px;position:relative">    <div style="position;absolute;width:100%;background:orange">dd</div></div>

<!-- 父元素宽度为200px --><div style="width:200px;position:relative">    <div style="position;absolute;width:100%;background:orange">dd</div></div>

Conclusion 5: When the element width is 100%, if the element is an absolutely positioned element, then the element width is equal to 100% of the element's offset-parent width

3. The element is a fixed positioning element

<!-- 父元素宽度为100px --><div style="width:100px;"><div style="position:fixed;background:orange;width:100%">dd</div></div>

<!-- 父元素宽度为100px --><div style="width:100px;position:relative"><div style="position:fixed;background:orange;width:100%">dd</div></div>

Conclusion 6: When the element width When it is 100%, if the element is a fixed positioning element, , the width of the element will always be 100% of the body width

Summary

1. No width is set on the element In the case of:

If the element is an element in the normal flow , the width of the element is equal to the width of the parent element; if the element is a element out of the document flow , the width of the element is equal to the content of the element Width

2. When the element width is 100%:

If the element is a ordinary flow element or a floating element , the element width is 100% of the width of the parent element ; If the element is absolutely positioned element, the width of the element is 100% of the offset-parent width of the element; if the element is fixed positioning element, the width of the element is always 100% of the body