高級布局
阿新 • • 發佈:2018-09-27
所有 ble ack 簡寫 www. 相關 就是 run index
高級布局
一、文檔流(normal flow)
1、概念
本質為normal flow(普通流、常規流)將窗體自上而下分成一行一行,塊級元素從上至下、行內元素在每行中從左至右的順序依次排放元素。
v_hint:本質不存在文檔流概念,當一個錯誤的概念被絕大數人認為是對的,那麽它就是對的
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、解決的經典案例
<style type="text/css"> .box { width: 300px; border: 1px solid black; } .box img { width: 150px; float: left; } </style> <div class="box"> <img src="bg.gif" > 浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布 局解決的經典案例,浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布局解決 的經典案例,浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布局解決的經典 案例,浮動布局解決的經典案例,浮動布局解決的經典案例,浮動布局解決的經典案例。 </div>
2、基本語法
float: left | right
3、浮動布局問題
- 在不做清浮動情況下,父級不會獲取子級的高度
4、清浮動
- 目的:對父級所在容器中的Block-level Box布局不產生影響
- 原理:在浮動布局情況下,讓父級獲得合適的高度
① 浮動的父級設置高度 super { height: npx; } ② 浮動的父級設置overflow super { overflow: hidden; } ③ 浮動的父級兄弟設置clear brother { clear: left | right | both; } ④ 浮動的父級偽類清浮動 super:after { content: ""; display: block; clear: left | right | both; }
三、流式布局
1、解決的經典案例
<style type="text/css">
.wrap {
max-width: 1200px;
min-width: 800px;
width: 90%;
height: 600px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="wrap"></div>
2、流式布局相關操作
① 百分比設置 %
② 窗口比設置 vw | vh
③ 字體控制 em | rem
四、定位布局
1、解決的經典案例
<style type="text/css">
.ad {
width: 150px;
height: 320px;
background-color: orange;
position: fixed;
top: calc(50vh - 160px);
left: 0;
}
</style>
<div class="ad"></div>
br*100
2、定位的語法
position: static | relative | absolute | fixed
布局方位:left | right | top | bottom
3、靜態定位(static)
默認的定位,和文件流相同,遵循bfc規則
4、相當定位(relative)
① 未脫離文檔流
② 以自身原有位置作為參考坐標系
5、絕對定位(absolute)
① 脫離文檔流
② 以最近定位父級作為參考坐標系
6、固定定位(fixed)
① 脫離文檔流
② 以文檔窗口作為參考坐標系
7、z-index
一般和定位布局一起使用z-index的值越高顯示的越上層
五、Flex布局(http://www.runoob.com/w3cnote/flex-grammar.html)
1、解決的經典案例
<style type="text/css">
.container {
width: 600px;
height: 600px;
display: flex;
flex-direction: column;
border: 1px solid #333;
}
.it1, .it3 {
flex-grow: 1;
background-color: orange;
}
.it2 {
flex-grow: 2;
background-color: red;
}
</style>
<div class="container">
<div class="item it1"></div>
<div class="item it2"></div>
<div class="item it3"></div>
</div>
2、學習目的
- Flex是Flexible Box的縮寫,意為”彈性布局”,用來為盒狀模型提供最大的靈活性。
v_hint:設為Flex布局以後,子元素的float、clear和vertical-align屬性將失效。
3、基本概念
- 采用Flex布局的元素,稱為Flex容器(flex container),簡稱”容器”。它的所有子元素自動成為容器成員,稱為Flex項目(flex item),簡稱”項目”。
- 水平為軸(main axis),主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end。
- 垂直為交叉軸(cross axis),交叉軸的開始位置叫做cross start,結束位置叫做cross end。
- 項目默認沿主軸排列。單個項目占據的主軸空間叫做main size,占據的交叉軸空間叫做cross size。
4、容器屬性
① flex-direction 屬性 決定主軸的方向(即項目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
-- row(默認值):主軸為水平方向,起點在左端。
-- row-reverse:主軸為水平方向,起點在右端。
-- column:主軸為垂直方向,起點在上沿。
-- column-reverse:主軸為垂直方向,起點在下沿。
② flex-wrap 屬性 定義,如果一條軸線排不下,如何換行。
flex-wrap: nowrap | wrap | wrap-reverse;
-- nowrap(默認):不換行。
-- wrap:換行,第一行在上方。
-- wrap-reverse:換行,第一行在下方。
③ flex-flow 屬性 是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
④ justify-content 屬性 定義了項目在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
⑤ align-items 屬性 定義項目在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
⑥ align-content 屬性 定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
5、項目屬性(沒講)
① order 屬性 定義項目的排列順序。數值越小,排列越靠前,默認為0。
order: <integer>;
② flex-grow 屬性 定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。
flex-grow: <number>; /* default 0 */
③ flex-shrink 屬性 定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。
flex-shrink: <number>; /* default 1 */
④ flex-basis 屬性 定義了在分配多余空間之前,項目占據的主軸空間(main size)。
flex-basis: <length> | auto; /* default auto */
⑤ flex 屬性 是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。後兩個屬性可選。
flex: <flex-grow> <flex-shrink> <flex-basis>
⑥ align-self 屬性 允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
總結
? 1.父級display屬性設置為flex,則父級成為container,子級成為item
? 2.container設置item的排列方向flex-direction
? 3.item對於container的空間占比flex-grow
六、響應式布局
1、頁面寬度
- 小於<integer>寬度
@media only screen and (max-width: <integer>) {
selector {
}
}
- 大於<integer>寬度小於<integer>寬度
@media only screen and (min-width: <integer>) and (max-width: <integer>) {
selector {
}
}
- 大於<integer>寬度
@media only screen and (min-width: <integer>) {
selector {
}
}
高級布局