超详细常用css布局 _css

一、垂直居中布局
绝对定位布局

.parent {position: relative;}.child {width: 200px;height: 200px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}复制代码

2.margin 负间距
.child{width:200px;height: 200px;position: absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;}复制代码

Transforms 变形

.child {width: 200px;height: 200px;position:absolute;left:50%;/* 定位父级的50% */top:50%;transform: translate(-50%,-50%); /*自己的50% */}复制代码

flex布局

.parent {display: flex;justify-content:center;align-items:center;}复制代码

.parent {display: flex;}.child {margin: auto}复制代码
table布局父元素设置teable-cell元素,利用三层结构模拟父子结构

.parent {display: table;width: 200px;height: 200px;}.child {display: table-cell;text-align: center;vertical-align: middle;}.box {display: inline-block;}复制代码

grid布局

.parent {display: grid;}.child {justify-self: center;align-self: center;}复制代码

.parent {display: grid;}.child {margin: auto;}复制代码
二、自适应布局
右边宽度固定，左边自适应

文章插图

float布局实现方式
实现步骤：

给子元素设置相同高度，left元素向左浮动,设置固定宽度100px
right元素利用margin-left调整位置

<style>.container > div {height: 200px;}.left {background-color: #ce5a4b;float: left;width: 100px;}.right {background-color: #499e56;margin-left: 100px;}</style><body><div class="container"><div class="left"></div><div class="right"></div></div></body>复制代码

flex实现方式：

父元素设置display: flex,给left元素设置固定宽度
给right元素设置flex:1使其填充其余空间

<style>.container {display: flex;}.left {background-color: #ce5a4b;height: 200px;width: 100px;}.right {background-color: #499e56;height: 200px;flex: 1;}</style><body><div class="container"><div class="left"></div><div class="right"></div></div></body>复制代码

上部高度固定，下部高度自适应

文章插图

绝对定位实现方式：
实现步骤：

设置container元素高度与box-sizing属性，使padding计算入container元素中
设置top元素高度，并使用绝对定位将其放置在container头部
设置container元素内边距padding-top为top元素的高度，设置bottom元素高度为100%

<style>.container {height: 100%;padding: 100px 0 0;box-sizing: border-box;position: relative;}.top {height: 100px;background: #ce5a4b;position: absolute;top: 0;left: 0;width: 100%;}.bottom {height: 100%;background: #499e56;}</style><body><div class="container"><div class="top"></div><div class="bottom"></div></div></body>复制代码

普通布局实现：
实现步骤：

设置container元素高度与box-sizing属性，使padding计算入container元素中
设置top元素高度，使用margin移动元素位置到container元素顶部
设置container元素内边距padding-top为top元素的高度，设置bottom元素高度为100%

<style>.container {height: 500px;padding-top: 100px;box-sizing: border-box;}.top {height: 100px;background: #ce5a4b;margin: -100px 0 0;}.bottom {height: 100%;background: #499e56;}</style><body><div class="container"><div class="top"></div><div class="bottom"></div></div></body>复制代码

三、三栏式布局三栏式布局的七种布局方式：float布局、绝对定位布局、圣杯布局、双飞翼布局、Flex布局、表格布局、网格布局

文章插图
【超详细常用css布局】

float布局实现步骤：
1.左右两栏设置float属性使其脱离文档流左边栏设置 float:left, 右边栏设置float: right
2.给中间元素设置margin-left、和margin-right，设置margin的原因是当中间元素高度超出左右两边时，中间元素会被覆盖