CSS 布局模型

tracy 發(fā)布于2019-08-29 15:27 / 2371人閱讀

摘要：包含種基本的布局模型即為元素的中布局模型分別為流動(dòng)模型標(biāo)準(zhǔn)文檔流方式，元素從上至下，從左至右是默認(rèn)的網(wǎng)頁布局方式特點(diǎn)塊狀元素占據(jù)多帶帶的一行，從上至下排列內(nèi)聯(lián)元素會(huì)從左至右排列浮動(dòng)模型網(wǎng)頁元素可通過設(shè)置屬性值浮動(dòng)，利用浮動(dòng)特性布局層模型設(shè)置網(wǎng)

css包含3種基本的布局模型即為元素的3中布局模型,分別為 Flow/Float/Layer

Flow(流動(dòng)模型)

標(biāo)準(zhǔn)文檔流方式，元素從上至下，從左至右！是默認(rèn)的網(wǎng)頁布局方式

特點(diǎn)

塊狀元素占據(jù)多帶帶的一行，從上至下排列

內(nèi)聯(lián)元素會(huì)從左至右排列

Float(浮動(dòng)模型)

網(wǎng)頁元素可通過設(shè)置float屬性值浮動(dòng)，利用浮動(dòng)特性布局

Layer(層模型)

設(shè)置網(wǎng)頁元素position來支持層布局模型

position: static

position 默認(rèn)值,網(wǎng)頁元素仍然處于標(biāo)準(zhǔn)文檔流中,占據(jù)文檔流中的位置

position: relative

特點(diǎn)：

相對于自身原有位置進(jìn)行偏移

仍然處于標(biāo)準(zhǔn)文檔流中

隨即擁有偏移屬性和z-index 屬性

position: absolute

特點(diǎn)：

建立了以包含塊為基準(zhǔn)的定位（包含塊為距離其最近設(shè)置了定位屬性的上級元素,

若無定位祖先元素，則以HTML元素為定位元素）

完全脫離了標(biāo)準(zhǔn)文檔流

隨即擁有偏移屬性和 z-index 屬性

未設(shè)置偏移量時(shí)，無論是否存在已定位祖先元素，都保持在元素初始位置

position: fixed

特點(diǎn)：

完全脫離標(biāo)準(zhǔn)文檔流

隨機(jī)擁有偏移屬性和 z-index 屬性

無論有無已定位祖先元素，均以瀏覽器窗口為偏移參照基準(zhǔn)

位置固定，不會(huì)隨滾動(dòng)條變化

未設(shè)置偏移量時(shí)，仍然在標(biāo)準(zhǔn)文檔流原位置

GPU云服務(wù)器云服務(wù)器 css布局 css布局教程學(xué)習(xí)css布局對象模型與數(shù)據(jù)模型

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

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

相關(guān)文章

瀏覽器內(nèi)核之 CSS 解釋器和樣式布局

摘要：書接上文瀏覽器內(nèi)核之解釋器和模型本文剖析的解釋器和樣式布局。根據(jù)生成解釋器類。而后將解釋后的信息設(shè)置到元素的屬性的樣式中，然后設(shè)置標(biāo)記表明該元素需要重新計(jì)算樣式，并觸發(fā)重新計(jì)算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺(tái)留言，我會(huì)盡力解決...

_Dreams 2019-08-29 16:40 評論0 收藏0
瀏覽器內(nèi)核之 CSS 解釋器和樣式布局

摘要：書接上文瀏覽器內(nèi)核之解釋器和模型本文剖析的解釋器和樣式布局。根據(jù)生成解釋器類。而后將解釋后的信息設(shè)置到元素的屬性的樣式中，然后設(shè)置標(biāo)記表明該元素需要重新計(jì)算樣式，并觸發(fā)重新計(jì)算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺(tái)留言，我會(huì)盡力解決...

xiangchaobin 2019-08-23 11:50 評論0 收藏0
前端面試之CSS總結(jié)(上)

摘要：重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細(xì)，只是大致的描述一下，給自己提供一個(gè)知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對頁面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對頁面的布局字體顏色背景和其它效果實(shí)現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
從布局看css基礎(chǔ)

摘要：布局學(xué)習(xí)的主要目的是為了記住各種屬性么，最重要的是理解的定位機(jī)制與盒子模型。它是一個(gè)獨(dú)立的渲染區(qū)域，只有參與，它規(guī)定了內(nèi)部的如何布局，并且與這個(gè)區(qū)域外部毫不相干。 css布局學(xué)習(xí)css的主要目的是為了記住各種屬性么？NO，最重要的是理解css的定位機(jī)制與盒子模型。接下來，從布局的角度來學(xué)習(xí)css的定位機(jī)制和盒子模型，學(xué)習(xí)之前還是先來提幾個(gè)問題 1.進(jìn)行css布局前為什么要學(xué)習(xí)定位...

thekingisalwaysluc 2019-08-30 10:51 評論0 收藏0