平时写代码遵守的编码规范。
-
HTML编码规范
用两个空格表示缩进。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要省略结束标签。
引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性， 因为 text/css 和 text/javascript 分别是它们的默认值。
编写 HTML 代码时，尽量避免多余的父元素。
HTML 属性应当先写class和id。
布尔型属性可以在声明时不赋值。
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。 -
CSS编码规范
每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
每条声明都应该独占一行。
所有声明语句都应当以分号结尾。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格。
对于属性值或颜色参数，省略小于 1 的小数前面的 0。
十六进制值应该全部小写，例如，#fff。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
相关的属性声明应当归为一组，并按照下面的顺序排列：1.定位相关 2.盒模型相关 3.文字属性相关 4.外观相关 5.不要使用 @import：与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。将媒体查询放在尽可能相关规则的附近。当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。class 名称中只能出现小写字符和破折号.
class命名避免过度任意的简写。 .btn 代表 button，但是 .s 不能表达任何意思。
class名称应当尽可能短，并且意义明确。
class命名要使用有意义的名称。如：表示功能，表示内容；不要使用表示外观的名称。
Bootcss代码编写规范参考链接
Google HTML CSS编码规范参考链接
垂直居中的实现方式，代码范例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本内容垂直居中的实现方式</title>
<style>
.content {
margin: 0 auto;
width: 960px;
border: 1px solid #f00;
text-align: center;
line-height: 6em; /*通过设置line-height，使文本内容绝对居中。*/
}
</style>
</head>
<body>
<div class="content">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
line-height垂直居中.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本内容垂直居中的实现方式</title>
<style>
.content {
margin: 0 auto;
width: 960px;
border: 1px solid #f00;
text-align: center;
}
.content>p {
margin-top: 3em; /*通过设置margin，使文本内容绝对居中。*/
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>
margin居中.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本内容垂直居中的实现方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
margin: 0 auto;
width: 960px;
border: 1px solid #f00;
text-align: center;
}
.content>p {
padding-top: 3em; /*通过设置padding，使文本内容垂直居中。*/
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>
padding居中.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实现居中</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; /*通过设置padding，使文本内容垂直居中。*/
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>
绝对定位垂直居中.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block vertical align: middle实现垂直绝对居中</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>
inline-block vertical align middle实现绝对居中.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:table-cell 实现绝对居中</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>
display table-cell实现绝对居中.png
提示框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>
提示框Demo.png
网友评论