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

2021-01-20 18:43 jianzhan

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)元素为波动元素

CSS Code拷贝內容到剪贴板
  1. <!-- 父元素宽度为100px -->   
  2. <div style="width:100px;">   
  3.      <div style="float:left;background:orange;width:100%">dd</div>   
  4. </div>   
  5.   
  6.   
  7. <!-- 父元素宽度为200px -->   
  8. <div style="width:200px;">   
  9.      <div style="float:left;background:orange;width:100%">dd</div>   
  10. </div>  


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

(2)元素为肯定精准定位元素

CSS Code拷贝內容到剪贴板
  1.     <!-- 父元素宽度为100px -->   
  2.     <div style="width:100px;">   
  3.          <div style="position:absolute;background:orange;width:100%">dd</div>   
  4.     </div>   
  5.   
  6.   
  7.   
  8. <!-- 父元素宽度为100px -->   
  9. <div style="width:100px;position:relative">   
  10.     <div style="position;absolute;width:100%;background:orange">dd</div>   
  11. </div>   
  12.   
  13.   
  14. <!-- 父元素宽度为200px -->   
  15. <div style="width:200px;position:relative">   
  16.     <div style="position;absolute;width:100%;background:orange">dd</div>   
  17. </div>  


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

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

CSS Code拷贝內容到剪贴板
  1. <!-- 父元素宽度为100px -->   
  2. <div style="width:100px;">   
  3. <div style="position:fixed;background:orange;width:100%">dd</div>   
  4. </div>   
  5.   
  6.   
  7. <!-- 父元素宽度为100px -->   
  8. <div style="width:100px;position:relative">   
  9. <div style="position:fixed;background:orange;width:100%">dd</div>   
  10. </div>  


结果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%