說一說你平時寫代碼遵守的編碼規(guī)范
HTML
1.用兩個空格鍵代替tab鍵。
2.盡可能使用語義化的標簽四濒。
3.盡可能減少使用嵌套船侧，使結構簡潔明了欠气。
4.定義屬性全部用雙引號。
5.嵌套元素縮放兩個空格镜撩。
6.閉合標簽预柒。
7.把引入的css寫在頭部，公共的css放在最前面袁梗，便于后面覆蓋某些特定樣式宜鸯，js鏈接放在</body>前面。
CSS
1.聲明塊的右花括號單獨成行
2.: 后面加一個空格
3.每個屬性單獨一行。
4.每個屬性以分號結尾。
5.對于屬性值或顏色參數，省略小于 1 的小數前面的 0。
6豪直，顏色值使用十六進制形式，盡可能使用簡寫的十六進制值，比如#000闷游。
7.0值時不指定單位。
8.聲明的順序是先位置烙样，自身的屬性冯遂，如寬高，文字相關谒获，最后是其他蛤肌。
9.將媒體查詢放在盡可能相關規(guī)則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部批狱。
10.命名基于功能和內容命名裸准。
垂直居中有幾種實現方式，給出代碼范例
1.使用上下paddng相等赔硫，不管中間加幾行字都是居中的炒俱。
預覽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
margin: 0 auto;
padding: 30px 0;
width: 600px;
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<p>垂直居中</p>
<p>垂直居中</p>
<p>垂直居中</p>
<p>垂直居中</p>
</div>
</body>
</html>
2.絕對定位垂直居中，比如彈框爪膊，并且知道了彈框的寬高权悟。
預覽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tipbox-bg {
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.4);
}
.tipbox {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
background: #fff;
}
.tipbox h1 {
text-align: center;
background: #38B774;
color: #fff;
margin: 0;
}
</style>
</head>
<body>
<div class="tipbox-bg">
<div class="tipbox">
<h1>頭部</h1>
</div>
</div>
</body>
</html>
3.使用css3的transform中的translate的屬性，此方法有兼容性的問題推盛。
預覽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tipbox-bg {
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.4);
}
.tipbox {
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
width: 300px;
background: #fff;
}
.tipbox h1 {
text-align: center;
background: #38B774;
color: #fff;
margin: 0;
}
.content {
padding: 50px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="tipbox-bg">
<div class="tipbox">
<h1>頭部</h1>
<div class="content">
內容
</div>
</div>
</div>
</body>
</html>
4.vertical-align峦阁，針對行內元素和表格，文字的垂直居中耘成。
測試了一下榔昔，好像只有div內的所有inline-display元素都是middle才生效驹闰。
預覽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 500px;
margin: 0 auto;
height: 400px;
border: 1px solid;
text-align: center;
}
.box:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
5.使用display:table-cell
預覽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 500px;
height: 400px;
border: 1px solid;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
總結：第五種方法，把改變了塊級元素的展現方式撒会，所以box的margin：0 auto嘹朗；失效了，建議少使用茧彤。
