前端QA(二)- CSS

CSS相关QA整理

选择器的优先级,伪类选择器的优先级

  1. 单个选择器优先级排序
    • id
    • 标签
    • 相邻 “=”
    • 子 “<”
    • 后代 “ “
    • 通配符 “*“
    • 属性 “a[rel=”external”]”
    • 伪类 “a:hover”
  2. 0000四位计算

伪类和伪元素

  • 伪类 - 为已存在的元素的特定内容添加样式,前缀一般为”:”
    1
    2
    3
    4
    <ul>
    <li>first</li>
    <li>second</li>
    </ul>
1
2
3
ul:first-child{
color: red;
}
  • 伪元素 - 添加不存在与DOM树中的内容,前缀一般为”::”
    1
    <h1>World</h1>
1
2
3
h1::before{
content: "Hello"
}

em和rem的区别

http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

  • em - 像素值将是em值乘以使用em单位的元素的字体大小
  • rem - 像素大小取决于页根元素的字体大小,即 html 元素的字体大小

移动端适配

  • rem+媒体查询

    1. 设置媒体查询,放在css文件总

      1
      2
      3
      4
      5
      @media screen and (width:320px){
      html{
      font-size:320/20px;
      }
      }
    2. 单位使用rem

  • meta设置

http://www.jianshu.com/p/010755d5dd94

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head lang="en">
<meta charset="UTF-8">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 添加到主屏后的标题(iOS 6 新增) -->
<meta name="apple-mobile-web-app-title" content="">
<!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!--下面三个是清除缓存 微信浏览器缓存严重又无刷新;这个方法调试的时候很方便-->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>document title</title>
</head>

display属性

  • inline
  • block
  • inline-block
  • flex

响应式布局的方法

  • meta头
  • 媒体查询
  • 多种视图宽度
  • 字体设置
  • 宽度百分比与图片处理

CSS3动画、JS动画、Canvas

  • animation-duration

transition和animation的区别,是否可暂停

  • transition css属性值变化时的过渡效果
  • animation 关键帧动画,与@keyframe结合使用
    暂停:
  1. transition无自带的暂停样式
  2. animation有animation-play-state样式
    1
    2
    3
    4
    .pauseWalk {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    }

margin和translate的百分比根据什么计算

  • margin的百分比根据父元素的width值
  • translate的百分比根据自身的宽高

width:200px的无高度div,设置padding-top:60%高度是多少

  • 相对自身的width,则为120px
文章目录
  1. 1. 选择器的优先级,伪类选择器的优先级
  2. 2. 伪类和伪元素
  3. 3. em和rem的区别
  4. 4. 移动端适配
  5. 5. display属性
  6. 6. 响应式布局的方法
  7. 7. CSS3动画、JS动画、Canvas
  8. 8. transition和animation的区别,是否可暂停
  9. 9. margin和translate的百分比根据什么计算
  10. 10. width:200px的无高度div,设置padding-top:60%高度是多少
|