摘要:一文檔流一文檔流概念概念普通流常規流將窗體自上而下分成一行一行,塊級元素從上至下行內元素在每行中從左至右的順序依次排放元素。
normal flow(普通流,常規流)將窗體自上而下分成一行一行,塊級元素從上至下、行內元素在每行中從左至右的順序依次排放元素。一個連續具有邏輯上下的頁面整體,出現在頁面中的顯示內容,均可以理解為文檔流中。
塊級格式化上下文,它是一個獨立的渲染區域,只有Block-level box參與,它規定了內部的Block-level Box如何布局,并且與這個區域外部毫不相干。
3.BFC規則
通過讓元素浮動,可以使元素在水平上左右移動,再通過margin屬性調整位置,就是使當前元素脫離文檔流,相當于浮動起來一樣,浮動的框可以左右移動,直至它的外邊緣遇到包含框或另一個浮動框的邊緣。
float:left | right
目的:對父級所在容器中的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.百分比設置 %
如:width: 90%;
2.窗口比設置 vw|vh
如:width: 90vw;
3.字體控制 em|rem
em為相對大小,大小為最近設置字體大小的父級規定的字體大小
rem為html字體大小
定位布局的目的:讓目標標簽在指定參考系下任意布局
position:static | relative | absolute | fixed
定位開啟后,四個定位方位便會開啟,且四個方位均參與布局,如果發生沖突,左右取左,上下取上
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1755.html
摘要:不完全脫離文檔流浮動后的結果當目標標簽的內部有浮動的子級,目標標簽的兄弟標簽的布局會出現顯示異常在不做清浮動的情況下,父級不會獲取子級的高度。一、文檔流(normal flow) 1.概念 將窗體自上而下分成一行一行,塊級元素從上至下,行內元素在每行中從左至右順序排放元素 本質為normal flow(普通流,常規流),文檔流就是一個連續具有邏輯上下的頁面整體,也可以片面的說,出現在頁面中的...
摘要:層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性,一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南,包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。 迄今為止,我已經收集了100多個精通CSS的資源,它們能讓你更好地掌握CSS技巧,使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...
摘要:那有沒有一種解決方案,是可以完全從零開始去自定義一個模板,能按需進行配置生成,答案是有的。在之前的版本,已經支持自定義模板功能,但僅限于對進行自定義,包含基礎導航側邊欄頁腳等配置,但這顯然是不夠的。 自定義模板顧名思義即是定制自己的模板,相對社區已有的各類 React 模板,大多數是全家桶的形式,內置了很多功能和頁面集合,所謂開箱即用;但在實際使用過程中,我們會發現,下載模板進行相應的...
摘要:那有沒有一種解決方案,是可以完全從零開始去自定義一個模板,能按需進行配置生成,答案是有的。在之前的版本,已經支持自定義模板功能,但僅限于對進行自定義,包含基礎導航側邊欄頁腳等配置,但這顯然是不夠的。 自定義模板顧名思義即是定制自己的模板,相對社區已有的各類 React 模板,大多數是全家桶的形式,內置了很多功能和頁面集合,所謂開箱即用;但在實際使用過程中,我們會發現,下載模板進行相應的...
摘要:默認值為,表示繼承父元素的屬性,如果沒有父元素,則等同于。可以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間,或用關鍵詞和,等同于和。是動畫的開始,是動畫的完成。為了得到最佳的瀏覽器支持,應該始終定義和選擇器。一.Flex布局 1.概念 下圖為flex的相關概念示意圖 ? 使用flex布局的容器(flex container),他內部的元素自動成為flex項目(flex it...
閱讀 2169·2023-04-25 15:00
閱讀 2343·2021-11-18 13:14
閱讀 1154·2021-11-15 11:37
閱讀 3083·2021-09-24 13:55
閱讀 1221·2019-08-30 15:52
閱讀 2644·2019-08-29 12:35
閱讀 3359·2019-08-29 11:04
閱讀 1209·2019-08-26 12:13