HTML的三种布局：DIV+CSS、FLEX、GRID
Div+css布局
也就是盒⼦模型，有W3C盒⼦模型，IE盒⼦模型。盒⼦模型由四部分组成margin、border、padding、content。怎么区别这两种模型呢，区别在于w3c中的width是content的宽，IE的width是content+border+padding。
具体的可以看下⾯的图：
W3C盒⼦（标准盒⼦）：
IE盒⼦：
Flex弹性布局
通过使⽤display：flex；或者display：inline-flex；坏处就是不能再设置⼦元素的float、clear、vertical-align。
在这⾥⾯主要是在元素⾥建⽴主轴（main axis、横向的、⽔平的），交叉轴（cross axis、垂直的，竖向的）。主轴从左到右，左是main start，右是main end，之间是main size。交叉轴是从上到下，上是cross start，下是cross end，之间是cross size。
如图所⽰：
就⽤这个为例⼦嘛：
<div class="box">
<p class="item">1</p>
<p class="item">2</p>
</div>
在⽗元素div.box中可以设置的属性有六个：
1.flex-direction：row | row-reverse | column | column-reverse;
解释：这个主要⽤于设置⼦元素的排列顺序。row表⽰横向排列，从左到右；row-reverse表⽰横向排列，从右到左；column 表⽰竖向排列，从上到下；column-reverse表⽰竖向排列，从下到上。
2.flex-warp:nowarp | warp | warp-reverse;
解释：设置元素的换⾏，nowarp表⽰不换⾏；warp表⽰换⾏，按⼀般的规律换到下⾯去；warp-reverse表⽰换⾏，不过换⾏是换到这⼀⾏的上⾯去。
3.flex-flow
解释：他是flex-direction和flex-warp的简写，默认值是row，nowarp。
4.justify-content： flex-start | center | flex-end | space-between | space-around ；
解释：元素在主轴上的对齐⽅式。 flex-start左对齐；center居中；flex-end右对齐；space-between两端对齐；space-around 四周对齐。
5.align-items: flex-start | center | flex-end | baseline | stretch ;
解释：元素在交叉轴上的对齐⽅式。flex-start上对齐；center居中对齐； flex-end下对齐；baseline⽂字基线对齐；stretch没有⾼度或⾼度为auto时⾃动充满⾼度。
6.align-content：flex-start | center | flex-end | space-between | space-around | stretch；
解释：主轴和交叉轴同时出现时的对齐⽅式。flex-start左上⾓对齐；center中间对齐；flex-end右下⾓对齐；space-between 两端对齐，轴线之间平均分布；space-around每根轴线两侧间隔线相等；stretch沿交叉轴⽅向填充。
⼦元素（div.item）的六个属性：
解释：设置元素的排列顺序，数值越⼩越靠前，默认为0。
2.flex-grow：number；
解释：元素放⼤的⽐例，默认为0.
3.flex-shrink：number；
解释：元素缩⼩⽐例，默认为1；
4.flex-basis：length | auto；
解释：元素占据的固定空间，默认auto。
5.flex：none| auto | 其他值；
解释：flex-grow、flex-shrink、flex-basis的简写，默认值为0，1，auto。none表⽰（0，0，auto），auto表⽰
（1，1，auto）。
6.align-self：auto | flex-start | center | flex-end | baseline | baseline | stretch；
解释：允许单个元素与其他元素不⼀样的对齐⽅式，可覆盖align-items属性，默认值为auto，表⽰基础呢个⽗元素的align-items若⽆⽗元素，则等同于stretch。
我贴⼀个我⾃⼰的例⼦嘛：（主要是通过写骰⼦⾥⾯的圆点的位置来练习的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*基本的元素样⼦*/
.box{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 15px auto;
background-color: gainsboro;
}
.item{
background-color: fuchsia;
width: 60px;
height: 60px;
border-radius: 30px;
margin: 15px;
border: 1px solid black;
text-align: center;
line-height: 60px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">
<p class="item">1</p>
<p class="item">2</p>
</div>
<!--flex样式-->
<style>
.box{
display:flex;
}
/*1*/
/*.box{
display:flex;
}*/
/
*2*/
/*.box{
justify-content: center;
}*/
/*3*/
/*.box{
justify-content: flex-end;
}*/
/*4*/
/*.box{
align-items: center;
}*/
/*5*/
/*.box{
justify-content: center;
}
.item{
align-self: center;
}*/
/*或者*/
/*.box{
justify-content: center;
align-items: center;
}*/
/*6*/
/*.box{
justify-content: flex-end;
align-items: center;
}*/
/*7*/
/*.box{
align-items: flex-end;
}*/
/
*8*/
/*.box{
justify-content: center;
align-items: flex-end;
}*/
/*9*/
/*.box{
justify-content: flex-end;
align-items: flex-end;
}*/
/*12*/
/
*13*/
/*.box{
flex-direction: row;
justify-content: space-between; }*/
/*14*/
/*.box{
flex-direction: column;
}*/
/*15*/
/*.box{}
.item:nth-child(2){
align-self: center;
}*/
/*16*/
/*.box{
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item:nth-child(1){
align-self: flex-start;
}*/
/
*17*/
/*.box{
flex-direction: column;
align-content: space-between;
}*/
/*18*/
/*.box{
align-items: center;
}
.item:nth-child(1){
align-self: flex-start;
}
.item:nth-child(2){
align-self: flex-end;
}*/
/*或者*/
/*.box{
align-items: flex-end;
}
.item:nth-child(1){
align-self: flex-start;
}*/
/
*19*/
/*.box{
justify-content: space-between;
}
flex布局对齐方式.item:nth-child(2){
align-self: flex-end;
}*/
</style>
</body>
</html>
Grid⽹格布局
通过display：grid；或者display：inline-grid；⽹格线将元素分成⼀个⼀个的⼩格⼦。
如图，每⼀条线都是⽹格线，⽔平的⽹格线从上到下⼀次是⽹格线1、⽹格线2、⽹格线3；垂直的⽹格线是⽹格线1、⽹格线2、⽹格线3、⽹格线4。
给元素划分⽹格⽗元素会使⽤到如下的属性：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论