成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css常用布局

zqhxuyuan / 2565人閱讀

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

一、三欄布局

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

1.圣杯布局
    

        

        #main
        

        

        #left

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

2.雙飛翼布局
    

        

            

                #main
            

        

        

        #left

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

二、怪異盒模型

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

怪異模式是“部分瀏覽器在支持W3C標(biāo)準(zhǔn)的同時(shí)還保留了原來的解析模式”，怪異模式主要表現(xiàn)在IE內(nèi)核的瀏覽器。

標(biāo)準(zhǔn)模式：
box-sizing:content-box;
盒子總寬度：width + padding（左右） +  border（左右） + margin（左右）

怪異模式：
box-sizing:border-box;
盒子總寬度： width（width已經(jīng)包含了padding,border的值） + margin（左右）
　　
三、定位布局

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

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

position：static | relative | absolute | fixed

static: 靜態(tài)，沒有特別的設(shè)置，遵循基本的定位規(guī)定。z-index無效

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

absolute: 絕對定位，脫離文檔流，通過TLBR定位，z-index有效。 選取其最近一個(gè)最有定位設(shè)置的父級對象進(jìn)行定位，如果對象的父級沒有設(shè)置定位屬性，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位。

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

四、流布局

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

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

1、布局特點(diǎn)：屏幕分辨率變化時(shí)，頁面里元素的大小會變化而但布局不變?！具@就導(dǎo)致如果屏幕太大或者太小都會導(dǎo)致元素?zé)o法正常顯示】

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

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

五、浮動布局

float: left | right | none | inherit

left: 左浮動

right: 右浮動

none: 默認(rèn)值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置

inherit: 規(guī)定應(yīng)該從父元素繼承 float 屬性的值

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

clear:left;  不允許有向左漂浮的標(biāo)簽

clear:right; 不允許有向右漂浮的標(biāo)簽

clear:both;  不允許有任何方向漂浮的標(biāo)簽
六、flex布局

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

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

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

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


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

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

七、grid布局

網(wǎng)格布局（屬于二維布局），可以跟flex結(jié)合使用。

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

特點(diǎn)：

1）可以定義任意數(shù)量的行和列

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

3）內(nèi)部元素可以設(shè)置自己所在的行、列，還可以設(shè)置跨越幾行、幾列

4）可以設(shè)置內(nèi)部元素的對齊方向

教程：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...

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115621.html

相關(guān)文章

  • CSS常用布局

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

    aaron 評論0 收藏0

  • 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

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

    Noodles 評論0 收藏0

  • CSS 常用布局在小程序中的應(yīng)用

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

    garfileo 評論0 收藏0

  • CSS 常用布局在小程序中的應(yīng)用

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

    CoderDock 評論0 收藏0

  • CSS常用布局簡潔解決方案

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

    2450184176 評論0 收藏0

  • JS / CSS 常用實(shí)戰(zhàn)代碼片段

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

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<