CSS布局模型

liangzai_cool 發(fā)布于2019-04-23 13:09 / 3368人閱讀

摘要：實(shí)現(xiàn)相對(duì)于父元素定位參照定位的元素相對(duì)參照元素進(jìn)行定位相對(duì)定位元素

css三種基本網(wǎng)頁(yè)布局模型：流動(dòng)模型（Flow）、浮動(dòng)模型（Float）、層模型（Layer）

流動(dòng)模型（默認(rèn)狀態(tài)下的模型）特點(diǎn)：

????塊狀元素在所包含元素內(nèi)自上而下按順序垂直延伸分布，內(nèi)聯(lián)元素在所處的包含元素內(nèi)從左到右水平分布

浮動(dòng)模型

? 可以讓兩個(gè)塊狀元素并排顯示 ? ?float:left ? ?float:right

層模型

? 讓元素在網(wǎng)頁(yè)中精確定位，像Photoshop中的圖層一樣對(duì)每個(gè)圖層精確定位，定義position 屬性

? 層模型三種形式：1、絕對(duì)定位（position：absolute）

? ? ? ? ? ? ? ? ? ? ? ? ? ?2、相對(duì)定位（position：relative）

? ? ? ? ? ? ? ? ? ? ? ? ? ?3、固定定位（position：fixed）

絕對(duì)定位：position：absolute ---將元素從文檔流中拖出，使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位，如果不存在包含塊，則相對(duì)于body元素，也就是瀏覽器窗口絕對(duì)定位

相對(duì)定位：position：relative --- 通過(guò)left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置，相對(duì)于以前的位置偏離，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)

固定定位：position：fixed ?,不會(huì)隨瀏覽器滾動(dòng)條滾動(dòng)而滾動(dòng)，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響

relative和absolute組合使用實(shí)現(xiàn)相對(duì)于其它元素進(jìn)行定位

? ? ?參照定位的元素必須是相對(duì)定位元素的前輩元素，參照定位的元素必須加入position:relative;定位元素加入position:absolute，便可以使用top、bottom、left、right來(lái)進(jìn)行偏移定位了。

實(shí)現(xiàn)box2相對(duì)于父元素box1定位：

<div id="box1">
    <div id="box2">相對(duì)參照元素進(jìn)行定位div>
div>

#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1497.html

相關(guān)文章

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

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

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

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

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

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

?。琛?/span> 2019-08-29 11:18 評(píng)論0 收藏0
H5多列布局

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

Jingbin_ 2019-08-29 16:15 評(píng)論0 收藏0
H5多列布局

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

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

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

thekingisalwaysluc 2019-08-30 10:51 評(píng)論0 收藏0