平時(shí)寫代碼遵守的編碼規(guī)范公罕。
-
HTML編碼規(guī)范
用兩個(gè)空格表示縮進(jìn)。
嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）耀销。
對于屬性的定義楼眷，確保全部使用雙引號，絕不要使用單引號熊尉。
不要省略結(jié)束標(biāo)簽罐柳。
引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性， 因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值狰住。
編寫 HTML 代碼時(shí)张吉，盡量避免多余的父元素。
HTML 屬性應(yīng)當(dāng)先寫class和id催植。
布爾型屬性可以在聲明時(shí)不賦值肮蛹。
通過 JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯创南，并且降低性能伦忠。能避免時(shí)盡量避免。 -
CSS編碼規(guī)范
每個(gè)聲明塊的左花括號前添加一個(gè)空格稿辙。
聲明塊的右花括號應(yīng)當(dāng)單獨(dú)成行昆码。
每條聲明語句的 : 后應(yīng)該插入一個(gè)空格。
每條聲明都應(yīng)該獨(dú)占一行邓深。
所有聲明語句都應(yīng)當(dāng)以分號結(jié)尾未桥。
對于以逗號分隔的屬性值笔刹，每個(gè)逗號后面都應(yīng)該插入一個(gè)空格芥备。
對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0舌菜。
十六進(jìn)制值應(yīng)該全部小寫萌壳，例如，#fff日月。
盡量使用簡寫形式的十六進(jìn)制值袱瓮，例如，用 #fff 代替 #ffffff爱咬。
為選擇器中的屬性添加雙引號尺借，例如，input[type="text"]精拟。
避免為 0 值指定單位燎斩，例如虱歪，用 margin: 0; 代替 margin: 0px;。
相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組栅表，并按照下面的順序排列：1.定位相關(guān) 2.盒模型相關(guān) 3.文字屬性相關(guān) 4.外觀相關(guān) 5.不要使用 @import：與 標(biāo)簽相比笋鄙，@import 指令要慢很多，不光增加了額外的請求次數(shù)怪瓶，還會(huì)導(dǎo)致不可預(yù)料的問題萧落。將媒體查詢放在盡可能相關(guān)規(guī)則的附近。當(dāng)使用特定廠商的帶有前綴的屬性時(shí)洗贰，通過縮進(jìn)的方式找岖，讓每個(gè)屬性的值在垂直方向?qū)R，這樣便于多行編輯敛滋。對于只包含一條聲明的樣式宣增，為了易讀性和便于快速編輯，建議將語句放在同一行矛缨。class 名稱中只能出現(xiàn)小寫字符和破折號.
class命名避免過度任意的簡寫爹脾。 .btn 代表 button，但是 .s 不能表達(dá)任何意思箕昭。
class名稱應(yīng)當(dāng)盡可能短灵妨，并且意義明確。
class命名要使用有意義的名稱落竹。如：表示功能泌霍，表示內(nèi)容；不要使用表示外觀的名稱述召。
Bootcss代碼編寫規(guī)范參考鏈接
Google HTML CSS編碼規(guī)范參考鏈接
垂直居中的實(shí)現(xiàn)方式朱转，代碼范例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本內(nèi)容垂直居中的實(shí)現(xiàn)方式</title>
<style>
.content {
margin: 0 auto;
width: 960px;
border: 1px solid #f00;
text-align: center;
line-height: 6em; /*通過設(shè)置line-height积暖，使文本內(nèi)容絕對居中藤为。*/
}
</style>
</head>
<body>
<div class="content">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本內(nèi)容垂直居中的實(shí)現(xiàn)方式</title>
<style>
.content {
margin: 0 auto;
width: 960px;
border: 1px solid #f00;
text-align: center;
}
.content>p {
margin-top: 3em; /*通過設(shè)置margin，使文本內(nèi)容絕對居中夺刑。*/
margin-bottom: 3em;
}
</style>
</head>
<body>
<div class="content">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本內(nèi)容垂直居中的實(shí)現(xiàn)方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
margin: 0 auto;
width: 960px;
border: 1px solid #f00;
text-align: center;
}
.content>p {
padding-top: 3em; /*通過設(shè)置padding缅疟，使文本內(nèi)容垂直居中。*/
padding-bottom: 3em;
}
</style>
</head>
<body>
<div class="content">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位實(shí)現(xiàn)居中</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 600px;
}
.content {
width: 800px;
border: 1px solid #f00;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -118px;
}
.content>p {
padding-top: 3em; /*通過設(shè)置padding遍愿，使文本內(nèi)容垂直居中存淫。*/
padding-bottom: 3em;
}
</style>
</head>
<body>
<div class="content">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block vertical align: middle實(shí)現(xiàn)垂直絕對居中</title>
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #f00;
text-align: center;
}
.content>p {
display: inline-block;
}
.content::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content::after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<p>This is a paragraph</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:table-cell 實(shí)現(xiàn)絕對居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 200px;
border: 1px solid black;
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="small-box">content</div>
</div>
</body>
</html>
提示框Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提示框Demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.tip {
margin: 16px;
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: relative;
}
.tip1::before {
content: " ";
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.tip2::before {
content: " ";
border-top: 10px solid #f00;
border-left: 10px solid transparent;
border-right: 10px solid #f00;
border-bottom: 10px solid transparent;
float: right;
}
.tip3::before {
content: " ";
height: 10px;
width: 10px;
background-color: white;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
position: absolute;
top: -6px;
left: 10px;
}
</style>
</head>
<body>
<div class="tip tip1"></div>
<div class="tip tip2"></div>
<div class="tip tip3"></div>
</body>
</html>
