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

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

這個世界上百分之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

RID布局

它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局 ?

Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。

Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。

Grid 布局則是將容器劃分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。

grid布局預熱

• 容器和項目

<section>
	<div>
		<p></p>
	</div>
	<div>
		<p></p>
	</div>
	<div>
		<p></p>
	</div>
</section>
<!-- 以上代碼section為容器、div為項目 （項目不包括p標簽） -->

• 行和列

容器里面的水平區域稱為"行"，垂直區域稱為"列"。

• 單元格

行和列的交叉區域，稱為"單元格"。

• 網格線

劃分網格的線，稱為"網格線"。水平網格線劃分出行，垂直網格線劃分出列。

GRID屬性

容器屬性:添加在容器元素

1、啟動網格布局

display:grid
/*
 屬性值：
  grid  為塊狀網格容器 （容器自上而下排列）
  line-grid  為內聯網格容器（容器橫向排列）
*/

2、劃分行和列

grid-template-columns:
grid-template-rows:

• 屬性值：絕對大小(根據列數或者行數確定值的個數) 例：200px 200px 200px

grid-template-columns:200px 200px 200px
grid-template-rows:200px 200px 200px

• 屬性值：百分比（根據列數或者行數確定值的個數） 例：33.33% 33.33% 33.33%

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/

• 功能函數：repeat()

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/

• auto-fill關鍵字( 自動填充 )

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/

• fr關鍵字(列寬片段)

為了方便表示比例關系，網格布局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍。

grid-template-columns:1fr 3fr 1fr;
grid-template-rows:repeat(3,100px);

• minmax() 功能函數

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
/*
 minmax(100px, 1fr)表示列寬不小于100px，不大于1fr
*/

• auto 關鍵字 自動填充

grid-template-columns:30px auto 20px;
grid-template-rows:repeat(3,100px);

• 網格線名稱

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
/*
指定網格布局為3行x3列，因此有4根垂直網格線和4根水平網格線。方括號里面依次是這八根線的名字。
*/

3、設置行間距 || 列間距

grid-row-gap:20px /* 行間距 */
grid-column-gap:20px /* 列間距 */
grid-gap:30px 30px /* 復合式寫法 */
?
/*注：新版本已經省略 grid- 前綴    row-gap \  column-gap  \  gap*/

1. 指定"區域"（area），一個區域由單個或多個單元格組成。

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
 'd e f'
 'g h i';
?
/*
 將整個網格容器分為9個區域，每個區域對應一個單元格
 通過grid-area 指定項目名稱。
*/

display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
grid-template-areas: 'a a a'
      '. . b'
      '. c c';

5、規劃子元素放置的順序（默認為先排行后排列）

grid-auto-flow: column | row;
/*
 row dense和column dense。
 這兩個值主要用于，某些項目指定位置以后，剩下的項目怎么自動放置。
*/

6、設置單元格內容在單元格內 水平 | 垂直 的對齊方式

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items:  <justify-items>  <align-items>   /*復合式寫法*/
/*
 start：對齊單元格的起始邊緣。
    end：對齊單元格的結束邊緣。
    center：單元格內部居中。
    stretch：拉伸，占滿單元格的整個寬度（默認值）。
*/

7、設置整個內容區域在容器里面的水平 | 垂直 對齊方式

justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content:  <justify-content>  <align-content>   /* 復合式寫法 */
?
/*
 start - 對齊容器的起始邊框。
 end - 對齊容器的結束邊框。
 center - 容器內部居中。
 stretch - 項目大小沒有指定時，拉伸占據整個網格容器。
 space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。
 space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。
 pace-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。
*/

項目屬性：添加在子元素上面

1. 指定項目的四個邊框，分別定位在哪根網格線。

grid-column-start
grid-column-end
grid-row-start
grid-row-end
?
/*
 grid-column-start屬性：左邊框所在的垂直網格線
 grid-column-end屬性：右邊框所在的垂直網格線
 grid-row-start屬性：上邊框所在的水平網格線
 grid-row-end屬性：下邊框所在的水平網格線
*/

grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;

2、grid-column ， grid-row

grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式 grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式。

. 前言

