编码规范
- 使用无 <code>bom</code> 的 <code>UTF-8</code>的编码格式
- 首行缩进四个空格
- 选择器与<code>{</code> 之间必须有空格，属性值以<code
- 属性名与 <code>:</code> 之间不允许包含空格；<code>:</code>与属性值之间必须包含空格
- 多个选择器一起设置属性时，一个选择器占据一行
- 不使用 !important
- 个人使用可以参考国内大公司的编码规范，共同之处就是重要的，一定要遵守的。工作的话就要跟随公司团队风格咯。
垂直居中
-
flex：
.a{ display:flex; } .b{ margin: auto; } <div class="a"> <div class="b"></div> </div>
</code>
-
绝对定位：
position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); -
文本的水平垂直居中：
<div class=“title”> 我是 title </div> .title { line-height: 400px; text-align:center; height: 400px; } -
宽度高度不固定的：
<div class="container"> <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a> <div style="clear:both"></div></div> .container { width:500px; height:80px; margin-left:50px; padding- top:10px; text-align:center; } .center { display:inline-block; } .center a { float:left;border:1px solid #fff; padding:5px 10px; margin:10px; text-decoration:none; } -
模拟表格
.a { height: 300px; display: table; } .b { display:table-cell; vertical-align: middle; } <div class="a"> <div class="b">content</div> </div>
