義元素內部和外部的顯示類型。

·外部顯示類型display-outside：生成一個內聯元素盒，該元素之前或者之后并不會產生換行。在流式布局中，如果有空間，下一個元素將會在同一行上。塊級盒子可以修改寬度和高度。內邊距(padding)，外邊距(margin)和邊框(border)會將其他元素從當前盒子周圍"推開"。內聯盒子不會產生換行，設置寬度和高度無效。

·內部顯示類型默認流式布局：將成為一個自包含的獨立塊級格式化上下文，使得該元素的內部布局不受外部元素的影響。將元素呈現為表格形式的布局，同時具備內聯元素和塊級元素的特點，即可以設置寬高，又可以在同一行顯示。同display：inline flow-root；外部顯示為inline，內部布局為table；外部顯示為inline，內部布局為fLex；外部顯示為inline，內部布局為grid。同display：inline table；同display：inline flex；同display：inline grid。元素不顯示，不占據空間。

海無涯，不要沉浸在知識的海洋里，迷失自己。

要知道自己想要什么，抓住重點，不忘初心。

這個世界上百分之20的人，掌握著百分之80的財富。

接下來一系列教程，就帶領大家抓住重點，一起做那百分之20的人。

往期知識點回顧：

重點屬性-media

重點屬性-position

重點屬性-float

重點屬性-flex

重點屬性-overflow

重點屬性-background

一、重點屬性display

display 是CSS中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值，這與元素的類型有關。對于大多數元素它們的默認值通常是 block 或 inline 。一個 block 元素通常被叫做塊級元素。一個 inline 元素通常被叫做行內元素。

block

div 是一個標準的塊級元素。一個塊級元素會新開始一行并且盡可能撐滿容器。其他常用的塊級元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline

span 是一個標準的行內元素。一個行內元素可以在段落中 <span> 像這樣 </span> 包裹一些文字而不會打亂段落的布局。 a 元素是最常用的行內元素，它可以被用作鏈接。

none

另一個常用的display值是 none 。一些特殊元素的默認 display 值是它，例如 script 。 display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。

它和 visibility 屬性不一樣。把 display 設置成 none 元素不會占據它本來應該顯示的空間，但是設置成 visibility: hidden; 還會占據空間。

其他 display 值

還有很多的更有意思的 display 值，例如 list-item 和 table 。之后我們會討論到 inline-block 和 flex 。

額外知識點

就像我之前討論過的，每個元素都有一個默認的 display 類型。不過你可以隨時隨地的重寫它！雖然“人為制造”一個行內元素可能看起來很難以理解，不過你可以把有特定語義的元素改成行內元素。常見的例子是：把 li 元素修改成 inline，制作成水平菜單。

面試題：

1.常用的dispaly屬性值有哪些？

block、inline、inline-block、flex、table、list-item........

2.display:none 與visibility: hidden 有什么區別？

把 display 設置成 none 元素不會占據它本來應該顯示的空間，但是設置成 visibility: hidden; 還會占據空間。

3.行內元素和塊元素的區別？

一般來說，html的元素分為兩種，即塊級元素和行內元素。

塊級元素：塊狀元素排斥其他元素與其位于同一行，可以設定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。

行內元素：行內元素不可以設置寬（width）和高（height），但可以與其他行內元素位于同一行，行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字體大小決定，寬度由內容的長度控制。

常見塊級元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；

常見內聯元素有：em,strong,span,button,input,label,code,select,img,textarea

兩者之間的區別：

區別：

1.塊級元素占據一整行，內聯元素的寬度是其元素內容的寬度，多個內聯元素排列會放在同一行里除非放不下，才會擠到新的一行

2.塊級元素可以設置寬度width和高度height，而內聯元素設置widht和height是無效的

3.塊級元素可以包含塊級元素和內聯元素，而內聯元素只能包含文本

4.塊級元素可以設置margin和padding屬性，行內元素只有margin-left、margin-right、padding-left、padding-right起作用。

需要敲代碼練習的地方：

熟悉對塊級元素和行內元素

對塊級元素和行內元素的區別進行實踐練習

對塊級元素和行內元素width 和 height 的要求

塊級元素和行內元素對設置margin和padding屬性的要求

display:none 與visibility: hidden 屬性的區別

參考文獻：https://developer.mozilla.org/en-US/docs/Web/CSS/display