双飞翼布局，圣杯布局
主要是margin为负数的应用
负边距的使用；
影响文档流位置：会使它们在文档流中的位置发生偏移，相对定位是原来的位子还在，但是影子不见了；负边距则是自己的位置也被移动了；
影响文档流宽度：如果元素没有定宽，元素的宽度将会被增加；
影响浮动元素位置：比如说下面：
#div1 {background-color: red;width: 100%;float: left;}#div2 {background-color: blue;float: left;margin-left: -100%;}#div3 {background-color: yellow;float: left;margin-left: -60px;}
margin - left : -100% 被向左移动了父元素的宽度那么长的距离；直接移到了上一行的那个位置，
margin - left: 60px (他自己的宽度)，向左移动了自己的宽度那么长的距离，上一行从右边开始减去60px的位置；
所以双飞翼布局，圣杯布局的原理：
双飞翼布局：middle的div里又插入一个div，通过调整内部div的margin值不被盖住；
圣杯布局： container 是细腰，所以通过margin 复制调整到一行中后，我们可以通过position： relative 来不让他们盖住；
<style>.container{padding-right: 40px;padding-left: 40px;background-color: gray;height: 400px ;}.main {background-color: red;width: 100%;float: left;height: 100%;}.left {background-color: blue;width: 40px;float: left;height: 100%;margin-left: -100%;position: relative;left: -40px;}.right {background-color: yellow;width: 40px;float: left;height: 100%;margin-left: -40px;position: relative;right: -40px;}</style></head><body><div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div></body></html>
负边距对绝对定位的影响：绝对定位的元素如何居中对齐的解决方案的原理；
margin / padding 百分比是什么的值？
padding/margin取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的
border 百分比是什么的值？
border 的值不支持百分比；
background-color 的覆盖范围
到 border的地方，包含content 和 padding;
今日头条一面面试题：用css 画一个正方形：
1. 使用vw ,vh 的单位；
2. 使用padding-bottom 的百分比是元素的宽度，同时设置height : 0 防止元素被撑开；
3. 使用父盒子的伪元素，margin-top为100% 来撑开，但是伪元素会和父元素margin 重叠，所以在父盒子上面触发 BFC 就可以了；
.test {width: 200px;background-color: red;overflow:hidden; // 触发 BFC}.test::after {margin-top: 100%; //通过儿子的margin-top 来撑开父亲的高度，利用了margin百分比是父元素宽度content: ''; // 伪元素的content 还是不能少display: block;}
vertical-align在什么情况下会起作用？
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平），其身上的vertical-align属性才会起作用，比如说：图片，按钮，单复选框，单行/多行文本框
vertical-align 和 line-height 有基友的关系，vertical的百分比就是 基于 line-height的:
{line-height: 30px;vertical-align: -10%;}
{line-height: 30px;vertical-align: -3px; /* = 30px * -10% */}
对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」
line-height 的作用：
有一个空的div，<div></div>，如果没有设置至少大于1像素高度height值时，该div的高度就是个0。如果该div里面打入了一个空格或是文字，则此div就会有一个高度。那么您思考过没有，为什么div里面有文字后就会有高度呢？ 不是文字撑开了div的高度，而是line-height
首先，行内元素一行就会有一个行框，里面有上，下边距，加上文本高度；在文本高度里面，有顶，中，基，底四个线。而基线之间的距离就是line-height的高度。
如果一段文本的高度为16px，如果给他设置line-height的高度为200，那么相当于，文本的上下间距的高度增加了，但是文本本身的高度依然是16是不变的，并且一直默认在行框中垂直居中，而上间距和下间距平分了200px的高度并且减去文本本身的高度。所以，容器被这一行文本占满，而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。
水平居中：
1. 行内元素，父元素 text-align : center
2. 块级元素有定宽，margin:0 auto;
2. 块级元素有定宽，margin:0 auto;
3. 块级元素绝对定位，transform : translate（-50%，0）；
4. 块级元素绝对定位，并且知道宽度， margin-left: - 宽度的一半
5. 块级元素绝对定位，left:0; right:0; margin:0 auto
垂直居中
1. 若元素是单行文本, 则可设置 line-height 等于父元素高度，原理见上面；
2. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央..parent::after, .son{ display:inline-block; vertical-align:middle; }
2. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央..parent::after, .son{ display:inline-block; vertical-align:middle; }
3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;
4. 绝对定位的块用 transform: translate(0, -50%)
5. 绝对定位，并且有定高， margin-top : -高度的一半 注意不要用 margin-bottom, 不会生效的
6. 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }