1、說一說你平時寫代碼遵守的編碼規范
我平時一般遵守如下規范:
1、所有命名都使用英文小寫
2、命名用引號包裹
3、每條聲明后都加上分號
4、換行,而不是放到一行
5、顏色用小寫,用縮寫, #fff
6、0不用加單位
7、盡量縮寫
2、垂直居中有幾種實現方式,給出代碼范例
有三種方法:
1、絕對定位:
在塊元素上添加絕對定位屬性和負margin,如果不是塊元素可以轉換成inline-block。記得在父元素上添加相對定位屬性-如果你不是想在整個html視口垂直居中的話。這種方法比較麻煩,適用于登錄彈窗等情況。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vertical align</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
position:relative;
}
a{
display:inline-block;
position:absolute;
left:50%;
top:50%;
width:100px;
height:30px;
margin: -15px 0 0 -50px;
}
</style>
<body>
<div class="box">
<a href="">我是文字</a>
</div>
</body>
</html>
比如優酷網的這個登錄窗,其它區域還有一個透明蒙板效果。
Paste_Image.png
2、使用vertical-align:middle;
使用vertical-align:middle;有兩種情況:
一是在父元素上配合table-cell使用,父元素內的所有元素都會整體垂直居中,無論子元素是block元素,還是inline元素。同時配合 text-align: center;inline和inline-block元素還可實現水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box div{
/* display:inline-block; */
width:250px;
height:40px;
border:1px solid ;
line-height:40px;
}
</style>
<body>
<div class="box">
<!--  -->
<div>我是塊元素我不受text-align控制</div>
<a href="">我是行內元素</a>
</div>
</body>
</html>
第二種情況是,子元素之間的垂直居中對齊。
如果只有一個對象,想讓它在父元素中對齊,可以添加一個空的比較對象
father:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
如果有多個對象,可以給它們都添加vertical-align:middle,從而實現子元素之間的垂直對齊。
另外:給一行內文字設置行高與父元素高相等,可以實現一行文字的垂直居中。