三种布局(盒模型,flex,grid)
一、布局方式
1、盒模型
盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。
盒模型整个在页面中所占的地方是margin + border + padding + content。
盒模型有标准盒模型和IE的盒模型——通过css3属性box-sizing设置
标准盒模型(W3C)content-box width=content; 默认模式
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">
这个是标准模型test 300+20+60 380*280
这个是怪异模型test 300 300*200
</div>
整个盒模型所占的位置就是content+border+padding+margin
而盒子的宽度对于标准来说,width=content;对于IE盒模型来说,就是width=content+border+padding;
2、flex布局
任何一个容器都可以为flex布局,行内元素也可以使用flex布局
display: flex display: inline-flex
webkit内核浏览器,必须加上-webkit前缀 display:-webkit-flex; float、clear和vertical-align属性将失效。
flex弹性布局
display: flex | inline-flex
宽高不确定的情况下能够指定对齐方式
display 属性用来将父元素定义为 Flex 布局的容器，设置 display 值为display: flex容器对外表现为块级元素；display: inline-flex容器对外表现为行内元素，对内两者表现是一样的。
Flex 布局的容器，我们有以下六个属性可以设置的容器上：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴在水平方向，起点在左侧，也就是我们常见的从左到右；
row-reverse：主轴在水平方向，起点在右侧；
column：主轴在垂直方向，起点在上沿；
column-reverse: 主轴在垂直方向，起点在下沿。
如图1，图2
图1
图2
flex-wrap: nowrap | wrap | wrap-reverse;
假设此时主轴是从左到右的水平方向：
nowrap（默认）：不换行；不管你有没有对子元素设置宽度，都不会换行，只会对子元素的宽度进行压缩
wrap：换行，第一行在上面；会根据你设置的子元素宽度展示，如果超过会换行。
wrap-reverse：换行，第一行在下面。
如图3
图3
flex-flow: flex-direction | flex-wrap;
默认: flex-flow: row nowrap;
justify-content 定义了项目在主轴上的对齐方式。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认）：与主轴的起点对齐；
flex-end：与主轴的终点对齐；
center：项目居中；
space-between：两端对齐，项目之间的距离都相等；
space-around：每个项目的两侧间隔相等，所以项目与项目之间的间隔是项目与边框之间间隔的两倍。
如图4
图4
align-items 定义了项目在交叉轴上如何对齐。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：与交叉轴的起点对齐；
flex-end：与交叉轴的终点对齐；
center：居中对齐；
baseline：项目第一行文字的基线对齐；
stretch（默认值）：如果项目未设置高度或者为 auto，项目将占满整个容器的高度
如图5，图6，图7
图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：每根轴线两侧的间隔都相等，所以轴线与轴线之间的间隔是轴线与边框之间间隔的两倍；
stretch（默认值）：如果项目未设置高度或者为 auto，项目将占满整个容器的高度。
----------------------------------------
对项目设置属性，可以更灵活地控制 Flex 布局。以下六种属性可以设置在项目上：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
order 定义了项目的排列顺序，默认值为 0，数值越小，排列越靠前。
给哪个order设置了负值就排在最前面
flex-grow
flex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。
如果所有项目的 flex-grow 都为 1，则所有项目平分剩余空间；如果其中某个项目的 flex-grow 为 2，其余项目的 flex-grow 为 1，则前者占据的剩余空间比其他项目多一倍。
flex-shrink
flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。
如果所有项目的 flex-shrink 都为 1，当空间不足时，所有项目都将等比缩小；如果其中一个项目的 flex-shrink 为 0，其余都为 1，当空间不足时，flex-shrink 为 0 的不缩小。
负值对该属性无效。
flex-basis
flex-basis 定义了在分配多余的空间之前，项目占据的主轴空间，默认值为 auto，即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。
flex-basis 的设置跟 width 或 height 一样，可以是像素，也可以是百分比。设置了 flex-basis 之后，它的优先级比 width 或 height 高。
flex
flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值是 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 属性。默认属性值是 auto，即继承父元素的 align-items 属性值。当没有父元素时，它的表现等同于 stretch。
align-self 的六个可能属性值，除了 auto 之外，其他的表现和 align-items 一样。
3、grid布局
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。 。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
.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内容太多，不怎么好理解，后续再更新！
