文章插圖
01、CSS布局1.1、正常布局流(Normal flow)正常布局流 就是不做任何布局控制，按照HTML的順序（從左到右，從上而下）進行布局排列 。網頁基于盒子模型進行正常的布局，主要特點：
- 盒子布局：單個內容的布局，把內容放入盒子，加上盒子三件套（padding、boder、margin） 。
- 塊盒子縱向布局：塊級元素單獨一行，按照順序垂直排列，并按其margin分離 。
- 內聯盒子水平布局：內聯元素會在一行水平排列，高度、寬度都取決于內容，直到空間不足另起一行（換行） 。高矮不齊，底部對齊 。
- 邊距折疊：垂直相鄰元素的垂直
margin會保留最大的那一個 ， 就是盒子的外邊距折疊 。 - 空白折疊：無論多少個連續空格、換行、tab，都會折疊為一個空格 。
標準布局總是這樣從左到右、從上而下的順序排列 。但當我們要實現一些特殊的的布局效果時就沒法了 ， 這時的辦法就是 —— 脫離文檔流 。
- 還有一種混合型“行內塊元素”屬于行內元素的一種，和其他元素在一行，但元素的高、寬、外邊距都可以設置，如
button、img、input。- 通過CSS樣式的
display屬性可以更改元素的布局類型 ， 如可設置<a>為一個塊元素布局display: block;
脫離文檔流，就是從正常文檔流中移除，文檔流布局就不考慮他了 ， 也就不會占用空間 ?；旧峡梢赃@樣理解 ， 當然也不是絕對就沒人管了，他的父容器還是管的，至于怎么管看《格式化上下文》 。
常用的脫離文檔流的方式：
float、position- float浮動 ， 會使元素脫離文檔流，移動到容器左/右邊，后面元素會圍繞浮動元素 。
- position定位，絕對定位（absolute）、固定定位（fixed），會使元素脫離文檔流，空出來的位置被后續元素代替，所以會出現和其他元素重疊的問題 。
display的值，這個屬性允許我們更改默認的顯示方式 。display用來設置多種布局方式，可讓不同元素類型（行、塊元素）轉換 。屬性/值描述display設置元素顯示類型，包括下面這些枚舉值?none元素隱藏不顯示，不占據空間、無交互，常用于隱藏元素?block此元素將顯示為塊級元素?inline內聯，此元素會被顯示為內聯元素?inline-block行內塊元素（CSS2.1），介于內聯和塊之間，除了不換行，高寬、盒子三件套都有效 。常用
<ul>的<li>+inline-block來實現導航?flex IE11彈性盒子布局（橫向布局），inline-flex 內聯的彈性盒子?grid非常靈活的網格布局，有些屬性IE不支持 。inline-grid 內聯的網格布局?list-item此元素會作為列表，類似<ul>，父元素顯示為 block 盒，內部變為多個 list-item inline 盒?table表格布局，同家族還有個inline-table內聯表格布局、table-row、table-cell?contents偽盒子，充當遮罩的元素，不會產生任何盒子（不會被渲染），但不影響其子元素的布局和渲染?flow-rootIE建立一個無副作用的BFC<span style="display:block">span元素2</span><!--轉換為塊元素 ， 類似一個div--><div style="display:inline">div元素</div> <!--轉換為行內元素，類似一個span-->02、什么是響應式布局？2.1、響應式設計響應式網頁設計（responsive/r??sp?ns?v/web design，RWD）指的是允許 Web 頁面適應不同屏幕寬度等因素，進行布局和外觀的調整的一系列實踐 。它涵蓋了很多 CSS 和 HTML 的功能和技術，現在也基本是我們默認建設網站的方式 。
推薦閱讀
- 簡易版 純css愛心代碼-最近超級火的打火機與公主裙中的愛心代碼
- CSS選擇器大全48式
- 常用CSS樣式屬性
- 現代 CSS 指南 -- at-rule 規則掃盲
- CSS基礎知識筑基
- CSS 動畫一站式指南
- 為什么CSS中的calc函數可能會不生效？
- day03-CSS
- CSS 漸變鋸齒消失術
- 華容道有幾種玩法（40種經典華容道布局)