文字介面
1.清空所有邊距
2.從外向內布局，從上到下布局
3.用span修改區域性介面
偽元素選擇器
找到元素，在該元素的前面或者後面新增乙個子元素。
.head::before
.head::after
.head::before
指瀏覽器是如何對網頁中的元素進行排版
先分塊，在從外到內，從上到下。
1.標準流（文件流/普通流）排版方式
1.1瀏覽器預設的排版方式
1.2元素是塊級元素就會垂直排版，元素是行內元素、行內塊級元素就會水平排版
2.浮動流排版方式
2.1是一種半脫離標準流的排版方式
2.2浮動流排版只有水平排版方式，它只能設定某個元素左對齊或者右對齊。
2.3 float:left/right/none/inherit(繼承父元素的float屬性);
float: left;和父元素的左邊對齊
注意1.在浮動流裡沒有居中對齊，margin: 0 auto;在浮動流裡無效。
2.在浮動流中是不區分塊級元素/行內元素/行內塊級元素，它們都可以顯示在同一行，進行水平排版。
3.在浮動流中，塊級元素/行內元素/行內塊級元素都可以設定寬高。
2.4浮動元素脫標
1.脫標:脫離標準流
當某一元素浮動之後，那麼這個元素看上去就像被從標準流中刪除一樣，它之後的元素就會跑到它所處的位置。
2.如果前面的元素浮動了，後面的元素沒有浮動，那麼前面的元素就會蓋住後面的元素。float: left;時
2.5浮動元素的排序規則
1.相同方向上（左右）的浮動，先浮動的元素會顯示在前面，後浮動的元素會顯示在後面。（浮動的元素不會蓋住浮動的元素，只會蓋住標準流的元素）
2.不同方向上（左右）的浮動，左浮動會找左浮動，右浮動會找右浮動。
3.浮動元素浮動之後的位置，由浮動元素之前在標準流中的位置來確定。（浮動之前在第幾行，浮動之後就在第幾行，浮動之前的第幾行是指如果前面有浮動元素，該元素在標準流裡補位的位置）
2.6浮動元素的貼靠現象
元素浮動之後的寬度如果超過父元素的寬度時，超出寬度的那些元素會自動找前乙個元素去貼在它旁邊，如果還不夠，就會繼續找前面的前面的元素······只到那些元素不超過父元素。貼靠到父元素是如果還不夠，也只能貼靠到父元素了。
2.7浮動元素的字圍現象
給前面的元素設定浮動後，後面的文字不會蓋住浮動元素，而是會圍在前面的那個元素的周圍，常用來做網頁中的**混排。
2.8浮動元素高度問題
在標準流中，內容的高度可以撐起父元素的高度
在浮動流中，內容的高度不能撐起父元素的高度
2.9清除浮動
2.9.1.給父元素設定高度
因為在浮動流中，內容的高度不能撐起父元素的高度，所以要給父元素設定高度。
但是在企業開發中能不寫高度就不寫高度，所以這種方式盡量不要用。
2.9.2.clear: none/left/right/both;
clear: none;兩邊都允許浮動
clear: left;不去找前面左邊浮動的元素（左邊不允許浮動）
clear: both;不去找前面左、右浮動的元素（兩邊都不允許浮動）
注意在設定了clear屬性之後，這個元素的margin屬性就會失效。
原因：因為此時的margin-top相當於是和父元素的外邊距，如果沒有邊框屬性，該元素和父元素都會被頂下來。
2.9.3.隔牆法
1.外牆法
在兩個盒子中間新增乙個額外的塊級元素，並且給這個額外的盒子新增clear: both;屬性
注意外牆法可以讓第2個盒子設定margin-top屬性，但不能讓第1個盒子設定margin-bottom屬性。
所以直接給額外的盒子設定寬高即可。
.wall
.h20
在第乙個盒子所有子元素的最後加個牆
注意外牆法可以讓第2個盒子設定margin-top屬性，也可以讓第1個盒子設定margin-bottom屬性，也可以給額外的盒子新增高度來實現兩個盒子之間的隔開。
不常用隔牆法，因為要多佔乙個盒子。
2.9.4偽元素元素清除浮動
給第1個盒子新增偽元素，推薦
.head::after
.head
CSS布局，居中，偽元素
一 布局 單列布局 實現方式 定寬 水平居中。雙列布局 一列固定寬度，另外一列自適應寬度。實現方式 浮動元素 普通元素 margin。三列布局 兩側兩列固定寬度，中間列自適應寬度。content 注意為什麼不是 main 在前面！menu aside div aside aside div main...
前端學習 Css 偽元素
first letter 表示第乙個字元 first line 表示文字的第一行 before 選中元素的最前邊，一般該偽類都會結合content一起使用，通過content可以向指定位置新增內容。after 選中元素的最後邊，一般該偽類都會結合content一起使用，通過content可以向指定位...
網頁布局基礎 css布局學習總結
1.標準文件流 從上到下，從左到右輸出文件內容 2.浮動 3.絕對定位 需要注意的是塊級元素如div p ul 等 行級元素如span strong img input等 塊級元素與行級元素都是盒子模型，下面說下盒子模型 盒子模型是網頁布局的基石，border padding margin 下面給出...