CSS系列 — 各种布局实现

position定位

这里我们有必要先了解一下 position 定位

1. static 元素出现在正常的流中
2. relative 相对定位

a. 相对于正常位置进行定位
b. 不脱离文档流
 

3. absolute 绝对定位

a. 相对于 static 定位以外的第一个父元素进行定位
b. 页面滚动时随着外部`非` static 定位的父元素移动而移动
c. 脱离文档流
 

4. fixed 绝对定位

a. 相对于`浏览器窗口`进行定位
b. 页面滚动时不移
c. 脱离文档流
 

flex布局详细内容见 CSS系列 -- flex布局

grid布局详细内容见 CSS系列 -- grid布局

一、水平垂直居中

1. 绝对定位元素 position:absolute + margin

.div{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; /*高度的一半*/
    margin-left: -50px; /*宽度的一半*/
}
 

缺点：需要知道元素的宽高才能设置margin-top、margin-left的值才能实现居中

CSS3.0中使用 transform 代替 margin

.div{
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
 }
 

缺点：兼容问题

2. 绝对定位元素 position: absolute + margin: auto

.div{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
 

注意：上下左右均为 0 且 位置绝对定位

3. 相对定位

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.div{
    margin: 0 auto; /*水平居中*/
    position: relative; /*设置position*/
    top: 50%;  /*偏移*/
    /*margin-top: -150px;*/    /*第一种：margin-top*/
    transform: translateY(-50%); /*第二种：transform：转换*/
}
 

4. flex布局

body{
    display: flex;
    align-items: center;  /*定义body的元素垂直居中*/
    justify-content: center;  /*定义body的元素水平居中*/
}
.div{
    width: 300px;
    height: 300px;
    background: orange;
}
 

二、顶部底部高度固定，中间高度自适应

1. 设置position和margin

.box {
    positon: relative;
}
.top {
    position: absolute
    height:100px;
    top: 0
}
.middle {
    position: absolute
    top: 100px;
    bottom: 100px;
}
.bottom {
    position: absolute
    height:100px;
    bottom: 0
}
 

2. 设置position和border

.box {
    positon: relative;
}
.top {
    position: absolute
    height:100px;
    top: 0
}
.middle {
    position: absolute
    border-top: 100px;
    border-bottom: 100px;
}
.bottom {
    position: absolute
    height:100px;
    bottom: 0
}
 

3. grid布局

.grid-box {
     display:grid;
     width:100%;
     grid-template-rows: 100px auto 100px;
 }
.left {
     background: red;
}
.middle {
      background: yellow;
}
.right {
       background: blue;
}
 

三、左右两栏宽度固定，中间宽度自适应

1. float浮动

.left {
    float:left;
    width:100px;
}
.middle {
}
.right {
    float:right;
    width:100px;
}
 

2. flex布局

.flex-box {
      display:flex;
}
 .left {
      width:300px;
}
.middle {
      flex:1;
}
.right {
      width:100px;
}
 

3. grid布局

.grid-box {
     display:grid;
     width:100%;
     grid-template-columns: 100px auto 100px;
 }
.left {
     background: red;
}
.middle {
      background: yellow;
}
.right {
       background: blue;
}
 

四、九宫格布局

1. flex布局

.flex-box {
    width: 100%;
    display:flex;
    flex-wrap: wrap;
}
.smallBox{
    width: ((100% / 3) - (5px*2));
    margin:5px;
    height:50px;
}
 

2. grid布局

.grid-box {
    display:grid;
    width:100%;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns:100px 100px 100px;
 }