三栏布局 、垂直中间自适应布局，CSS实现自适应下保持宽高比，垂直居中
1，三栏布局的几种方式：
1，圣杯（直观，需要定位,padding,但是如果宽度较小的话排版会乱，因为有个padding-left）
2，双飞翼（简洁，通过margin定位，解决了圣杯的问题，）
3，flex布局 (缺点：兼容性)
4，网格grid布局
5，绝对定位
6，表格
7,calc计算
1，圣杯布局
<style>
.container{
padding-left: 200px;
padding-right: 100px;
}
.container>div{
float: left;
height: 200px;
}
.center{
width: 100%;
background-color: aqua
}
.left{
width: 200px;
position: relative;
margin-left: -100%;
right: 200px;
background-color: aliceblue
}
.right{
width: 100px;
margin-right: -100px;
background-color: antiquewhite
}
</style>
<div class="container">
<div class="center con"></div>
<div class="left con"></div>
<div class="right con"></div>
</div>
2,双飞翼布局
<style>
.wrapper {
padding: 0;
overflow: hidden;
}
.col {
float: left;
}
.main {
width: 100%;
background-color: red;
}
.main-wrap {
margin: 0 120px 0 100px;
}
.left {
width: 100px;
margin-left: -100%;
background-color: green;
}
.right {
width: 120px;
margin-left: -120px;
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="col main">
<div class="main-wrap">main</div>
</div>
<div class="col left">left</div>
<div class="col right">right</div>
</div>
3,flex布局
.conatiner{
display:flex;
}
.center{
flex:1; （flex：grow shrink basic）
}
.left,right{
flex:0 0 100px; flex-grow flex-shrink flex-basis
}
4, grid布局
.container{
display: grid;
grid-template-rows:100px;
grid-template-columns:100px auto 100px;
}
5,table-cell表格布局
.container>div{
display:table-cell;
}
.center{
width:100%;
margin 0 100px;
}
.left，right{
min-width:100px;必须加min-width;否则会被挤压不见
}
6,绝对定位
.center{
position:absolute;
left:100px;
right:100px;
top:0;
bottom:0;
background-color: aqua
}
.left{
float:left;
width:100px;
}
.right{
float:right;
width:100px;
}
7，calc
.con{
float: left;
}
.center{
margin-left: 100px;
margin-right: 100px;
width: calc(100% - 220px);
}
8,border-box
.con{
float：left;
}
.center{
padding-left:100px;
padding-right:100px;
box-sizing:border-box;
width:100%
}
2，顶部固定宽高，中间自适应布局
1,利用flex;
html,body{
width:100%;
height:100%;
}
.wrap{
display:flex;
flex-direction:column;
height:100%;
}
.header{width:100%;height:30px}
.content{flex:1;}
2,利用absolute
html,body{
width:100%;
height:100%;
}
.header{
position:relative;
width:100%;height:30px;
}
.contentWrap{
position:relative;
width:100%;height:100%;
}
.content{
position:absolute;
top:0;
left:0;
bottom:0;
right:0
}
3，CSS实现自适应下保持宽高比
经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）
1，使用padding
padding-top与width设置比例，他们相对的都是父元素的width
.content{
width: 100%;
background-color: pink;
position: relative;
}
.content p {
float: left;
width: 30%;
padding-top: 35%;
margin-left: 3%;
box-sizing: border-box;
background: url(1.png) no-repeat;
background-size: cover;
}
<div class="content">
<p></p>
<p></p>
<p></p>
</div>
4, 垂直居中
添加链接描述
1,flex父元素设置
.parent{
width: 600px;
height: 600px;
background-color: aqua;
display: flex;
align-items: center;
}
2,flex父子元素都设置
.parent{
width: 600px;
height: 600px;
background-color: aqua;
display: flex;
}
.child{
background-color: blueviolet;
width: 200px;
height: 100px;
align-self: center;
}
3,position,父元素不定高
.child{
background-color: blueviolet;
width: 200px;
height: 100px;
position: absolute;
top:50%;
transform: translateY(-50%);
}
4,不定高
.child{
background-color: blueviolet;
width: 200px;
height: 100px;
position: absolute;
top:0;
bottom:0;
margin: auto 0;
}
5,absolute
.parent{
width: 600px;
height: 600px;
background-color: aqua;
}
.child{
background-color: blueviolet;
width: 200px;
height: 100px;
position: relative;
top:50%;
transform: translateY(-50%);
}
6，使用padding实现子元素的垂直居中