編碼規(guī)范
- 使用無 <code>bom</code> 的 <code>UTF-8</code>的編碼格式
- 首行縮進四個空格
- 選擇器與<code>{</code> 之間必須有空格，屬性值以<code
- 屬性名與 <code>:</code> 之間不允許包含空格瘾腰；<code>:</code>與屬性值之間必須包含空格
- 多個選擇器一起設(shè)置屬性時皆的，一個選擇器占據(jù)一行
- 不使用 !important
- 個人使用可以參考國內(nèi)大公司的編碼規(guī)范，共同之處就是重要的蹋盆，一定要遵守的硝全。工作的話就要跟隨公司團隊風(fēng)格咯伟众。
垂直居中
-
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>
