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