炒冷饭13

• 说一说你平时写代码遵守的编码规范
  命名规范
  1.所有命名都使用英文小写
  推荐：

  
  2.命名用引号包裹
  推荐：
  
  3.用中横线连接
  推荐：
  
  4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
  推荐：
  
  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类型中的长子的元素

我是大标题1

我是段落2

我是大标题3

5bd6121f-bff0-423d-983e-2779e83ee226.png

:before :after
•element:before 在element内部创建一个行内元素，作为element的第一个孩子
•element:after 在element内部创建一个行内元素，作为element的最后一个个孩子
•用:before :after 的目的是为了省标签
•其中content 是必不可少

应用清楚浮动

.clearfix:after {
content:"";
display:block;
clear:both;
}