雙飛翼布局，聖杯布局
主要是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; }