- 說一說你平時寫代碼遵守的編碼規(guī)范
- 語義化標(biāo)簽優(yōu)先
- 基于功能命名章鲤，基于內(nèi)容命名象缀，基于表現(xiàn)命名
- 所有命名都使用英文小寫
- 命名用引號包裹
- 用中橫線連接
- 每條聲明后都加上分號
- 顏色用小寫刚照，用縮寫, #fff
- 為選擇器分組時苫昌，將單獨的選擇器單獨放在一行
- 垂直居中有幾種實現(xiàn)方式，給出代碼范例
- 設(shè)置上下padding使內(nèi)容居中,根據(jù)內(nèi)容自適應(yīng)
.ct{
padding:40px 0;
text-align:center;
background:#eee
}
<div class="ct">
<p>hello world</p>
<p>hello world</p>
</div>
- 絕對定位
.dialog{
position:absolute;
left:50%;
top:50%;
margin-left:200px;
margin-top:-150px;
width:400px;
height:300px;
box-shdow: 0px 0px 3px #000
}
.header{
padding:10px;
background:#000;
color:#fff;
}
.content{
padding:10px;
}
<div class="dialog">
<div class="header">我是標(biāo)題</div>
<div class="content">我是內(nèi)容</div>
<div>
-使用vertical-align實現(xiàn)居中
.box{
width: 300px;
height: 300px;
border: 1px solid black;
text-align: center;
}
.middle:before{
content:" ";
display: inline-block;
height: 100%;
vertical-align:middle;
}
img{
background-color: skyblue;
vertical-align:middle;
}
<div class="box middle">
</div>
- 使用table-call實現(xiàn)居中
.box{
width: 300px;
height: 300px;
border: 1px solid black;
display:table-cell;
verlical-align:middle;
text-align: center;
}
<div class="box">
</div>
- 實現(xiàn)如下效果贷屎，每種效果都只使用一個html 標(biāo)簽來實現(xiàn)
http://js.jirengu.com/juqofoqavu/6/edit?html,output
