說一說你平時寫代碼遵守的編碼規(guī)范
- 盡量使用有語義化的標簽，如
h1,header,main,footer - 在給CSS設置屬性的時候冒號后面空一格港粱，如
background: red;,在{前面空一格 - 如果CSS屬性的大小是0的時候螃成，省略單位，如
margin: 0 auto; - 給class命名時使用有意義的單詞查坪，如
container,left-aside;
垂直居中有幾種實現(xiàn)方式寸宏，給出代碼范例
1. 父元素設置上下padding相等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中1</title>
<style>
.container {
border: 1px solid;
padding: 40px 0;
}
.box {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="box">垂直居中的元素</div>
<div class="box">垂直居中的元素</div>
</div>
</body>
</html>
效果圖1
2. 絕對定位居中，設置定位為絕對定位偿曙，top氮凝，left設為50%，負margin設為寬度高度各一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中2</title>
<style>
.box {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
border: 1px solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果圖2
3. 給要居中的元素和父元素的before偽元素設置vertical-align為middle;display為inline-block并在偽元素上設置height為100%望忆，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中3</title>
<style>
.container {
height: 300px;
border: 1px solid;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box {
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid red;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="box">aaaa</div>
</div>
</body>
</html>
效果圖3
