CSS综合

• 说一说你平时写代码遵守的编码规范
  常见的编码规范
  语义化：
  1.语义化标签优先
  2.基于功能命名、基于内容命名、基于表现命名
  3.简略、明了、无后患
  命名规范：
  1.所有命名都使用英文小写
  2.命名用引号包裹
  3.用中横线“-”连接
  4.命名体现功能，不涉及表现样式（颜色、字体、边框、背景等）
  书写规范：
  1.tab 用两个空格表示
  2.css的 :后加个空格， {前加个空格
  3.每条声明后都加上分号
  4.换行，而不是放到一行
  5.颜色用小写，用缩写, #fff
  6.小数不用写前缀, 0.5s -> .5s；0不用加单位
  7.尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
  8.定义相同css属性的选择器逗号隔开，纵向排列
  9.每每相邻选择器之间空一行
  10.HTML 属性应当按照以下给出的顺序（class>id,name>data->src,for,type,href,value>title,alt>role,aria-）依次排列，确保代码的易读性。
  11.相关的属性声明应当归为一组，并按照下面的顺序排列：
  positioning: position top right bottom left z-index
  box model: display float width height
  typographic: font line-height color txet-align
  visual: background-color border border-radius
  misc: opacity
  12.不要使用@import
  13.不要滥用简写，例如background-color：red中color不要简写
  我遵守的编码规范
  语义化
  1.所有命名都使用英文小写
  2.用中横线“-”连接
  3.命名体现功能，不涉及表现样式（颜色、字体、边框、背景等）
  书写规范
  1.tab 用两个空格表示
  2.css的 :后加个空格， {前加个空格
  3.每条声明后都加上分号
  4.换行，而不是放到一行
  5.颜色用小写，用缩写, #fff
  6.尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
  常见命名：

1 .wrap或.wrapper -- 用于外侧包裹
2 .container或 .ct -- 包裹容器
3 .header -- 用于头部
4 .body -- 页面 body
5 .footer -- 页面尾部
6 aside、sidebar -- 用于侧边栏
7 .content -- 和header footer 对应，用于主要内容
8 .navigation -- 导航元素
9 .pagination -- 分页
10 .tabs > .tab -- tab 切换
11 .breadcrumbs -- 导航列表、面包屑
12 .dropdown -- 下拉菜单
13 .article -- 文章
14 .main -- 用于主体
15 .thumbnail -- 头像，小图像
16 .media -- 媒体资源
17 .panel -- 面板
18 .tooltip -- 鼠标放置上去的提示
19 .popup -- 鼠标点击弹出的提示
20 .button、.btn -- 按钮
21 .ad -- 广告
22 .subnav -- 二级导航
23 .menu -- 菜单
24 .tag -- 标签
25 .message或者.notice -- 提示消息
26 .summary -- 摘要
27 .logo -- logo
28 .search -- 搜索框
29 .login -- 登录
30 .register -- 注册
31 .username -- 用户名
32 .password -- 密码
33 .banner -- 广告条
34 .copyright -- 版权
35 .modal或者 .dialog -- 弹窗

• 垂直居中有几种实现方式，给出代码范例
  块级元素的垂直居中
  行内元素的垂直居中
  用块级元素对行内元素包垂直居中
  用vertical-align设置元素的垂直对齐方式：链接
  用table-cell设置垂直居中
• 实现如下效果，每种效果都只使用一个html 标签来实现
  链接