CSS编码规范

1. 说一说平时写代码遵守的编码规范

• 首先，命名技巧

选用语义化的标签
基于功能命名、基于内容命名、基于表现来命名
总而言之就是：简略、明了、无后患

• 常见命名规范

1 所有命名都使用英文小写：<div class="main"></div>
2 命名用引号包裹： <div id="header"></div>
3 用中横线连接：<div class="mod-modal"></div>
4 命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)：<div class="text-lesser"></div>
5 .wrap或.wrapper ：用于外侧包裹
6 .container或 .ct ：包裹容器
7 .header -- 用于头部
8 .body -- 页面 body
9 .footer -- 页面尾部
10 aside、sidebar -- 用于侧边栏
11 .content -- 和header footer 对应，用于主要内容
12 .navigation -- 导航元素
13 .pagination -- 分页
14 .tabs > .tab -- tab 切换
15 .tabs > .tab -- tab 切换
16 .breadcrumbs -- 导航列表、面包屑
15 .dropdown -- 下拉菜单
16 .article -- 文章
17 .main -- 用于主体
18 .thumbnail -- 头像，小图像
19 .media -- 媒体资源
20 .panel -- 面板
21 .tooltip -- 鼠标放置上去的提示
22 .popup -- 鼠标点击弹出的提示
24 .button、.btn -- 按钮
25 .ad -- 广告
26 .subnav -- 二级导航
27 .menu -- 菜单
28 .tag -- 标签
29 .message或者.notice -- 提示消息
30 .summary -- 摘要
31 .logo -- logo
32 .search -- 搜索框
33 .login -- 登录
34 .register -- 注册
35 .username -- 用户名
36 .password -- 密码
37 .banner -- 广告条
38 .copyright -- 版权
39 .modal或者 .dialog -- 弹窗

• CSS 书写规范

1. tab 用两个空格表示
2. css的 :后加个空格， {前加个空格
3. 每条声明后都加上分号
4. 换行，而不是放到一行
5. 颜色用小写，用缩写, #fff
6. 小数不用写前缀, 0.5s -> .5s；0不用加单位
7. 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

• 参考
  google html css编码规范
  bootstrap 编码规范
  命名这货真难

2. 垂直居中有几种实现方式? 给出代码范例

• 用padding垂直居中
  代码范例
• 绝对定位实现居中
  代码范例
• vertical-align实现居中
  代码范例
• table-cell实现居中
  代码范例

3. 实现如下效果，每种效果都只使用一个html 标签来实现

对话框效果

代码范例