HTML的三种布局:DIV+CSS、FLEX、GRID

Div+css布局

也就是盒子模型,有W3C盒子模型,IE盒子模型。盒子模型由四部分组成margin、border、padding、content。

怎么区别这两种模型呢,区别在于w3c中的width是content的宽,IE的width是content+border+padding。

具体的可以看下面的图:

W3C盒子(标准盒子):

HTML的三种布局:DIV+CSS、FLEX、GRID

IE盒子:

HTML的三种布局:DIV+CSS、FLEX、GRID

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。

如图所示:

HTML的三种布局:DIV+CSS、FLEX、GRID

就用这个为例子嘛:

<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)的六个属性:

1.order:number ;

解释:设置元素的排列顺序,数值越小越靠前,默认为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;
}
.item:nth-child(2){
align-self: flex-end;
}*/

</style>
</body>
</html>

Grid网格布局

通过display:grid;或者display:inline-grid;网格线将元素分成一个一个的小格子。

HTML的三种布局:DIV+CSS、FLEX、GRID

如图,每一条线都是网格线,水平的网格线从上到下一次是网格线1、网格线2、网格线3;垂直的网格线是网格线1、网格线2、网格线3、网格线4。

给元素划分网格父元素会使用到如下的属性:

1.grid-temlate-columns:number/perecent;划分列。可以有多个值(可以是具体的100px也可以是百分比),每一个值代表一列。

2.grin-template-rows:number/percent;划分行。与划分列的规则一样。

子元素可以独占一个网格也可以占多个网格,属性设置如下:

1.grid-columns-start:number;元素从哪个网格线列开始。

2.grid-columns-end:number;元素到哪个网格线列结束。

3.grid-row-start:元素从哪个网格线行开始;

4.grid-row-end:元素从哪个网格行结束;

1~4这几个属性就相当于设置元素的跨几行、跨几列这样。

下面是我自己写的例子,仅供参考哦:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.warpper{
display: grid;
border: 3px solid aquamarine;
text-align: center;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
div:nth-child(1) {
background-color: firebrick;
}
div:nth-child(2) {
background-color: forestgreen;
}
div:nth-child(3) {
background-color: fuchsia;
}
div:nth-child(4) {
background-color: cornflowerblue;
}
div:nth-child(5) {
background-color: gold;
}
div:nth-child(6) {
background-color: greenyellow;
}
.item1{
grid-column-start: 1;
grid-column-end: 3;
}
.item3{
grid-row-start: 2;
grid-row-end: 4;
}
.item4{
grid-column-start: 2;
grid-column-end: 4;
}
</style>
</head>
<body>

<div class="warpper">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>

以上就是我自己对与HTML中的三种布局的认识,有不足的地方还请各位帮我指出来,这样下次就会多加注意啦!!!谢谢

我想我应该把我自己参考学习的博客贴出来的,可是不知道怎么弄,我再研究下,这样下一篇就可以贴出来

上一篇:【转】扫盲 同步利器、分布式网盘--BT Sync


下一篇:Flex元素布局规则总结,以及布局和容器