CSS系列 -- 各种布局实现

前言

基础知识：

• position 定位
• flex 布局
• grid 布局

position定位

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

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

3. absolute 绝对定位

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

4. fixed 绝对定位

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

flex 布局

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

grid 布局

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. 相对定位 position: relative 和 top: 50%

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. 外层 relative，内层设置 3 个 position 为 absolute 和 margin

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

2. 外层 relative，内层设置 3 个 position 为 absolute 和 border

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

3. grid 布局

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

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

1. 左右两栏设置 float 浮动

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

2. flex 布局，中间一栏 flex: 1

.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;
 }