Display在官方定義：規定元素應該生成的框的類型。
本文只重點分析常用的6個值：none、block、inline、inline-block、inherit、flex。
其他table、list-item等都不再推薦使用。
此元素不會被顯示。主要與visibility屬性為hidden時相區分。
1) 當元素的none時，js可以獲取此元素，但不能獲取/設置此元素的可視化屬性的值
（但可以設置自定義屬性的值），如Width、Height、background等Css屬性的值，這也就表明當
元素為none時，元素是不被瀏覽器渲染的。
2) 當元素的visibility值為hidden時，元素雖然不可見，但可以獲取/設置元素的任何值，包含Css相關屬性。
這也就表明此時的元素是被瀏覽器渲染的（在文檔流中是占有位置的），只是處于不可見的狀態。
3) 示例代碼如下：
Css代碼：
#div01{ display: none; width: 200px; background: red; } #div02{ visibility: hidden; width: 100px; } #div03{ width: 100px; }
Js/html代碼：
<div id="div01" data-name="div01" > div01</div>
<div id="div02" data-name="div02" > div01</div>
<div id="div03" > div03</div>
<script type="text/javascript">
window.onload = function(){
var div01 = document.getElementById(’div01’);
var div02 = document.getElementById(’div02’);
var div03 = document.getElementById(’div03’);
//output: div01:0 background: name:div01
console.log( ’div01:’ + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));
//output: div02:100 name:div02
console.log( ’div02:’ + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));
//output: div03:100
console.log( ’div03:’ + div03.offsetWidth);
div01.style.width = 1000;
div01.setAttribute("data-name","div0101");
div02.style.width = "800px";
div02.setAttribute("data-name","div0202");
div03.style.width = 800;
//output: div01:0 background: name:div0101
console.log( ’div01:’ + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));
//output: div02:800 name:div0202
console.log( ’div02:’ + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));
//output: div03:800
console.log( ’div03:’ + div03.offsetWidth);
}
</script>
設置元素為塊級元素，可應用盒子模型相關屬性。默認Width會100%，Height自適應。
Margin、padding都有效。如果沒有占寬或高的子元素存在，則高度為零。
代碼如下：
<html> <head> <style> #div01{ background: red; } #div02{ height: 100px; background: gray; } #div03{ background: green; } </style> </head> <body> <div id="div01" ></div> <div id="div02" ></div> <div id="div03" >div03</div> </body> </html>
行內元素或者通過display:inline修飾為行內元素的都具有行內元素的行為。
1) 多個inline元素會排成一行，并列的多個inline元素之間會存在8個像素左右的間隔，
8像素間隔解決辦法：
a). Html文本有意識的都排成一行，如下代碼所示：
<a>a01</a><a>a02</a>
b). 利用margin-left:-8px，也就是marginq負值實現，也可以在外層使用letter-spaceing和word-spaceing
為負值的方式實現（此種試子元素需要重置被設置屬性）.inline{ display: inline; background: red; margin: 0px; padding: 10px; margin-left: -8px; }
<div class="inline">inline01</div> <div class="inline">inline02</div> <div class="inline">inline03</div> <div class="inline">inline04</div>c). 包裹inline元素的外層元素加上font-size:0px和-webkit-text-size-adjust:none實現
a{ background: red; font-size: 14px; } .overWidth{ white-space: nowrap; border: 1px solid gray; font-size: 0px; -webkit-text-size-adjust: none; }<div class="overWidth" > <a>a01</a> <a>a000000002</a> </div>
2) Inline元素的width和height無效
3) Inline元素的padding都有效，但margin左右有效，上下無效。
4) Inline元素包裹inline元素，外層元素的width和height會被內部的撐開
.overWidth{ display: inline; border: 1px solid gray; }
<div class="overWidth" > <a>a01</a> <a>a000000002</a> </div>
5) Block/inline-block元素包裹inline元素，默認超width自動換行，height撐開。
a) 強制不換行可以通過white-space:nowrap來實現，此時超width的就會浮出來，
可以通過overflow:hidden和text-overflow:ellipsis配合實現省略顯示。.overWidth{ white-space: nowrap; width: 100px; border: 1px solid gray; overflow: hidden; text-overflow: ellipsis; }<div class="overWidth" > <a>a01</a> <a>a000000002</a> </div>
【 微信掃一掃 】
