CSS设定HTML元素的高宽比与宽度的各种各样状况总

1.元素不设宽度
第1种状况：元素为文本文档流中元素
<!-- 父元素宽度为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>

结果1：把子元素精准定位换为position：relative与上述事例主要表现1样，因而在元素不设宽度时，若元素为文本文档流中元素，则此元素承继其父元素宽度

第2种状况：元素为摆脱文本文档流元素
    <!-- 父元素不设宽度，承继body宽度 -->
    <div>
        <div style="float:left;background:orange;">dd</div>
    </div>

结果2：把子元素精准定位换为position:absolute或position:fixed与上述事例主要表现1样，因而在元素不设宽度的状况下，若子元素为摆脱文本文档流元素，则此元素宽度等于其內容宽度。

2.元素宽度为100%
第1种状况：元素为文本文档流中元素
结果3：将上面结果1中的事例元素宽度换为100%，主要表现与结果1事例的主要表现1样，因而若元素为文本文档流中元素，则子元素宽度为父元素宽度的的100%。

第2种状况：元素为摆脱文本文档流元素
（1）元素为波动元素

结果4：当元素宽度为100%时，若元素为波动元素，则此元素宽度为父元素宽度的100%。

（2）元素为肯定精准定位元素

结果5：当元素宽度为100%时，若元素为肯定精准定位元素，则元素宽度等于元素的offset-parent宽度的100%

3.元素为固定不动精准定位元素

结果6：当元素宽度为100%时，若元素为固定不动精准定位元素，则元素的宽度自始至终都为body宽度的100%

环节总结1
1.在元素不设宽度的状况下：
若元素为一般流中元素，元素宽度等于父元素宽度;
若元素不在文本文档流中,元素宽度等于內容宽度;

2.在元素宽度为100%的状况下：
若元素为一般流元素或波动元素，元素宽度为父元素宽度的100%；若元素为肯定精准定位元素，元素宽度为元素offset-parent宽度的100%；若元素为固定不动精准定位元素，元素宽度自始至终为body的100%

有关元素高宽比的探讨
依据上面有关宽度的探讨，大伙儿能够自身依据此思路开展元素高宽比探讨得出结果，这里我就立即得出我历经认证得出的结果。若有不善的地方，请纠正。

环节总结2
1.在元素不设高宽比的状况下：
若元素沒有內容，则高宽比为0；若元素有內容，元素高宽比为內容高宽比

2.在元素高宽比为100%的状况下：
若元素为一般流元素或波动元素，元素高宽比为父元素高宽比的100%；若元素为肯定精准定位元素，元素高宽比为元素offset-parent高宽比的100%；若元素为固定不动精准定位元素，元素高宽比自始至终为body的100%

4.元素的各种各样界定
（1）块级元素与块元素
块级元素(block-level elements)
那些视觉效果上会被文件格式化成块状的元素，通俗化1点来讲便是那些会换新行的元素。display 特性值为：block, list-item, table 值都可以以将1个元素设定成块级元素。

（2）块元素
display特性值为block的元素，是块级元素的1个非空子集。

（3）行内级元素与行内元素
A.行内级元素(inline-level elements)
行内级元素是那些不容易为本身內容产生新的块，而让內容遍布在同1行中的元素。display 特性的：inline, inline-table, inline-block 值都可以以将1个元素设定成行内级元素。

B.行内元素
display特性为inline的元素，是行内级元素的1个非空子集

（4）换置元素与非换置元素
A.换置元素(replaced element)
1个內容 不会受到CSS视觉效果文件格式化实体模型操纵，CSS3D渲染实体模型其实不考虑到对此內容的3D渲染，且元素自身1般有着固有规格（宽度，高宽比，宽高比）的元素，被称之为换置元素。这类元素，访问器依据元素的标识和特性，来决策元素的实际显示信息內容。
普遍的换置元素有这些：img,input,textarea,select,button等

B.非换置元素(non-replaced element)
w3c并沒有得出确立的非换置元素的解释，但能明确的是除换置元素以外，全部的元素全是非换置元素。

5.元素高宽比与宽度的探讨
（1）行内级非换置元素
宽度与高宽比的设定针对行内级非换置元素时不可用的，比如span,a
（2）行内级换置元素
在前面早已完毕过有关换置元素的定义，换置元素1般全是1般有着固有规格（宽度，高宽比，宽高比）的元素，因而针对换置元素在不设宽度和高宽比的状况下，元素宽高宽比等于元素本身固有规格。因而只用对当元素宽度或高宽比设为100%的状况开展探讨
A.有固有占比的元素
针对有固有占比的元向来说假如宽度与高宽比的1方有明确的值，若另外一方并没有设定值，则另外一方的测算值就由明确的高宽比或宽度乘以固有占比来获得，因而针对有固有占比的元素，大家只用探讨高宽比与宽度中的1方便可，比如img元素

B.沒有固有占比的元素
针对沒有固定不动占比的元素，元素的宽度或高宽比不容易随另外一方的转变而转变，比如input,textarea,select,button等

结果
针对行内级换置元素：在设宽度为100%的状况下
对比上1篇的事例，可自主开展试验，这里我就立即得出结果
若元素为一般流元素或波动元素，元素宽度或高宽比为父元素宽度或高宽比的100%；若元素为肯定精准定位元素，元素宽度或高宽比为元素offset-parent宽度或高宽比的100%；若元素为固定不动精准定位元素，元素宽度或高宽比自始至终为body的100%