前端整理——css部分
（1）盒模型（普通盒模型、怪異盒模型）
1、元素的content（內容）、padding(內邊距)、border（邊框）、margin（外邊距）構成了CSS盒模型
2、IE盒模型和W3C盒模型
1）IE盒模型是怪異模式下的盒模型，W3C盒模型是標準模式下的盒模型；
2）IE盒模型的width/height包含了content的width/heigh+padding+border
W3C盒模型的width/height只是content的width/height
3、CSS3中的box-sizing
不同的人有不同的習慣，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（該屬性的值從父元素繼承）
（2）如何讓元素水平居中
1、絕對定位實現水平垂直居中：
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;注意：
1>對父元素要使用 position: relative; 對子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。
2>如果只要垂直居中，可以不寫right: 0；left: 0;
margin: auto; 可以換成 margin-top: auto; margin-bottom: auto;
3>如果只需要水平居中，top: 0; bottom: 0; 可以省略不寫
margin: auto; 可以換成 margin-rihgt: auto; margin-left: auto; 。
2、確定高度的塊級元素居中：
position：absolute;
top:50%;
margin-top:(自身高度的值的一半的負值)3、對不定高的div實現垂直居中
a、利用css3的彈性佈局實現
在父元素的css樣式中加入以下程式碼：
display：flex；
justify-center:center;
align-items：center；b、利用平移實現
在子元件中加入以下程式碼：
position：relative： left:50%； top:50%; transform:translate(-50%,-50%); -weikit-transform: translate(-50%,-50%);
4、一段文字、一張圖片水平居中
text-content:center;
圖片是行內元素，在 ie, edge, chrome, firefox, opera 中對於 img 的預設顯示方式是： display: inline;
5）塊級元素水平居中，使用margin：auto；
6）單行文字垂直居中 ，讓height和line-height相等
注意：當box-sizing:content-box時，line-height和height相等；
當box-sizing:border-box時，line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四個值，也就是說line-height等於content的有效高度。
（3）浮動&清浮動
1、是什麼浮動？
浮動的元素會脫離文件流並向左/向右浮動，直到碰到父元素或者另一個浮動元素。
2、為什麼要清浮動？
浮動會導致父元素的高度塌陷。當父元素不設定高度，由內容撐開時，浮動元素脫離了文件流，並不佔據文件流的位置，父元素就不能被撐開，也就沒有了高度。所以需要通過清浮動來解決父元素高度坍塌的問題。
3、清浮動的方式：
1）clear清除浮動
在浮動元素後面新增一個空的div，設定clear屬性為both。
clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，原理在被清除浮動的元素上面或者下面新增足夠的清除空間。
2）clear清除浮動的最佳實踐：利用偽類元素來清除有浮動的標籤
IE8和非ie瀏覽器才支援：after，相當於在該元素後面添加了一個空元素，利用clear：both清除浮動。zoom可解決ie6、ie7的浮動問題。
<div class="box clearfix">
<div class="red"></div>
<div class="green"></div>
</div>
<style>
.clearfix::after{ //向元素的內容之後新增新內容
display: block;
content:'';
clear:both;
visibility:hidden;
height:0
}
.clearfix{
zoom:1;
}
</style>3）父級div定義overflow：hidden
原理：必須要定義width或zoom：1，同時不能定義高，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
（4）聖盃佈局和雙飛翼佈局
聖盃佈局和雙飛翼佈局都是三欄佈局，兩邊的盒子寬度固定，中間盒子寬度自適應。
1)聖盃佈局
寫結構時優先寫中間盒子，因為中間盒子優先被渲染，設定其自適應，寬度設為100%。中間欄放在文件流前面以優先渲染。
注意：最好給body加一個最小寬度min-width
聖盃佈局有個問題，就是當面板的main部分比兩個子面板寬度小的時候，佈局就會亂掉。
<body>
<div id="header">header</div>
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
body{
min-width:550px;
}
#header{
background: black;
}
#footer{
background: black;
clear:both;
}
#center{
background: pink;
width:100%;
float:left;
}
#left{
background: greenyellow;
width:200px;
float:left;
margin-left: -100%;
position: relative;
left:-200px;
}
#right{
background: yellow;
width:150px;
float:left;
margin-left:-150px;
position: relative;
right:-150px;
}
#container{
padding-left:200px;
padding-right:150px;
}2）雙飛翼佈局
<body>
<div class="box">
<div class="main">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
<style>
*{margin:0;padding:0;}
body{
min-width:500px;
}
.main{
width:100%;
background: palevioletred;
float:left;
}
.left{
width:150px;
background: greenyellow;
float:left;
margin-left:-100%;
}
.right{
width:200px;
background: yellow;
float:left;
margin-left:-200px;
}
.center{
margin:0 200px 0 150px;
}
</style>https://www.zhihu.com/question/21504052/answer/50053054
聖盃佈局和雙飛翼佈局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文件流前面以優先渲染。
聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄佈局。
不同在於解決”中間欄div內容不被遮擋“問題的思路不一樣：
聖盃佈局，為了中間div內容不被遮擋，將中間div設定了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div。
雙飛翼佈局，為了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裡用margin-left和margin-right為左右兩欄div留出位置。
多了1個div，少用大致4個css屬性（聖盃佈局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼佈局子div裡用margin-left和margin-right共2個屬性，6-2=4），個人感覺比聖盃佈局思路更直接和簡潔一點。
簡單說起來就是”雙飛翼佈局比聖盃佈局多建立了一個div，但不用相對佈局了“。