說一說你平時寫代碼遵守的編碼規范
- 縮進用兩個空格
- 盡量使用小寫
- 子元素縮進
- 語義化標簽
- 命名class時不涉及表現樣式
- 加空格
垂直居中有幾種實現方式，給出代碼范例
- text-align:center;padding-top=padding-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
text-align:centern;
padding: 40px 0;
background-color: red; /*便于觀察*/
}
</style>
</head>
<body>
<div>
<h1>demo</h1>
< /div>
</body>
</html>
- 絕對定位+（負magin或translate）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
position: absolute;
top:50%;
left:50%;
/*負margin*/
margin-left: -150px;
margin-top: -100px;
/*負margin*/
transform: translate(-50%,-50%);
/*二選一*/
background-color:red;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div>
<h1>demo</h1>
</div>
</body>
</html>
- vartical-align:middle;只對塊級元素有效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 200px;
height: 100px;
background-color: red;
text-align:center;
}
div:before {
content: ''; /*添加一個元素*/
display: inline-block; /*使之有塊級元素的性質*/
height: 100%; /*高度為整個父容器*/
vertical-align: middle; /*添加對齊方式*/
}
span {
vertical-align: middle; /*與剛才添加的空元素在中部垂直對齊*/
}
</style>
</head>
<body>
<div>
<span>demo</span>
</div>
</body>
</html>
- table-cell+vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 200px;
height: 100px;
display: table-cell; /*像表格一樣渲染內部內容*/
vertical-align: middle; /*垂直居中*/
text-align: center; /*水平居中*/
}
</style>
</head>
<body>
<div>
<h1>demo</h1>
</div>
</body>
</html>
實現如下效果，每種效果都只使用一個html標簽來實現
32.png
