1.說(shuō)一說(shuō)你平時(shí)寫(xiě)代碼遵守的編碼規(guī)范
-
命名技巧
- 語(yǔ)義化標(biāo)簽優(yōu)先
- 基于功能命名懊缺、基于內(nèi)容命名、基于表現(xiàn)命名
- 簡(jiǎn)略鸵隧、明了、無(wú)后患
-
書(shū)寫(xiě)規(guī)范
- tab 用兩個(gè)空格表示
- css的 :后加個(gè)空格意推， {前加個(gè)空格
- 每條聲明后都加上分號(hào)
- 換行豆瘫，而不是放到一行
- 顏色用小寫(xiě)，用縮寫(xiě), #fff
- 小數(shù)不用寫(xiě)前綴, 0.5s -> .5s菊值；0不用加單位
- 盡量縮寫(xiě)外驱， margin: 5px 10px 5px 10px -> margin: 5px 10px
2.垂直居中有幾種實(shí)現(xiàn)方式，給出代碼范例
- 設(shè)置父元素上下padding相等 代碼鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box{
width: 700px;
border: 1px solid;
background-color: white;
padding-top: 20px;
padding-bottom: 20px;
}
.box1 {
width: 300px;
height: 300px;
border: 1px solid;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
效果圖
image.png
- 絕對(duì)定位 代碼鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 600px;
height: 800px;
border: 1px solid;
position: absolute;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
效果圖
image.png
- vertical-align: middle 代碼鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
border: 1px solid;
}
.box1 {
width: 100px;
height: 300px;
border: 1px solid;
background-color: red;
display: inline-block;
vertical-align: middle;
}
.box2 {
width: 10px;
height: 30px;
border: 1px solid;
background-color: green;
display: inline-block;
vertical-align: middle;
}</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果圖
image.png
- display: table-cell 代碼鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
border: 1px solid;
width: 200px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box1 {
width: 100px;
height: 200px;
border: 1px solid;
background-color: red;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果圖
image.png
3.實(shí)現(xiàn)如下效果腻窒，每種效果都只使用一個(gè)html 標(biāo)簽來(lái)實(shí)現(xiàn) 效果范果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid;
}
.box:before {
content: "";
display: inline-block;
width: 0px;
height:0px;
border: 10px solid transparent;
border-bottom: 10px solid gray;
position: relative;
left: 10px;
top: -20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid;
}
.box:before {
content: "";
display: inline-block;
width: 0px;
height:0px;
border: 10px solid transparent;
border-top: 10px solid red;
border-right: 10px solid red;
float: right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid;
}
.box:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-top: 1px solid;
border-left: 1px solid;
transform: rotateZ(45deg);
position: relative;
top: -12px;
left: 10px;
background-color: white;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
