display的幾種經常使用取值

display的取值有不少種，下面列出比較經常使用的幾種取值，還有其它的少用的值沒有列出來：

一、none 此元素不會被顯示，而且不佔據頁面空間，這也是與visibility:hidden不一樣的地方，設置visibility:hidden的元素，不會被顯示，可是仍是會佔據原來的頁面空間。

二、inline 行內元素 元素會在一行內顯示，超出屏幕寬度自動換行，不能設置寬度和高度，元素的寬度和高度只能是靠元素內的內容撐開。

示例元素：span,b,i,a,u,sub,sup,strong,em

三、block 塊級元素 會獨佔一行，若是不設置寬度，其寬度會自動填滿父元素的寬度，能夠設置寬高，即便設置了寬度，小於父元素的寬度，塊級元素也會獨佔一行。

示例元素：div,h1-h6,ul,ol,dl,p

四、inline-block 行內塊元素 與行內元素同樣能夠再一行內顯示，並且能夠設置寬高，能夠設置margin和padding。

示例元素：input,button,img

五、list-item 列表元素

示例元素：li

六、table 會做爲塊級表格來顯示(相似於<table>)，表格先後帶有換行符。

七、inline-table 會做爲內聯表格來顯示(相似於<table>)，表格先後沒有換行符。

八、flex 多欄多列布局，火狐能夠直接使用，谷歌和歐朋須要在屬性值前面加-webkit-前綴，比較適合移動端開發使用。

一個Flexbox佈局是由一個伸縮容器(flex containers)和在這個容器裏的伸縮項目(flex items)組成。

伸縮容器(flex  containers)是一個HTML標籤元素，而且「display」屬性顯式的設置了「flex」屬性值。在伸縮容器中的全部子元素都會自動變成伸縮項目(flex  items)。

HTML代碼：

<div class='container'>

<div class='left'>左</div>

<div class='center'>中</div>

<div class='right'>右</div>

</div>

CSS代碼：

.container{

display:flex; // 設置一個伸縮容器

flex-flow:row wrap /*佈局方式,row:從左向右佈局，column：從上到下佈局，wrap：是否在一行顯示，若是設置了此值，則伸縮項目會換行顯示，若是沒有設置此值，則不會換行顯示*/

}

.left{width:500px;}

.center{flex:1;}

.right{flex:2;}

設置flex屬性的元素會用伸縮容器減去有實際數值的元素的寬或者高，而後將差值按照flex設置的數值進行比例的分配。

九、inherit 繼承，若是元素的某些屬性沒有進行設置，有些是會有默認值的，有些是會繼承的。

 

行內元素與塊級元素的區別：

一、嵌套

行內元素：行內元素只能嵌套行內元素，不能嵌套塊級元素。

塊級元素：塊級元素能夠嵌套行內元素，可是行內元素不能夠嵌套塊級元素。塊級元素之間也能夠進行嵌套，可是，並非塊級元素之間能夠隨意的嵌套。p元素是不能嵌套任何塊級元素的，div能夠嵌套任意的元素，可是div並非可以被全部的塊級元素嵌套的。

div能夠嵌套div

td能夠嵌套div

li能夠嵌套div

dd，dt能夠嵌套div

結構標記 能夠嵌套div

二、margin和padding

行內元素：有margin和padding，可是隻可以設置左右的值，設置上下的值是無效的。

塊級元素：能夠設置margin和padding上下左右的四個值，margin能夠有負值，padding不容許有負值。

三、設置寬高

行內元素：不容許設置寬高，行內元素的寬高只能是由行內元素內的內容撐起來。

塊級元素：容許設置寬高，若是不設置，默認寬度是父元素的100%，高度是由內容撐起來的。