概念
display是CSS中最重要的用于控制布局的屬性胸私。每個(gè)元素都有一個(gè)默認(rèn)的 display 值虚缎，這與元素的類型有關(guān)。對(duì)于大多數(shù)元素它們的默認(rèn)值通常是 block或 inline徽龟。
一個(gè) block 元素通常被叫做塊級(jí)元素蟋软。一個(gè) inline 元素通常被叫做行內(nèi)元素。
block
div是一個(gè)標(biāo)準(zhǔn)的塊級(jí)元素姥芥。一個(gè)塊級(jí)元素會(huì)新開始一行并且盡可能撐滿容器兔乞。其他常用的塊級(jí)元素包括p、 form和HTML5中的新元素：header、 footer庸追、 section等等霍骄。inline
span是一個(gè)標(biāo)準(zhǔn)的行內(nèi)元素。一個(gè)行內(nèi)元素可以在段落中<span> 像這樣 </span>包裹一些文字而不會(huì)打亂段落的布局淡溯。a元素是最常用的行內(nèi)元素读整，它可以被用作鏈接。none
另一個(gè)常用的display值是none咱娶。一些特殊元素的默認(rèn)display值是它米间，例如script。
display:none通常被 JavaScript 用來(lái)在不刪除元素的情況下隱藏或顯示元素膘侮。它和visibility屬性不一樣屈糊。把display設(shè)置成none
不會(huì)保留元素本該顯示的空間，但是visibility: hidden;還會(huì)保留琼了。-
inline-block
同時(shí)具有block的寬高特性又具有inline的同行元素特性<style> .inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;} .block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;} .inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;} </style> <body> <span class="inline">inline</span>inline <span class="block">block</span> block <span class="inline-block">inline-block</span>inline-block </body>
運(yùn)行結(jié)果：
inline特性
我們發(fā)現(xiàn)內(nèi)聯(lián)對(duì)象inline給它設(shè)置屬性height和width是沒有用的另玖，致使它變寬變大的原因是: 內(nèi)部元素的寬高+padding。觀察inline對(duì)象的前后元素我們會(huì)發(fā)現(xiàn)inline不單獨(dú)占一行表伦，其它元素會(huì)緊跟其后谦去。
block特性
塊對(duì)象block是可以設(shè)置寬高的，但是它的實(shí)際寬高是本身寬高+padding蹦哼。觀察block的前后元素我們會(huì)發(fā)現(xiàn)block要單獨(dú)占一行鳄哭。
inline-block特性
inline-block既具有block的寬高特性又具有inline的同行元素特性。也就是說(shuō)纲熏，當(dāng)我們想要讓一個(gè)元素既不獨(dú)占一行妆丘，又可以設(shè)置其寬高屬性的時(shí)候，我們就可以選擇inline-block了局劲。
行內(nèi)元素特點(diǎn)
- 和其他元素都在一行上勺拣；
- 元素的高度、寬度鱼填、行高及頂部和底部邊距不可設(shè)置药有；
- 元素的寬度就是它包含的文字或圖片的寬度，不可改變苹丸。
塊級(jí)元素特點(diǎn)
- 每個(gè)塊級(jí)元素都從新的一行開始愤惰，并且其后的元素也另起一行。（一個(gè)塊級(jí)元素獨(dú)占一行）
- 元素的高度赘理、寬度宦言、行高以及頂和底邊距都可設(shè)置。
- 元素寬度在不設(shè)置的情況下商模，是它本身父容器的100%（和父元素的寬度一致）奠旺，除非設(shè)定一個(gè)寬度蜘澜。
html中，<span> <a> <label> <input> <img> <strong> <em>就是典型的行內(nèi)元素（inline）元素响疚。
html中<div> <p> <h1> <form> <ul> <li>就是塊級(jí)元素兼都。設(shè)置display:block就是將元素顯示為塊級(jí)元素。
display的其他屬性值
- list-item
此元素會(huì)作為列表顯示稽寒。 - run-in
此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示扮碧。 - table
此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似table），表格前后帶有換行符杏糙。 - inline-table
此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似table）慎王，表格前后沒有換行符。- - table-row-group
此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似tbody） - table-header-group
此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似thead） - table-footer-group：
此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似tfoot） - table-row
此元素會(huì)作為一個(gè)表格行顯示（類似 tr ）宏侍。 - table-column-group
此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 colgroup ）赖淤。 - table-column
此元素會(huì)作為一個(gè)單元格列顯示（類似 col ） - table-cell
此元素會(huì)作為一個(gè)表格單元格顯示（類似 td 和 th） - table-caption
此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 caption）
