常用的網頁布局包括：
將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。
grid 布局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維布局。
flex容器：採用 flex 布局的元素的父元素；
flex專案：採用 flex 布局的元素的父元素的子元素；
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
flex常用於做一維布局，即一行或一列。
流式布局，也叫做百分比布局。結構中常需要用到flex布局。
應用於移動端布局。
缺點：對於大螢幕來說，使用者體驗不是很好，比例會不協調
也叫rem布局，利用rem相對單位，使元素隨著螢幕的改變而變化。
rem : 是乙個相對單位，1rem等於根元素（html)的font-size值。
頁面中的元素採用rem作為尺寸或者間距的單位。
動態改變html標籤的font-size大小，這樣就可以適配不同的裝置進行等比縮放。
所有元素都動態等比縮放。
應用於移動端。
優點：無論裝置螢幕怎樣變化，元素布局不變
缺點：顯示的內容固定
用同一套**，去適配不同的裝置。
利用**查詢（media queries），針對不同的**型別定義不同的樣式，從而實現響應式布局 。也可以針對不同的解析度設定不同的樣式。
/* 正常的樣式 , 針對pc端的 */
100行css
/* 針對pad pro */
@media all and (max-width:1024px)
/* 針對pad mini 和 mobile 橫屏 */
@media all and (max-width:768px)
/* 針對 mobile 豎屏 */
@media all and (max-width:450px)
既可以執行在pc端，也可以執行在移動端。
比較適合小**，個人部落格，產品介紹頁...
網頁布局基礎 css布局學習總結
1.標準文件流 從上到下，從左到右輸出文件內容 2.浮動 3.絕對定位 需要注意的是塊級元素如div p ul 等 行級元素如span strong img input等 塊級元素與行級元素都是盒子模型，下面說下盒子模型 盒子模型是網頁布局的基石，border padding margin 下面給出...
網頁布局流式布局
工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...
網頁布局 table布局
table 的特性決定了它非常適合用來做布局，並且 中的內容可以自動居中，這是之前用的特別多的一種布局方式 而且也加入了display table dispaly table cell來支援 teble 布局。1.簡單布局 1 doctype html 2 html lang en 3 head 4...