说一说你平时写代码遵守的编码规范
命名规范
1.所有命名都使用英文小写
推荐：<div class="main"></div>
2.命名用引号包裹
推荐：<div id="header"></div>
3.用中横线连接
推荐：<div class="mod-modal"></div>
4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
推荐：<div class="text-lesser"></div>
CSS规范
1.tab 用两个空格表示
2.css的 :后加个空格， {前加个空格
3.每条声明后都加上分号
4.换行，而不是放到一行
5.颜色用小写，用缩写, #fff
6.小数不用写前缀, 0.5s -> .5s；0不用加单位
7.尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px垂直居中有几种实现方式，给出代码范例
1.上下加padding实现垂直居中
.ct{
padding: 40px 0;
text-align: center;
background: #eee;
}
2.绝对定位实现垂直居中
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
}
如果碰到宽度高度不固定的情况用以下
.dialog {
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
width: 400px;
height: 300px;
3.vertical-align实现居中
只能用在行内元素与表格元素中
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
4.table-cell实现居中
改变成表格方式
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
- 伪类元素
link visited hover active 顺序
a:link{
color: blue;
}
a:visited{
color: yellow;
}
a:hover{
color: red;
}
a:active{
color: pink;
}
first-child vs first-of-type
•h1:first-child: 选择是h1并且它是长子的元素
•h1:first-of-type: 选择是h1并且它是它父亲里h1类型中的长子的元素
<!DOCTYPE html>
<html>
<head>
<style>
.wrap h1:first-of-type{
background: yellow;
}
.wrap p:first-of-type{
background: pink;
}
.wrap h1:first-child{
color: red;
}
.wrap p:first-child{
color: blue;
} </style>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<h1>我是大标题1</h1>
<p>我是段落2</p>
<h1>我是大标题3</h1>
</div>
</body>
</html>
:before :after
•element:before 在element内部创建一个行内元素，作为element的第一个孩子
•element:after 在element内部创建一个行内元素，作为element的最后一个个孩子
•用:before :after 的目的是为了省标签
•其中content 是必不可少
应用清楚浮动
.clearfix:after {
content:"";
display:block;
clear:both;
}
