高級布局

liukai90 發布于2019-04-23 13:21 / 872人閱讀

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

一.文檔流

1.概念

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

2.BFC(Block formatting context)

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

3.BFC規則

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

二.浮動布局

1.概念

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

2.基本語法

float:left | right

3.浮動的印象

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

4.清浮動

目的:對父級所在容器中的Block-level Box布局不產生影響
原理:再浮動布局情況下,讓父級獲得合適的高度

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.概念

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

2.流式布局相關操作

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

四.定位布局

1.概念

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

2.基本語法

position:static | relative | absolute | fixed

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1755.html

高級布局

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

Kylin_Mountain 2019-04-23 13:20 評論0 收藏0
[譯]148個資源讓你成為CSS專家

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

impig33 2019-08-29 11:10 評論0 收藏0
Iceworks 2.8.0 發布，自定義你的 React 模板

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

FrozenMap 2019-08-02 16:04 評論0 收藏0
Iceworks 2.8.0 發布，自定義你的 React 模板

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

instein 2019-08-23 11:54 評論0 收藏0
高級布局補充.過濾以及動畫

摘要：默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。可以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞和，等同于和。是動畫的開始，是動畫的完成。為了得到最佳的瀏覽器支持，應該始終定義和選擇器。一.Flex布局 1.概念下圖為flex的相關概念示意圖 ? 使用flex布局的容器(flex container),他內部的元素自動成為flex項目(flex it...

xialong 2019-04-23 13:21 評論0 收藏0