css2 1的一些深入了解(2)聖杯布局與雙飛翼

2021-10-01 16:00:13 字數 2343 閱讀 1016

聖杯布局:主要是利用float position 以及margin為負值控制邊界

>

>

charset

="utf-8"

>

>

title

>

type

="text/css"

>

*body

#header,#footer

#content

#content .middle,#content .left,#content .right

.middle

.left

.right

/* 清除浮動是為了撐開父級高度 */

.clearfix

.clearfix:after

style

>

head

>

>

"header"

>

headerdiv

>

"content"

class

="clearfix"

>

class

="middle"

>

middle

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

middle

/>

div>

class

="left"

>

leftdiv

>

class

="right"

>

rightdiv

>

div>

"footer"

>

footerdiv

>

body

>

html

>

雙飛翼布局

最好不要出現定位,會可能有層級問題,所以就出現了雙飛翼,

聖杯布局中相對定位用來將left和right移動向兩端

>

>

charset

="utf-8"

>

>

title

>

type

="text/css"

>

*body

/*頭部 腳部樣式*/

#header,#footer

/*三列的偽等高布局*/

#content .middle,#content .left,#content .right

/*雙飛翼布局*/

#content

#content .middle

//不同之處!!!!

#content .middle .m_inner

#content .left,#content .right

#content .left

#content .right

style

>

head

>

>

"header"

>

>

headerh4

>

div>

"content"

>

class

="middle"

>

class

="m_inner"

>

middle

div>

div>

class

="left"

>

leftdiv

>

class

="right"

>

rightdiv

>

div>

"footer"

>

>

footerh4

>

div>

body

>

html

>

css2 1的一些深入了解(1)

最近感覺晚上9點以後有點閒,每天補充一點深入了解的東西,算是能加快進度吧 1.定位,包含塊,預設值問題 視口和包含塊不是乙個東西 初始包含塊是乙個視窗大小的矩形 對於設定有position屬性的元素,若position relative或者static那麼包含塊為最近的塊級祖先元素的內容區域 對於乙...

您對CSS 2 1的了解

css 2修訂版1已經作為候選建議發布了將近兩個月,但令人驚訝的是,網上對此的討論很少。這是乙個有趣的規範,任何有標準意識的web開發人員都應該意識到。css 2.1對css 2進行了修訂,以更好地反映瀏覽器市場的當前狀況,並借鑑自css 2發布以來的四年經驗。它修剪掉了整個css社群從未真正採用的...

css限定字元 您對CSS 2 1的了解

css限定字元 css 2修訂版1已作為候選建議發布了將近兩個月,但令人驚訝的是,網上對此討論很少。這是乙個有趣的規範,任何有標準意識的web開發人員都應該意識到。css 2.1對css 2進行了修訂,以更好地反映瀏覽器市場的當前狀況,並借鑑自css 2發布以來的四年經驗。它刪除了整個css社群從未...