display:block、inline、inline-block和grid,table和flex等
1、display：block将元素显示为块级元素，可以设置宽高，每一个块级元素都是从新的一行开始。
常见的块级元素:div,img,ul,form,p等
2、display : inline将元素显示为行内元素，不可设置宽高。
3、display：行内块状元素，可以设置宽高在同一行。
display: inline-block可以设置三个盒子在同一行(但小程序中不常用,用flex)
4、grid布局--栅格布局。可看作强大的二维网格结构。
5、flex布局--弹性布局，css3引入。为盒状模型提供极大的灵活性，易于实现水平和垂直居中。
(flex对移动端的兼容性比较高)
共同缺点：兼容性较差，只支持IE9以上。
Grid实现如下布局：
image.png
<!DOCTYPE html>
<html>
<head>
<title>Grid 布局</title>
</head>
<body>
<div class="wrapper">
<div class="item1" style="background: red">1</div>
<div class="item2" style="background: blue">2</div>
<div class="item3" style="background: grey">3</div>
<div class="item4" style="background: green">4</div>
<div class="item5" style="background: orange">5</div>
<div class="item6" style="background: red">6</div>
</div>
</body>
<style type="text/css">
.wrapper{
display: grid;
/*列宽和列数*/
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/*间距--两种写法*/
/*grid-column-gap: 2px;
grid-row-gap: 2px;*/
/*grid-gap: 2px 2px;*/
grid-gap: 2px;
justify-items: stretch;
align-items: stretch;
}
.item1{
/*竖线*/
grid-column: 1/3;
}
.item3{
/*横线*/
grid-row: 2/4;
}
.item4{
grid-column: 2/4;
}
</style>
</html>
flex
需要container,item。
块状元素放入到flex盒子中，块状元素的行特性将会消失。
flex-direction: row(水平排列)和column(垂直排列)，row-reverse和column-reverse:不仅元素颠倒，对齐方式也颠倒。
// 主轴和交叉轴(flex-direction定义的为主轴，justify-content为主轴上的对齐，align-items为交叉轴上的对齐)
justify-content(对其方式5种): flex-end和flex-start,center,space-between(平均分布),space-around(等距分布)；
align-items: center,flex-end和flex-start,stretch(没有设置高度),baseline(元素位于容器的底部基线对齐)
flex-wrap:wrap 拆行或拆列，nowrap 不拆行或拆列
注：css中width和height不指定，width100%，height自适应
网友评论