CSS世界中的float屬性是一個年代非常久遠的屬性。雖然最初創造浮動并不是為了用于頁面布局，但它在布局方面表現得很出色。然而為了理解浮動，我們首先必須牢記它的設計初衷。Web誕生之初，帶寬就那么一點點，我們能夠做到的也只是展示文字以及零星圖片而已，怎么可能浮動設計的目的就是為了實現各種磚頭式的復雜布局呢？那個年代復雜布局都是用<table>實現的。既然這樣，那float屬性設計的目的究竟是什么呢？

2 浮動的本質

很簡單，一句話：浮動的本質就是為了實現文字環繞效果。而這種文字環繞，主要指的就是文字環繞圖片顯示的效果。所以，大家應該也多少對為什么老IE瀏覽器與浮動相關的bug一火車都裝不下有些了解了吧！人家的功能本來就很單純，只是讓文字可以繞著圖片跑，你偏要各種布局，結果撐不住了吧！

所以說：浮動是魔鬼，少砌磚頭、少浮動，要更多地去挖掘CSS世界本身的“流動性”和“自適應性”，以構建能夠適用于各種環境的高質量的網頁布局。好的網頁應該如同好的建筑。傳統的樓房是典型的“剛”式結構，磚頭加樓板，問題不言而喻，一個小小的地震可能就被夷為平地；而好的樓房應該是有“柔”在其中，也就是高質量的鋼筋結構，當地震導致房屋搖晃的時候，可以通過鋼筋的“柔性”卸力而保障整體結構的穩固。臺風襲來，很少見到說柔弱的柳樹被吹倒，反而會經常看到堅固的電線桿被風吹倒的消息，道理其實也類似。

3 浮動的特性

浮動有三個關鍵字可以選擇，left為向左浮動，right為向右浮動，none為不浮動。無論是行內元素（inline）還是塊級元素（block），設置浮動后都會變成塊級元素。但表現得卻更像行內塊元素（inline-block），因為在沒有明確寬度的時候，寬度會隨著內容自適應，而不是占據一行。

過去，浮動的行為經常受到瀏覽器bug的干擾，特別是在IE6和IE7中。幸虧這些瀏覽器幾乎已經淡出市場了，我們不必再擔心那些bug了?，F在我們可以保證各種瀏覽器對浮動的處理是一致的。但是浮動仍有一些行為會讓你措手不及。這些并不是bug，而是因為浮動嚴格遵循了標準。讓我們來看看浮動如何工作，以及怎樣調整浮動的行為來實現理想的布局。

float都有哪些有意思的特性呢？具體如下：

• 包裹性

所謂“包裹性”，由“包裹”和“自適應性”兩部分組成。包裹假設浮動元素父元素寬度180px，浮動元素子元素是一個120px寬度的圖片，則此時浮動元素寬度表現為“包裹”，就是里面圖片的寬度120px，代碼如下：

.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div"> 　
    <div class="float">　　
        <img src="float.jpg">　 
    </div>
</div>

自適應性，如果浮動元素的子元素不只是一張120px寬度的圖片，還有一大波普通的文字，例如：

<div class="father">
    <div class="float">　　 
        <img src="float.jpg">大家好，我是碼農洞見。　
    </div>
</div>

則此時浮動元素寬度就自適應父元素的180px寬度，最終的寬度表現也是180px。

• 塊狀化并格式化上下文

塊狀化的意思是，元素一旦float的屬性值不為none，則其display計算值就是block或者table。

• 破壞文檔流

float通過破壞正常CSS流實現CSS環繞，帶來了煩人的“高度塌陷”的問題，然而，凡事都具有兩面性，只要了解透徹，說不定就可以變廢為寶、化腐朽為神奇。例如。我們可以利用float破壞CSS正常流的特性，實現兩欄或多欄的自適應布局。

4 清除浮動

浮動會影響周圍元素，并且還會引發很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。clear屬性語法如下：

clear: none | left | right | both

在實際開發中，我們幾乎不會使用“clear:left”或“clear:right”來單獨清除左浮動或右浮動，往往都是直截了當地使用“clear:both”來把所有浮動清除，既簡單又省事。也就是說，我們只需要記住“clear:both”就可以了。

5 總結

通過閱讀本文我們了解到浮動的設計初衷是讓文字圍繞一個元素排列，但有時這種效果并不是我們想要的。使用清除浮動來包含浮動元素。所謂生生相克，既然有破壞，就有保護其他元素不被破壞的屬性?？傊?，只有深入理解浮動的工作原理，勤加練習才有可能避開常見的陷阱。達到選擇合適的工具來實現想要的效果。

6 最后的最后

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！