我写代码时所遵守的代码规范
- HTML
- 标签有始有终（闭合）
- 尽量遵循语义化，不滥用div
- 命名尽量通过功能命名，使用较为准确的单词（模仿他人较好的命名）
- 属性加引号
- 一块内容写一行，有嵌套的时候外层头尾各一行
- 用空格缩进
- CSS
- " { " 前边有空格， " } "单独占一行
- " : "后面空一格
- 一个声明单独占一行
- 依照HTML里标签的顺序写CSS
- 用空格缩进
- 每个声明结尾都有 " ; "
- class的命名功能化、准确化
垂直居中
.layout {
width: 700px;
background-color: #52e5e7;
text-align: center;
padding: 20px;/* 居中Demo */
color: #fff;
}
.layout>p {
font-size: 30px;
font-weight: bold;
font-family: helvetica;
}
2. Vertical-align + Inline-block
main {
/* width:100px; */
display: inline-block;/* 居中Demo */
vertical-align: middle;/* 居中Demo */
}
/* 垂直demo */
.wrapper::before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
/* 垂直demo */
.layout>.h-card {
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.3);
}
.h-card>.panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
color: #fff;
border: 5px solid;
border-radius: 5px;
box-shadow: 5px 8px 5px rgba(0,0,0,.3), 8px 10px 15px rgba(0,0,0,.2);
}
.layout {
background-color: #2196f3;
height: 400px;
width: 400px;
margin: 0 auto;
display: flex;
align-items: center;/* 居中demo */
}
.wrap>h1 {
line-height: 200px;/* 居中demo */
}
6. Table-cell + Vertical-align垂直居中
.wrap {
background-color: #2196f3;
height: 300px;
width: 300px;
display: table-cell;/* 居中Demo */
vertical-align: middle;/* 居中Demo */
}
代码
JSBin
注：旋转demo
transform: rotate( __deg)
