一、布局方式
1、盒模型
盒模型由外而內(nèi)包括：邊距（margin）、邊框（border）、填充（padding）、內(nèi)容（content）。
盒模型整個(gè)在頁(yè)面中所占的地方是margin + border + padding + content。
盒模型有標(biāo)準(zhǔn)盒模型和IE的盒模型——通過(guò)css3屬性box-sizing設(shè)置
標(biāo)準(zhǔn)盒模型(W3C)content-box width=content;? ? ? ? ? ? ? 默認(rèn)模式
IE盒模型(IE)border-box width=content+padding+border
目前使用此屬性需要前綴如下:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
自己的理解:
.box {
/* box-sizing: border-box; */
float: left;
margin: 20px;
padding: 30px;
border: 10px solid rebeccapurple;
width: 300px;
height: 200px;
}
<div class="box">
這個(gè)是標(biāo)準(zhǔn)模型test 300+20+60? 380*280
這個(gè)是怪異模型test 300? 300*200
</div>
整個(gè)盒模型所占的位置就是content+border+padding+margin
而盒子的寬度對(duì)于標(biāo)準(zhǔn)來(lái)說(shuō),width=content;對(duì)于IE盒模型來(lái)說(shuō),就是width=content+border+padding;
2、flex布局
任何一個(gè)容器都可以為flex布局,行內(nèi)元素也可以使用flex布局
display: flex? ? ? ? ? ? ? ? display: inline-flex
webkit內(nèi)核瀏覽器,必須加上-webkit前綴? display:-webkit-flex;? ? float、clear和vertical-align屬性將失效。
flex彈性布局
display: flex | inline-flex
寬高不確定的情況下能夠指定對(duì)齊方式
display 屬性用來(lái)將父元素定義為 Flex 布局的容器，設(shè)置 display 值為display: flex容器對(duì)外表現(xiàn)為塊級(jí)元素；display: inline-flex容器對(duì)外表現(xiàn)為行內(nèi)元素，對(duì)內(nèi)兩者表現(xiàn)是一樣的。
Flex 布局的容器，我們有以下六個(gè)屬性可以設(shè)置的容器上：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction: row | row-reverse | column | column-reverse;
row（默認(rèn)值）：主軸在水平方向，起點(diǎn)在左側(cè)，也就是我們常見(jiàn)的從左到右；
row-reverse：主軸在水平方向，起點(diǎn)在右側(cè)；
column：主軸在垂直方向，起點(diǎn)在上沿；
column-reverse: 主軸在垂直方向，起點(diǎn)在下沿。
如圖1，圖2
flex-wrap: nowrap | wrap | wrap-reverse;
假設(shè)此時(shí)主軸是從左到右的水平方向：
nowrap（默認(rèn)）：不換行；不管你有沒(méi)有對(duì)子元素設(shè)置寬度，都不會(huì)換行，只會(huì)對(duì)子元素的寬度進(jìn)行壓縮
wrap：換行，第一行在上面；會(huì)根據(jù)你設(shè)置的子元素寬度展示，如果超過(guò)會(huì)換行。
wrap-reverse：換行，第一行在下面。
如圖3
flex-flow: flex-direction | flex-wrap;
默認(rèn):? ? ? flex-flow: row nowrap;
justify-content 定義了項(xiàng)目在主軸上的對(duì)齊方式。
.container {
? ? justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默認(rèn)）：與主軸的起點(diǎn)對(duì)齊；
flex-end：與主軸的終點(diǎn)對(duì)齊；
center：項(xiàng)目居中；
space-between：兩端對(duì)齊，項(xiàng)目之間的距離都相等；
space-around：每個(gè)項(xiàng)目的兩側(cè)間隔相等，所以項(xiàng)目與項(xiàng)目之間的間隔是項(xiàng)目與邊框之間間隔的兩倍。
如圖4
align-items 定義了項(xiàng)目在交叉軸上如何對(duì)齊。
.container {
? ? align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：與交叉軸的起點(diǎn)對(duì)齊；
flex-end：與交叉軸的終點(diǎn)對(duì)齊；
center：居中對(duì)齊；
baseline：項(xiàng)目第一行文字的基線對(duì)齊；
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或者為 auto，項(xiàng)目將占滿整個(gè)容器的高度
如圖5，圖6，圖7
align-content 定義了多根軸線的對(duì)齊方式，若此時(shí)主軸在水平方向，交叉軸在垂直方向，align-content 就可以理解為多行在垂直方向的對(duì)齊方式。項(xiàng)目排列只有一行時(shí)，該屬性不起作用。
.container {
? ? align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：與交叉軸的起點(diǎn)對(duì)齊；
flex-end： 與交叉軸的終點(diǎn)對(duì)齊；
center：居中對(duì)齊；
space-between：與交叉軸兩端對(duì)齊，軸線之間的距離相等；
space-around：每根軸線兩側(cè)的間隔都相等，所以軸線與軸線之間的間隔是軸線與邊框之間間隔的兩倍；
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或者為 auto，項(xiàng)目將占滿整個(gè)容器的高度。
----------------------------------------
對(duì)項(xiàng)目設(shè)置屬性，可以更靈活地控制 Flex 布局。以下六種屬性可以設(shè)置在項(xiàng)目上：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
order 定義了項(xiàng)目的排列順序，默認(rèn)值為 0，數(shù)值越小，排列越靠前。
給哪個(gè)order設(shè)置了負(fù)值就排在最前面
flex-grow
flex-grow 定義了項(xiàng)目的放大比例，默認(rèn)為 0，也就是即使存在剩余空間，也不會(huì)放大。
如果所有項(xiàng)目的 flex-grow 都為 1，則所有項(xiàng)目平分剩余空間；如果其中某個(gè)項(xiàng)目的 flex-grow 為 2，其余項(xiàng)目的 flex-grow 為 1，則前者占據(jù)的剩余空間比其他項(xiàng)目多一倍。
flex-shrink
flex-shrink 定義了項(xiàng)目的縮小比例，默認(rèn)為 1，即當(dāng)空間不足時(shí)，項(xiàng)目會(huì)自動(dòng)縮小。
如果所有項(xiàng)目的 flex-shrink 都為 1，當(dāng)空間不足時(shí)，所有項(xiàng)目都將等比縮??；如果其中一個(gè)項(xiàng)目的 flex-shrink 為 0，其余都為 1，當(dāng)空間不足時(shí)，flex-shrink 為 0 的不縮小。
負(fù)值對(duì)該屬性無(wú)效。
flex-basis
flex-basis 定義了在分配多余的空間之前，項(xiàng)目占據(jù)的主軸空間，默認(rèn)值為 auto，即項(xiàng)目原來(lái)的大小。瀏覽器會(huì)根據(jù)這個(gè)屬性來(lái)計(jì)算主軸是否有多余的空間。
flex-basis 的設(shè)置跟 width 或 height 一樣，可以是像素，也可以是百分比。設(shè)置了 flex-basis 之后，它的優(yōu)先級(jí)比 width 或 height 高。
flex
flex 屬性是 flex-grow、flex-shrink、flex-basis 的縮寫(xiě)，默認(rèn)值是 0 1 auto，后兩個(gè)屬性可選。
該屬性有兩個(gè)快捷值：auto（1 1 auto）和 none（0 0 auto）。auto 代表在需要的時(shí)候可以拉伸也可以收縮，none 表示既不能拉伸也不能收縮。
.item {
? ? flex: auto | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self 用來(lái)定義單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式，可以覆蓋 align-items 屬性。默認(rèn)屬性值是 auto，即繼承父元素的 align-items 屬性值。當(dāng)沒(méi)有父元素時(shí)，它的表現(xiàn)等同于 stretch。
align-self 的六個(gè)可能屬性值，除了 auto 之外，其他的表現(xiàn)和 align-items 一樣。
3、grid布局
它將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。
Grid 布局與?Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置。 。
Flex 布局是軸線布局，只能指定"項(xiàng)目"針對(duì)軸線的位置，可以看作是一維布局。
Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。
注意：項(xiàng)目只能是容器的頂層子元素，不包含項(xiàng)目的子元素，比如上面代碼的<p>元素就不是項(xiàng)目。Grid 布局只對(duì)項(xiàng)目生效。
設(shè)為網(wǎng)格布局以后，容器子元素（項(xiàng)目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設(shè)置都將失效。
.container {
? ? width: 500px;
? ? height: 500px;
? ? display: grid;
? ? grid-template-columns: 40px 50px auto 50px 40px;
? ? grid-template-rows: 25% 100px auto;
}
.container div {
? ? border: 1px solid #000;
}
通過(guò)grid-template-columns和grid-template-rows兩個(gè)屬性可以看出布局是三行五列
如下圖
grid內(nèi)容太多，不怎么好理解，后續(xù)再更新！
