通過閱讀及乙個小型練習，掌握 css 盒模型及通過float進行簡單的布局
今天我們要學習非常重要的一些知識，這些知識會伴隨著你的前端生涯.
首先我們先學習一下盒模型的概念
接下來我們了解一下浮動
今天的任務，我們將不在codepen上來實現，開啟你電腦本地的**編輯器（如vscode，sublime或者其它），建立乙個專案目錄，在目錄下建立乙個resume.html，再建立乙個css目錄，在css目錄下建立乙個style_1.css檔案。
然後基於上面的閱讀學習，實現如下設計稿的乙份簡歷頁面，html內容寫在resume.html中，樣式寫在style_1.css中。
實現過程中，請注意：
然後學習規範後，我們繼續下乙個編碼任務
依然還是使用resume.html，在css目錄下建立style_2.css，然後在resume.html的css檔案引用改為style_2.css。
參照下方設計稿進行頁面實現。html**請在上乙個任務的基礎上，根據樣式需要進行調整。並在style_2.css中寫入新樣式。
最後乙個任務，我們把這個挑戰極端一些。在css目錄中建立style_3.css。把resume.html中引用的css改為style_3.css。
參照下方設計稿進行頁面實現。html**請在上乙個任務的基礎上，根據樣式需要進行調整。並在style_3.css中寫入新樣式
接下來，請你把resume.html中引用的css檔案從style_3.css改回style_1.css或者style_2.css，看一下樣式是否還健在？
如果沒有，請對html或css**進行相應調整，保證，無論是用 style_1.css 還是 style_2.css 或是 style_3.css，都可以保證頁面按照設計稿的要求呈現。也就是說同乙份html，可以在改變css**的情況下，實現不同樣式，達到html結構內容和css樣式的解耦。
把你的**提交到 github，把 github 位址提交到作業裡，如果有餘力的同學，可以學習如何在github中預覽你的html**，並提交預覽位址。
這兩天的內容稍多，請反覆確認你是否掌握了以下概念
css盒模型是網頁布局的基礎 ——每個元素被表示為乙個矩形的方框，框的內容（content box）（width height）、內邊距（padding）、邊界（border）、外邊距（margin）預設情況下，是這樣的。
width 和 height
設定內容框（content box）的寬度和高度。內容框是框內容顯示的區域——包括框內的文字內容，以及表示巢狀子元素的其它框。
padding
表示乙個 css 框的內邊距。該層的大小可以通過簡寫屬性padding 一次設定所有四個邊，或用 padding-top、padding-right、padding-bottom 和 padding-left 屬性一次設定乙個邊。
border
css 框的邊界（border）是乙個分隔層，位於內邊距的外邊緣以及外邊距的內邊緣之間。
margin
外邊距（margin）代表 css 框周圍的外部區域，稱為外邊距，它在布局中推開其它 css 框。其表現與 padding 很相似；簡寫屬性為 margin，單個屬性分別為 margin-top、margin-right、margin-bottom 和 margin-left。
1.display:inline
行內框（ inline box）與塊框是相反的，它隨著文件的文字（例如：它將會和周圍的文字和其他行內元素出現在同一行，而且它的內容會像一段中的文字一樣隨著文字部分的流動而打亂），對行內盒設定寬高無效，設定padding, margin 和 border都會更新周圍文字的位置，但是對於周圍的的塊框（ block box）不會有影響。
2.display:block
塊框（ block box）是定義為堆放在其他框上的框（例如：其內容會獨佔一行），而且可以設定它的寬高，之前所有對於框模型的應用適用於塊框 （ block box）
3.display:inline-block
行內塊狀框（inline-block box） 像是上述兩種的集合：它不會重新另起一行但會像行內框（ inline box）一樣隨著周圍文字而流動，而且他能夠設定寬高，並且像塊框一樣保持了其塊特性的完整性，它不會在段落行中斷開。（在下面的示例中，行內塊狀框會放在第二行文字上，因為第一行沒有足夠的空間，並且不會突破兩行。然而，如果沒有足夠的空間，行內框會在多條線上斷裂，而它會失去乙個框的形狀。）
屬性描述
值內邊距（padding）
設定乙個元素的內容與其邊界之間的空間。
padding-top、padding-right、padding-bottom、padding-left。不允許使用負值。
外邊距 （margin ）
設定所有外邊距屬性。
margin-top、margin-right、margin-bottom、margin-left。允許使用負值。
寬度 （width）
指定了元素內容區的寬度。
anto、length、%、max-content、min-content
高度 （height）
指定了乙個元素的高度。預設情況下，這個屬性決定的是content area的高度，但是，如果將 box-sizing 設定為 border-box , 這個屬性決定的將是邊框區域（border area）的高度。
anto、 length、%、
box-sizing
用於更改用於計算元素寬度和高度的預設的 css 盒子模型。
預設值content-box
浮動（float）： 用float屬性指定乙個元素沿著容器的左邊或右邊放置，允許文字和內聯元素環繞它。當初是為了排版美觀而產生，並且它不是真正意義上的脫離文件流（你可以理解為脫離了半層）。
清除浮動 ： 因為當容器的高度自動（auto），且容器的內容有浮動元素，這種情況下容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處理，就叫css清除浮動。
方法優點
缺點1、新增額外標籤
通俗易懂，容易掌握。
新增多少無意義的空標籤，有違結構與表現的分離
2、使用 br標籤和其自身的 html屬性
比空標籤方式語義稍強，**量較少。
同樣有違結構與表現的分離，不推薦使用。
3、父元素設定 overflow：hidden
不存在結構和語義化問題，**量極少
內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素
4、父元素設定 overflow：auto 屬性
不存在結構和語義化問題，**量極少
多個巢狀後，firefox某些情況會造成內容全選
5、父元素也設定浮動
不存在結構和語義化問題，**量極少
使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body
6、父元素設定display:table
結構語義化完全正確，**量極少
盒模型屬性已經改變，由此造成的一系列問題，得不償失
7、使用:after 偽元素
結構和語義化完全正確,**量居中。
復用方式不當會造成**量增加
綜合以上列舉的方法，無非有兩類：
其一，通過在浮動元素的末尾新增乙個空元素，設定 clear：both屬性，after偽元素其實也是通過 content 在元素的後面生成了內容為乙個點的塊級元素；
其二，通過設定父元素 overflow 或者display：table 屬性來閉合浮動。
綜上所述： 在支援bfc的瀏覽器（ie8+，firefox，chrome，safari）通過建立新的bfc閉合浮動；
在不支援 bfc的瀏覽器 （ie6-7），通過觸發 haslayout 閉合浮動。
百度前端技術學院 零基礎學院（7，8）
設計圖如下 步驟 一 分出幾個塊 首部，中間包括乙個960px寬的劇中div，div裡包括logo和三個鏈結 宣傳欄，含有乙個輪顯數字 主要內容區，包括乙個導航欄和寬度自適應的內容塊 底部，包含水印 二 遇到的問題 1 首先是沒有固定在頁面底部，而是處於了的下方，主要是由於部分還沒有寫好內容未撐開導...
百度前端技術學院 零基礎學院 Day2
第二天，我們希望你能夠通過簡單的實踐，更加清楚地了解html是什麼，html5是什麼。學習基本的html標籤，理解html語義化概念 今天我們先暫時不用第一天讓你安裝的ide，我們先暫時使用codepen作為我們的開發工具，開啟 codepen，建立乙個新的頁面 create new pen 它有三...
百度前端技術學院 基礎學院 學習筆記（一
1 html是什麼，html5是什麼 答 html 超文字標記語言 html5最新的html標準，擁有更豐富的語義 圖形 以及多 元素等內容 2 html元素標籤 屬性都是什麼概念？答 html不是程式語言，是標記語言，所以要使用標記標籤來描述網頁。屬性是用來提供html標籤更多的資訊。3 文件型別...