说一说你平时写代码遵守的编码规范
- 缩进用两个空格
- 尽量使用小写
- 子元素缩进
- 语义化标签
- 命名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
