1、css盒模型
css的盒模型包括：content+padding+border+margin
同时值得注意的是：css 的外边距会在垂直方向合并。 两个上下方向相邻的块元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值
<style>
#test1{
height: 100px;border: 1px solid red;margin: 20px;
}
#test2{
height: 100px;border: 1px solid red;margin:10px;
}
</style>
<body>
<div id="test1"></div>
<div id="test2"></div>
</body>只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
IE怪异的盒模型和标准浏览器的盒模型，可以通过box-sizing属性控制两种盒模型的变化
2、box-sizing属性值
这个属性值和是css的盒模型是有关系的。
box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。在写css 代码的时候 最好先css reset以下。
这个属性有以下3个值：
1、content-box ：可以使设置的宽度和高度值应用到元素的内容框，，盒子的width只包含内容。
即总宽度=margin+border+padding+width
2、border-box:设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
3、inherit , 规定应从父元素继承 box-sizing 属性的值
画一个三角形出来
<style>
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
}
</style>
<body>
<div class="triangle"></div>
</body>3、box-sizing属性的应用场景
IE8及以上版本支持该属性
（1）在css reset的过程中使用 box-sizing:border-box 让代码更符合ui设计者和前端设计者的逻辑
使用方法如下：
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}（2）使用box-sizing：border-box实现布局三栏目案例
<style>
div{
height:700px;
float:left; box-sizing:border-box;
}
div.left{
width:25%;
background:red;
border: 1px solid black;
}
div.cent{
width:50%;
background:yellow;
padding:0 20px;
border: 1px solid black;
}
div.right{
width:25%;
background:blue;
border: 1px solid black;
}
</style>
<body>
<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>
</body>如果要是没有在div上使用 box-sizing:border-box;这个值的时候 最后一个div会被挤下来。。
4、flex布局 弹性布局
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。
简便、完整、响应式地实现各种页面布局提出了flex布局 。IE10以上支持这个属性。
flex容器的属性
flex容器中有：水平轴 垂直轴
使用方法，为父元素设置display属性值
.box{
display: flex; 或者是 inline-flex
}Webkit 内核的浏览器，必须加上-webkit前缀。
设为 Flex 布局以后，flex容器中子元素的float、clear和vertical-align属性将失效。
flex-direction 规定子项目在主轴方向上的排列方式 row row-reverse column column-reverse
flex-wrap 如果项目在一条轴线上排不下如何换行 no-wrap wrap wrap-reverse换行第一行在下方
flex-flow 是以上两个属性的简写
justify-content 属性定义了项目在主轴上的对齐方式。
flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中 实现了水平居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍align-items 属性定义了项目在垂直轴上的对齐方式。
flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。 实现了垂直居中
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。flex项目的属性
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 定义为1 的时候 如果有剩余空间就会放大这个div
属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex 以上两个属性的简写
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式
5、Gird布局
flex布局是较好的一维布局方式 gird是二维布局方式
ie10+以上支持 手机都不支持
容器需要设置：
display:grid，
grid-template-columns：第1列的大小 第2列的大小 第3列的大小 第4列的大小..
grid-template-rows：第1行的大小 第2行的大小 第3行的大小 第4行的大小
gird-column-gap:定义列之间的距离
gird-row-gap:定义行之间的距离
justify-items: start | end | center | stretch（默认） 定义项目在水平方向的排列位置
align-items: start | end | center | stretch ; 定义项目在垂直方向的排列位置
项目需要设置：
grid-column：子元素的位置
grid-row：子元素的位置
要实现gird布局 里边的子项的数目必须是足够的
使用gird布局
.container{
display:grid;height: 400px;
grid-template-columns: 40px 50px auto 50px 40px ;
grid-template-rows: 1fr 1fr 1fr; //将continer纵向分成3等分
grid-column-gap: 10px; //定义每一列之间的空隙的宽度
grid-row-gap: 10px; //定义每一行之间的空隙的宽度
}
.item{
border: 1px solid red;
}
html
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>里边有9个
</div>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。