成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

高級布局

liukai90 / 930人閱讀

摘要：一文檔流一文檔流概念概念普通流常規(guī)流將窗體自上而下分成一行一行，塊級元素從上至下行內(nèi)元素在每行中從左至右的順序依次排放元素。

一.文檔流

1.概念

normal flow(普通流,常規(guī)流)將窗體自上而下分成一行一行，塊級元素從上至下、行內(nèi)元素在每行中從左至右的順序依次排放元素。一個連續(xù)具有邏輯上下的頁面整體,出現(xiàn)在頁面中的顯示內(nèi)容,均可以理解為文檔流中。

2.BFC(Block formatting context)

塊級格式化上下文，它是一個獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

3.BFC規(guī)則

  • 內(nèi)部的Box會在垂直方向,一個接一個地放置。
  • Box自身垂直方向的位置由margin-top決定，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
  • Box自身水平方向的位置由margin左或右決定(具體已經(jīng)參照BFC方位)，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加。

二.浮動布局

1.概念

通過讓元素浮動,可以使元素在水平上左右移動,再通過margin屬性調(diào)整位置,就是使當前元素脫離文檔流,相當于浮動起來一樣,浮動的框可以左右移動,直至它的外邊緣遇到包含框或另一個浮動框的邊緣。

2.基本語法

float:left | right

3.浮動的印象

  • 對附近的元素布局造成改變,使得布局混亂。
  • 因為i浮動元素脫離了文檔流,會出現(xiàn)一種高度坍塌的現(xiàn)象:原來的父容器高度是當前元素撐開的,但是當該元素浮動后,脫離文檔流浮動起來,那父容器的高度就會坍塌(前提是父容器高度小于該浮動元素)

4.清浮動

目的:對父級所在容器中的Block-level Box布局不產(chǎn)生影響
原理:再浮動布局情況下,讓父級獲得合適的高度
1.浮動的父級設置高度
sup{
    height:npx;
}
2.浮動的父級設置overflow
sup{
    overflow:hidden;
}
3.浮動的父級兄弟設置clear
brother{
    clear: left | right | both;
}
4.浮動的父級偽類清浮動
sup:after{
    content:"";
    display:block;
    clear:both;
}

三.流式布局

1.概念

流式布局是頁面元素的寬度按照分辨率進行適配調(diào)整,但整體布局不變.就是布局脫離固定值限制,可以根據(jù)頁面情況改變相應發(fā)生改變。

2.流式布局相關(guān)操作

1.百分比設置 %
    如:width: 90%;
2.窗口比設置 vw|vh
    如:width: 90vw;
3.字體控制 em|rem
    em為相對大小,大小為最近設置字體大小的父級規(guī)定的字體大小
    rem為html字體大小

四.定位布局

1.概念

定位布局的目的:讓目標標簽在指定參考系下任意布局

2.基本語法

position:static | relative | absolute | fixed
  • static:靜態(tài)定位,默認定位.
  • relative:相對定位,未脫離文檔流,以自身原有位置作為參考坐標系.
  • absolute:絕對定位,完全脫離文檔流,以最近定位父級作為參考坐標系.
  • fixed:固定定位,完全脫離文檔流,以文檔窗口作為參考坐標系.

定位開啟后,四個定位方位便會開啟,且四個方位均參與布局,如果發(fā)生沖突,左右取左,上下取上

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1755.html

相關(guān)文章

  • 高級布局

    摘要：不完全脫離文檔流浮動后的結(jié)果當目標標簽的內(nèi)部有浮動的子級，目標標簽的兄弟標簽的布局會出現(xiàn)顯示異常在不做清浮動的情況下，父級不會獲取子級的高度。一、文檔流(normal flow) 1.概念 將窗體自上而下分成一行一行，塊級元素從上至下，行內(nèi)元素在每行中從左至右順序排放元素 本質(zhì)為normal flow(普通流，常規(guī)流)，文檔流就是一個連續(xù)具有邏輯上下的頁面整體，也可以片面的說，出現(xiàn)在頁面中的...

    Kylin_Mountain 評論0 收藏0

  • [譯]148個資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關(guān)于基礎特性，一份關(guān)于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

    impig33 評論0 收藏0

  • Iceworks 2.8.0 發(fā)布，自定義你的 React 模板

    摘要：那有沒有一種解決方案，是可以完全從零開始去自定義一個模板，能按需進行配置生成，答案是有的。在之前的版本，已經(jīng)支持自定義模板功能，但僅限于對進行自定義，包含基礎導航側(cè)邊欄頁腳等配置，但這顯然是不夠的。 自定義模板顧名思義即是定制自己的模板，相對社區(qū)已有的各類 React 模板，大多數(shù)是全家桶的形式，內(nèi)置了很多功能和頁面集合，所謂開箱即用；但在實際使用過程中，我們會發(fā)現(xiàn)，下載模板進行相應的...

    FrozenMap 評論0 收藏0

  • Iceworks 2.8.0 發(fā)布，自定義你的 React 模板

    摘要：那有沒有一種解決方案，是可以完全從零開始去自定義一個模板，能按需進行配置生成，答案是有的。在之前的版本，已經(jīng)支持自定義模板功能，但僅限于對進行自定義，包含基礎導航側(cè)邊欄頁腳等配置，但這顯然是不夠的。 自定義模板顧名思義即是定制自己的模板，相對社區(qū)已有的各類 React 模板，大多數(shù)是全家桶的形式，內(nèi)置了很多功能和頁面集合，所謂開箱即用；但在實際使用過程中，我們會發(fā)現(xiàn)，下載模板進行相應的...

    instein 評論0 收藏0

  • 高級布局補充.過濾以及動畫

    摘要：默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于?？梢愿淖?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞和，等同于和。是動畫的開始，是動畫的完成。為了得到最佳的瀏覽器支持，應該始終定義和選擇器。一.Flex布局 1.概念 下圖為flex的相關(guān)概念示意圖 ? 使用flex布局的容器(flex container),他內(nèi)部的元素自動成為flex項目(flex it...

    xialong 評論0 收藏0

發(fā)表評論

0條評論

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