《响应式Web设计：HTML5和CSS3实战(第2版)》05章 - 学习笔记

响应式Web设计:HTML5和CSS3实战(第2版)

第五章 CSS3 新特性

5.1 CSS能实现什么要心里有数

5.2 CSS 规则

5.3 CSS 技巧

• CSS 响应式多列布局
  • 例子：column-width: 12em;
  • 固定列数，可变宽度：

    .main{
        column-count: 3;
    }

 + 添加列间距和分隔线

    .mian{
      column-gap: 2em;
      column-rule: thin dotted #999;
      column-width: 12em;
    }

• 如果每一列的文字长度太长，可能影响用户体验

5.4 断字

• 如果要将一行很长的文字放入一个比较窄的容器内
  • 在容器上加一个word-wrap: break-word;
  • 此时文字会在需要的地方拆开一个独立的单词，完成换行
• 截短文本

  .main{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

• 创建水平滚动面板
  • white-space: nowrap
    • 意思是在有空白的时候不折行
  • display: inline-block / inline-flex / inline-table
    • 将所有元素保持在一行
  • :after 和 :before
    • 为了能保证其能显示，必须包含一个content，就算为' '空白也行
• 隐藏滚动条

  .scroll-wrapper {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    // 在webkit设备上出现
    -webkit-overflow-scrolling: touch; 
    // 在支持的IE中删除滚动条
    -ms-overflow-style: none;
  }

  // 防止webkit浏览器出现滚动条
  .scroll-wrapper::-webkit-scrollbar{
    display: none;
  }

• 此时空间有限时，就会出现水平滚动面板，否则会自适应

5.5 在CSS中创建分支

1. 完全基于CSS
2. 借助js库，获得广泛兼容性

5.5.1 特性查询

• 涵盖不支持@support的设备，需要先写好默认的声明

  .item{
    display: inline-block;
  }
  @supports (display: flex;) {
    .item{
      display: inline-flex;
    }
  }

5.5.2 组合条件

• and 关键字 && or 关键字

  @supports ((display: flex;) and (pointer: coarse)) or (transform: translate3d(0, 0, 0)) {
    .item{
      display: inline-flex;
    }
  }

5.5.3 Modernizr

• 实现分支的最可靠方式
  • 在head中引入Modernizr.js
  • 检测特性后，会在html上加一些类

5.6 新CSS3选择符

5.6.1 属性选择符

• CSS2不支持

  /*选择包含alt属性的img元素*/
  img[alt]{
    // ...
  }

  /*选择包含‘data-sausage’的任何元素*/
  [data-sausage]{
    // ...
  }

  /*具体值属性*/
  img[alt="sausage"]{
    // ...
  }

5.6.2 CSS3子字符串匹配属性选择符

• 以。。。开头
  • ^=
  • 
  • img[alt^="film"]{}

• 包含。。。
  • *=

  • ...

  • p[data-xxx*="bb"]{}

• 以。。。结尾
  • $=

  • ...

  • p[data-xxx$="cc"]{}

5.6.3 属性选择符发注意事项

• 对属性选择符来说，属性是一个字符串
• 某两个子字符串存在为依据选择元素

      [data-xxx*="aa"][data-xx*="bb"]{
        ...
      } 

5.6.4 属性选择符选择以数值为开头的ID & class

• H5之前，以数字开头的ID & class是无效的
• H5之后允许了，但是ID中不能有空格
• 但css不允许使用以数值开头的选择符
• 用属性选择符可以绕开限制
  • [id="10"]{}

5.7 CSS3 结构化伪类

5.7.1 last-child

• CSS2.1中有匹配第一子项的伪类：div:first-child {}
• CSS3新添了匹配最后一个子项的伪类：div:last-child {}
• 还有专门针对只有一项的选择符 :only-child
  • p:only-child{...}
  • 将样式应用于只有一个p元素的父元素
  • Internet Explorer 不支持

5.7.2 nth-child

• 选择奇数个
  • :nth-child(odd) {}
• 选择偶数个
  • :nth-child(even) {}

5.7.3 理解nth

• CSS3 提供了一下几个基于nth的规则：
  • nth-child(n)
  • nth-last-child(n)
  • nth-of-type(n)
  • nth-last-of-type(n)
• 以上n有两种形式
  • 传入整数
    • nth-child(2) 会选择第二项
  • 传入表达式
    • nth-child(2n+3) 会从第3项开始，然后每2个选1个
    • nth-child(3n-2) 会从倒数第2项开始，然后每3个选1个
    • nth-child(-2n-3) 先找到第三个的位置，向反方向每2个选1个
• n默认是1
• 区分标记类型的选择符
  • nth-of-type(n)
  • nth-last-of-type(n)
• .nav:nth-of-type(-2n+3) {...}
  • 先找到类名为nav的元素集合的第三个位置，看tag为哪种，然后选择目标就都是这种tag，反方向每2个选1个
• CSS中的索引不是从0开始，而是从1开始

5.7.4 nth与响应式开发的关联

• 基于nth的伪类选择符可以链式使用
  • .nav:nth-child(4n+1):nth-last-child(-n+4) {} 每4个选1个, 但仅限于最后4项

5.7.5 :not

• :not 为取反的选择符，即“非。。。”
  • div:not(.list) {} 给所有不是list类的div添加样式

5.7.6 :empty

• 如果有一个元素只添加了内边距，但会在将来某个时刻动态插入或隐藏
• 可以用:empty来控制这个元素如果内容为空时，改变一些样式
  • div .thing:empty { display: none;}
• 注意事项
  • 空格不算空
  • 注释会算空

5.7.8 :first-line

• 这个伪类选择的第一行内容会根据视口大小不同而不同
  • p::first-line{color: red;}

5.8 CSS自定义属性和变量

• :root伪类可以把自定义的属性保存在文档根元素上，调用的时候用var
  • 首先：
    • :root{ --FontSize: 16px; }
  • 然后调用
    • .main{ font-size: var(FontSize);}

5.9 计算属性 calc

• .thing{ width: calc(50% - 10px); }
• 加减乘除都没问题
• 除了安卓4.3及以下版本中的chrome，其他浏览器都支持

5.10 Web 排版

5.10.1 @font-face

• 一种字体为了兼容多个浏览器，会有多个格式的版本
• @font-face是为了应用在线字体显示文本

5.10.2 运用

• 浏览器依次尝试属性列表中的样式，忽略不能识别的内容
  • 属性值越靠下，优先级越高

5.10.3 缺点

• 使用@font-face后 ，文件大小是个问题
• 字体大小会影响网站性能

5.12 CSS3 中的透明度新特性 （略）