CSS综合

编码规范

• 命名技巧

  • 语义化

    1. 语义化标签优先
    2. 基于功能命名、基于内容命名、基于表现命名
    3. 简略、明了、无后患

  • 命名范例

    1. 所有命名都使用英文小写
    2. 命名用引号包裹
    3. 用中横线链接
    4. 命名体现功能，不涉及表现样式（颜色、字体、边框、背景等）

    命名	场景
    .wrap 或 .wrapper	用于外侧包裹
    .container 或 .ct	包裹容器
    .header	用于头部
    .body	页面body
    .footer	页面尾部
    aside、sidebar	用于侧边栏
    .content	和header、footer 对应，用于主要内容
    .navigation	导航元素
    .pagination	分页
    .tab > .tab	tab切换
    .breadcrumbs	导航列表、面包屑
    .article	文章
    .main	用于主体
    .thumbnail	头像，小图像
    .media	媒体资源
    .panel	面板
    .tooltip	鼠标放置上去的提示
    .popup	鼠标点击弹出的提示
    .button、.btn	按钮
    .ad	广告
    .subnav	二级导航
    .menu	菜单
    .tag	标签
    .message 或 .notice	提示消息
    .summary	摘要
    .logo	logo
    .search	搜索框
    .login	登录
    .register	注册
    .username	用户名
    .password	密码
    .banner	广告条
    .copyright	版权
    .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;

实现垂直居中的多种方法

1. table自带功能

     <table>
       <tr>
         <td>
           我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中我能实现垂直居中
         </td>
       </tr>
     </table>
   

2. 100%高度的 after before 加上 inline-block
3. div模拟table
4. margin-top: -50%;
5. translate -50%
6. absolute margin auto
7. flex