美文网首页
CSS 综合

CSS 综合

作者: Tuuu | 来源:发表于2017-12-07 21:34 被阅读0次

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

    推荐规范: http://codeguide.bootcss.com https://google.github.io/styleguide/htmlcssguide.html

    语义化:

    • 语义化标签优先

    • 基于功能命名、基于表现命名、基于内容命名

    • 简洁、明了,无后患

    范例:

    • 所有命名使用英文小写

    • 命名用引号包裹

    • 使用中横线 “-” 连接

    • 命名体现功能,不涉及表现样式(字体、颜色、边框、背景等)

    书写规范

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

    常见命名

    .container或 .ct -- 包裹容器
    .header -- 用于头部
    .body -- 页面 body
    .footer -- 页面尾部
    aside、sidebar -- 用于侧边栏
    .content -- 和header footer 对应,用于主要内容
    .navigation -- 导航元素
    .pagination -- 分页
    
    .tabs > .tab -- tab 切换
    .breadcrumbs -- 导航列表、面包屑
    .dropdown -- 下拉菜单
    .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 -- 弹窗
    

    var 名字 = {
    状态: [
    inverse,
    toggled,
    switched,
    original,
    initial,
    identified,
    disabled,
    loading,
    pending,
    syncing,
    default
    ],
    修饰: [
    dark,
    light,
    shaded,
    flat,
    ghost,
    maroon,
    pale,
    intense,
    twisted,
    narrow,
    wide,
    smooth,
    separate,
    clean,
    sharp,
    aligned
    ],
    元素: [
    pagination,
    modal,
    popup,
    article,
    story,
    flash,
    status,
    state,
    media,
    block,
    card,
    teaser,
    badge,
    label,
    sheet,
    poster,
    notice,
    record,
    entry,
    item,
    figure,
    square,
    module,
    bar,
    button,
    action,
    knob
    ],
    布局: [
    navigation,
    wrapper,
    inner,
    header,
    footer,
    aside,
    section,
    divider,
    content,
    container,
    panel,
    pane,
    construct,
    composition,
    spacing,
    frame
    ]
    }

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

    1. 父元素不定高,使用 padding + line-height 撑开即可
      代码范例:padding + line-height
    2. 父元素定高,使用<table><tr><td> 即可实现,兼容IE
      代码范例:<table><tr><td>
    3. 父元素定高,是第二种方法的变形,兼容IE
      代码范例:display: table
    4. 父元素定高,伪类方式实现,兼容IE
      代码范例:伪类方式
    5. 父元素定高,绝对定位方式实现,子元素需要确定宽度,如果水平居中则子元素的高度也需要确定,兼容IE
      代码范例:绝对定位方式1
    6. 父元素定高,绝对定位方式实现,子元素不需要确定宽高,不支持IE
      代码范例:绝对定位方式2
    7. 父元素定高,margin-auto法,子元素需要定宽定高
      代码范例:margin-auto法
    8. 父元素定高,flex 方式,不支持IE
      代码范例:flex方式

    3. 实现如下效果

    image.png
    代码范例

    相关文章

      网友评论

          本文标题:CSS 综合

          本文链接:https://www.haomeiwen.com/subject/oxmjixtx.html