参考：https://www.cnblogs.com/chenwenhao/p/11217590.html
/* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */
.box {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: red;
border: 20px solid black;
box-sizing: border-box;
}
/* 标准模型 */ box-sizing:content-box; 内容+padding ===》红色区域 =200px /*IE模型*/ box-sizing:border-box;
用 padding-bottom 撑开边距
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>
16种方法实现水平居中垂直居中（http://louiszhai.github.io/2016/03/12/css-center/）
flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局
.left{
float:left;
width:300px;
margin-right: 10px;
background: red;
}
.right{
overflow: hidden; /* 创建BFC */
background: yellow;
}
table布局兼容性最好，当然flex布局的align-items: stretch;也行
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
.shape {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid blue;
background: white;
}
BFC触发条件：
BFC特性：
rem原理
rem布局的本质是等比缩放，一般是基于宽度，假设将屏幕宽度分为100份，每份宽度是1rem，1rem的宽度是屏幕宽度/100，饭后子元素设置rem单位的属性，通过改变html元素的字体大小，就可以设置子元素的时机大小。
rem的布局加载闪烁的问题
解决方案：媒体查询设置根元素字体的大小，比如设计稿是750px，对应的开发方式是1rem=100px，那375px的font-size大小就是50px
比rem更好的方案（缺点兼容性不好）
vw（1vw是视口宽度的1%，100vw就是视口宽度），vh（100vh就是视口高度）
定位、transform：tranlate、scareX
原文：https://www.cnblogs.com/jcxfighting/p/11667133.html