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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 说一说你平时写代码遵守的编码规范常见的编码规范语义化:1.语义化标签优先2.基于功能命名、基于内容命名、基于表现命...
    24_Magic阅读 238评论 0 0
  • CSS编码规范 命名规范:语义化标签优先;基于功能命名、基于内容命名、基于表现命名;简略、明了、无后患 书写规范:...
    饥人谷_哈噜噜阅读 322评论 0 0
  • 1.说一说你平时写代码遵守的编码规范 语义化·语义化标签优先·基于功能命名、基于内容命名、基于表现命名·简略、明了...
    FLYSASA阅读 246评论 0 0
  • 写代码需要遵守的编码规范 1. 命名技巧 语义化 语义化标签优先 基于功能命名、基于内容命名、基于表现命名 简略、...
    阿鲁提尔阅读 277评论 0 4
  • 编码规范 所有命名都使用英文小写 命名用引号包裹 用中横线连接 命名体现功能,不涉及表现样式(颜色、字体、边框、背...
    饥人谷_bigJiao阅读 223评论 0 0