寫代碼遵守的編碼規(guī)范
1葱色、所有命名都使用英文小寫
2坚芜、命名用引號(hào)包裹
3、每條聲明后都加上分號(hào)
4、換行英融,而不是放到一行
5、顏色用小寫光稼,用縮寫, #fff
6坤次、0不用加單位
7、盡量縮寫
參考:鏈接
垂直居中
- 利用padding垂直居中
<body>
<div class="ct">
<p>我是塊級(jí)元素喲</p>
<p>我是塊級(jí)元素喲</p>
</div>
</body>
<style>
.ct {
width: 400px;
background-color: #eee;
text-align:center;
/* 上下padding值相等實(shí)現(xiàn)垂直居中 */
padding:40px 0;
}
</style>
- 利用定位居中
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
- vertical-align:middle居中
<style>
.box {
width: 400px;
height: 300px;
border:1px solid red;
text-align:center;
}
.box:before {
content:'';
display:inline-block;
height: 100%;
vertical-align:middle;
}
.box img {
vertical-align:middle;
background-color: #fff;
}
</style>
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 500px;
background-color: #fff;
display:table-cell;
height: 300px;
vertical-align:middle;
text-align:center;
}
</style>
<div class="box">
<span>我是span</span>
圖片
</div>