css常用布局

zqhxuyuan 發布于2019-08-30 13:54 / 2543人閱讀

摘要：圣杯布局雙飛翼布局都是三欄布局的效果只是實現的方式不一樣。雙飛翼布局雙飛翼的實現就比較簡單了，為添加子元素并設置。四流布局頁面元素的寬度按照屏幕分辨率進行適配，整體布局不變。教程七布局網格布局屬于二維布局，可以跟結合使用。

一、三欄布局

三欄布局實現的是中間自適應寬度，兩邊固定寬度的布局，中間欄要放在文檔流前面，以實現優先渲染。圣杯布局、雙飛翼布局都是三欄布局的效果只是實現的方式不一樣。

1.圣杯布局

這邊col設置了浮動，然后將left,right定位到左右不負采用負邊距，left部分margin-left: -100%，right部分margin-right: -190px。設置完成后，定位成功，但是main的內容會被遮蓋，所以container中間設置了padding值。給所有col設置position: relative，再分別給左右欄添加left、right值，使他們定位到正確位置。

2.雙飛翼布局

雙飛翼的實現就比較簡單了，為main添加子元素main-wrap并設置pading。與圣杯布局一樣，一開始三個col都設置float: left,為了把left和right定位到左右部分，采用負邊距，left部分margin-left: -100%，right部分margin-right: -190px。

二、怪異盒模型

盒子模型一般分為標準盒模型（w3c標準）和怪異盒模型（IE標準）。大部分瀏覽器采用標準盒模型，而IE中則采用Microsoft自己的標準。

怪異模式是“部分瀏覽器在支持W3C標準的同時還保留了原來的解析模式”，怪異模式主要表現在IE內核的瀏覽器。

標準模式：
box-sizing:content-box;
盒子總寬度：width + padding（左右） +  border（左右） + margin（左右）

怪異模式：
box-sizing:border-box;
盒子總寬度： width（width已經包含了padding,border的值） + margin（左右）

三、定位布局

css 有3種定位機制：普通流，浮動，絕對定位

普通流：元素的位置由元素在html中的位置決定。

position：static | relative | absolute | fixed

static: 靜態，沒有特別的設置，遵循基本的定位規定。z-index無效

relative: 相對定位，不脫離文檔流，通過 TLBR（top,left,bottom,right）定位，z-index無效

absolute: 絕對定位，脫離文檔流，通過TLBR定位，z-index有效。選取其最近一個最有定位設置的父級對象進行定位，如果對象的父級沒有設置定位屬性，absolute元素將以body坐標原點進行定位。

fixed: 固定定位，相對于瀏覽器的可視窗口來定位，z-index有效。

四、流布局

頁面元素的寬度按照屏幕分辨率進行適配，整體布局不變。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

1、布局特點：屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】

2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。

這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。

五、浮動布局

float: left | right | none | inherit

left: 左浮動

right: 右浮動

none: 默認值。元素不浮動，并會顯示在其在文本中出現的位置

inherit: 規定應該從父元素繼承 float 屬性的值

使用浮動，div會浮動于網頁上方，為了不影響下方不需要浮動的div，要先清除浮動

clear:left;  不允許有向左漂浮的標簽

clear:right; 不允許有向右漂浮的標簽

clear:both;  不允許有任何方向漂浮的標簽

六、flex布局

彈性布局（屬于一維布局），給予容器控制內部元素的寬度、高度的能力。便于實現垂直居中的效果。

大部分瀏覽器都能支持，在webkit內核的瀏覽器需要加上-webkit前綴。

容器的6個屬性：
flex-direction：row | row-reverse | column | column-reverse;  // 決定主軸的方向
flex-wrap：nowrap | wrap | wrap-reverse; // 決定項目換行的情況
justify-content： flex-start | flex-end | center | space-between | space-around; // 項目在主軸的對齊方式
align-items：  flex-start | flex-end | center | space-between | space-around; // 項目在交叉軸上的對齊方式
align-content： flex-start | flex-end | center | space-between | space-around | stretch; // 多根軸線的對齊方式，只有一根時則無效

flex-flow:  || ; //flex-direction屬性和flex-wrap屬性的簡寫形式，


項目的6個屬性：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。

教程：http://www.ruanyifeng.com/blo...^%$

七、grid布局

網格布局（屬于二維布局），可以跟flex結合使用。

兼容性沒有flex好，不夠普及

特點：

1）可以定義任意數量的行和列

2）行的高度和列的寬度可以使用絕對值、相對比例或自動調整的方式，可設置最大值和最小值

3）內部元素可以設置自己所在的行、列，還可以設置跨越幾行、幾列

4）可以設置內部元素的對齊方向

教程：http://blog.csdn.net/ceshi986...

源文檔：

http://blog.csdn.net/yinmazuo...

http://blog.csdn.net/dong_pt/...

https://www.cnblogs.com/yanay...

http://blog.csdn.net/aozeahj/...

https://www.cnblogs.com/nuann...

理解的不正確的話，有錯誤請指教 ^ - ^

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115621.html

CSS常用布局

摘要：頭部主要內容左邊欄右邊欄尾部顯示為頭部主要內容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。 ====== 樣例代碼不能顯示，請看原文https://magicly.me/css-layout/ ====== 布局是CSS中一個很重要的部分，甚至我覺得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結一下使用過的CSS常...

aaron 2019-08-29 12:59 評論0 收藏0
深入學習CSS布局系列（一）布局常用屬性

摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內容高度浮動塌陷配合使用屬性規定元素的哪一側不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列（一）布局常用屬性一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發現自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

Noodles 2019-08-30 12:53 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

CoderDock 2019-08-30 15:44 評論0 收藏0
CSS常用布局簡潔解決方案

摘要：與常人的直覺不符的是，實際上表示視口寬度的，而不是。與類似，表示視口高度的。存在問題它只適用于在視口中居中的場景基于的解決方案伸縮盒是專門針對這類需求所設計的。相關基礎知識 1.內部與外部尺寸模型：（w3c草案）親測google可支持。（http://w3.org/TR/css3-sizing ）基于原有CSS尺寸特性，可以使CSS更容易描述內容自適應以及適應固定上下文的盒模型： ...

2450184176 2019-08-29 12:55 評論0 收藏0
JS / CSS 常用實戰代碼片段

摘要：常用模式片段之摘要第一次看到這個字眼是在中，即。之后也見到一些別人的代碼里有，它和頁面的有什么關系，以及和有何淵源。以前都見過這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個完整的理解。 CSS篇常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質...

sutaking 2019-08-30 13:14 評論0 收藏0