精通CSS高级Web标准解决方案（第三版）读书笔记

标签

<abbr title='这是对缩写词的解释'>缩写词</abbr>
<aside></aside>定义article以外的内容，但是与article相关
<figure>定义与位置相关内容，但是位置相对独立，移除应不对原来造成影响，比如文本中的一个图片等

伪元素、伪类

伪元素
::first-letter第一个字符
::first-line第一行
伪类
:required选择带有required属性的表单元素，:optional选择不带required的表单元素
:valid验证有效时，:invalid验证无效时

属性

text-transform:uppercase转化为大写，capitalize首字母大写
font-variant: small-caps小型大写字母
word-spacing:0.1em词间距
letter-spacing字符间距
text-indent首段缩进

第一章 基础知识

• 希望根据浏览器支持情况提供不同样式可以使用@supports
• chrome和opera基于Blink引擎，Blink最初也是基于webkit开发的
• 类名应该尽量意味着是什么，尽量不要体现出视觉效果，例如large-center…
• 针对障碍人士可以为标签添加role属性标记角色，角色有navigation、banner、form、main、search、application等等
• HTML没有表示人名、活动、菜谱、博文、简历等等的信息，可以采用微格式或者微数据的形式提供信息

第二章 添加样式

CSS选择符

• a[href^='http']匹配href开始为http的a标签
• a[href$='/about/']匹配href属性值存在/about/的a标签
• a[href*='en']匹配href值存在en子字符串的a标签
• a[lang|en]匹配lang值为en或者en-后接内容的a标签，比如lang='en'、lang='en-us'
• a[rel~next]匹配以rel值为next或者与存在next空格分隔的a标签，比如rel='next'、rel='next other'

特殊性

• 层叠样式表特殊性基于位置累加,a b c d
  行内样式：对应于a，即a为1
  ID选择符：对应b
  类、伪类、属性选择符：对应c
  标签（类型）、伪元素：对应d
  通配符：0
  继承：0都不算，通配符都可以覆盖继承
• 如果两条规则特殊性相同优先使用后定义的规则

第三章 可见格式化模型

• 折叠外边距只发生在正常文本流的块级元素的垂直方向上
• 浮动元素会向左或者向右移动知道碰到包含块（取决于定位）的边缘或者浮动元素边缘
• 清除浮动实际是在元素上方添加足够大的外边距，所以清除浮动后应用外边距只要没超过清除浮动设置的外边距就没有效果
• 块级格式上下文规则:

1. 自动包含突出的浮动元素
2. 包含块的左边界与块级盒子左边界对齐（取决于文字顺序）。当紧挨浮动元素时会忽略该规则，并且缩小自身适应剩余空间

第四章 网页排版

CSS的基本排版技术

• 当使用em计算盒子宽度时，基于自身的font-size而不是父元素

版心宽度、律动与毛边

• 可以给父元素这只dir元素设置排版方向，text-align:justify可以使排版等间距分布，消除毛边
• 多栏布局columns:2 20em;columns-gap:1.5em最多2栏，每栏最小20em，栏间距1.5em
  
  可以通过columns-span:all达到跨栏效果
  

文本特效

• 绘制阴影开销较大，不要滥用

第五章 漂亮的盒子

背景图片

• 相对路径添加/表示在根目录中查找，不添加/表示在当前目录下
• 位图（jpg、png、gif）保存像素数据，图片维度等，随着拉伸可能会存在失真，而矢量位图（svg）则不存在这个问题，保存的是绘制命令，可以任意缩放

背景图片语法

• background-position:20px 20px如果为绝对值，则相对于父元素位置，如果为百分比，则让图片的相应百分比处与父元素的相应百分比处的交点重合，也可以使用关键词，比如background-position:top left，但是如果关键词语长度混用时会出想失效的情况，新语法支持先写关键词，在写长度的情况，比如：

    p{
      height: 100px;
      padding-right: 2em;
      background-image: url('./back.jpg');
      background-size: 50px 50px;
      background-repeat: no-repeat;
      background-position: right 1em top 50%;
    }

也可以使用下列calc实现

background-position:calc(100% - 1em) 50%;

• background-clip: border-box裁剪图片，默认为border-box、background-origin: border-box,设置原点，默认点为padding左上角（padding-box）
• background-attachment:fixed可以达到附着图片的目的，滚动窗口时不会随元素一起滚动，指定local会相对元素内容固定
• background-size:contain尽可能将图片最大化，会自动决定哪边使用100%，哪边使用auto
• background-size:cover会将图片覆盖元素，同时比例不会变，所以上下或者可能会被剪切
• background简写属性，background-position和background-size两个长度单位，先写position，在写size，中间使用/间隔，存在设置*-box有background-origin和background-clip两个属性，所以简写时先写background-origin和background-clip。但是不推荐使用，太不明确了

background:url(cat,jpg) 50% 50% / cover no-repeat border-box content-box #baba55; 

边框与圆角

• 如果两个圆角弧线相交，那么两个轴向就会分别缩小半径，直到圆弧不相交
• 边框也可以通过border-image:url() 40设置图片填充，沿上、右、下、左各方向向内推40px画一条虚线，图片采用九宫格形式剪切并拉伸，剩下1/9会被忽略。设置为40是为了兼容svg
• box-shadow相对text-shadow多一个参数用于设置扩展半径，增大这个值阴影增大，减小这个值阴影减小，并且可以设置inset设置内阴影达到一种内陷的效果

渐变

• 可以与任何接收图片的属性联合使用，比如background-image，background-image:linear-gradient(to bottom,#ffffff 0%,#000000 100%)，第一个位置不仅可以指定边，也可以通过类似to top left的形式指定对角线，百分比也可以通过像素值的形式指定
• background-image:radial-gradient(circle closest-corner at 20% 30%,#cfdfee,#2c56a1)，指定放射渐变，circle或者ellipse指定圆形或者椭圆，at 20% 30%指定圆心位置。closest-coner指定沿最近角延伸，可能的值还有farthest-side沿最远边沿伸、closest-side沿最近边沿伸、farthest-coner沿最远角沿伸
• repeating-radial-gradient(circle,#cfdfee,#2c56a1 20px)或者background-image: repeating-linear-gradient(#cfdfee,#2c56a1 20px)指定重复渐变
• background-image: linear-gradient(transparent,transparent 50%,rgba(55,110,176,0.3) 50%)将第二个图标与第三个图标都定在50%可以达到突变的效果

为嵌入图片和元素添加样式

• 有时候需要根据容器大小嵌入图片，图片会被压缩变形，可以通过object-fit:cover属性设置图片的显示，默认值为fill，设置值为contain、cover与设置background-size类似，设置none会以原始图片显示，设置为scale-down会在none和contain中选取，哪个结果尺寸小就选取哪个
• 具有固定宽高比的位图，将高度或者宽度设置为100%，将宽度或者高度设置为auto就可以达到保持宽高比的目的，但是有些元素没有固定的宽高比，比如iframe元素或者object元素，可以在外层添加一个包装元素设置padding-bottom（基于包含块的宽度）为百分比达到目的

内容布局

定位

• 给未声明宽度的非浮动元素设置外边距时，左右负外边距会向外拉伸元素，导致元素扩张
• 静态定位（static）以外的元素会根据先后顺序进行叠加（其他元素并没有这个概念），可以使用z-index控制顺序，设定了非static定位且z-index不是auto的元素会创建自己的堆叠上下文，内部元素不会影响外部，opacity小于1、transform、filter、flex、grid网格项等均会触发创建新的堆叠上下文
• 给浮动元素设置相反方向的负外边距会使浮动范围减小

水平布局

• 行内块盒子才能设置vertical-align，设置为middle代表行内块的中部与文本对应的基线对齐，所以不能达到居中的效果，如果想让紧挨的两个文本块居中，可以同时设置两个行内块vertical-align:middle设置为同一基点，达到居中的目的
• 要想在任意容器内垂直居中内容，可以利用一个假想的幽灵元素，使假想的文本在容器中部

    .box::before{
      content: '';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }

• 行盒子内任何空白元素都会被解释为一个空格，解决方法可以为行盒子设置font-size:0（让空格宽度为0），在单个为内容设置font-size:16px缺点是不能建立可伸缩盒子了
• 表格布局

 ul{
      width: 100%;
      box-sizing: border-box;
      padding: 0;
      display: table;
      /* 使第一行列宽具有决定性 */
      table-layout: fixed;
    }
    li{
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      width: 25%;
    }

Flexbox

• Flexbox子元素设置margin为auto，且那侧有空间，那么会扩展占据可用空间，利用这个特性，当容器内只有一个元素时只需设置容器内元素margin:auto就可实现水平和垂直居中
• 如果设置flex-basis:0，那么就不会为该元素分配空间，在设置flex-grow:1分配空间

    li{
      flex-basis: 0;
      flex-grow: 1;
      list-style: none;
      border: 1px solid red;
    }

• 假设总宽度1000px，第一项800px，第二项500px，flex-shrink都为1，计算公式为((800*1)/(800*1+500*1))*300px、((500*1)/(800*1+500*1))*300px，默认值为1

二维布局：CSS Grid Layout

  <style>
    .grid-a{
      /* 定义网格布局 */
      display: grid;
      /* 定义3行 第一行auto 第二三行最小为4em，并且平分 */
      grid-template-rows: auto minmax(4em,1fr) minmax(4em,1fr);
      /* 定义5列 平分类似flex grow*/
      grid-template-columns: repeat(5,1fr);
      /* 简写 */
      /* grid-template: auto minmax(4em,1fr) minmax(4em,1fr) / repeat(5,1fr); */
    }
    .grid-header{
      /* grid-row-start: 1;
      grid-row-end: 4;
      grid-column-start: 1;
      grid-column-end: 2; */

      grid-row: 1/4;
      /* 如果不写结束默认占1格 */
      grid-column: 1;
      /* grid-row-start 、 grid-column-start 、grid-row-end 、grid-column-end 最后一个不写默认占1格 */
      /* grid-area: 1/1/-1; */
    }
    .speical{
      /* 占2格剩余项自动填补 */
      grid-column: span 2;
    }
    article img {
      width: 100%;
    }
    /* order可以改变顺序，同flex布局 */
    article:nth-of-type(2){
      order: -1;
    }
    article:nth-of-type(3){
      order: -2;
    }
  </style>

默认的自动填补方式是逐行挨个填补，也可以改变方向为逐列填充

grid-auto-flow: column;

自动填补时，有些网格项跨多个网格轨道可能出现空洞的情况，可以使用稠密算法

grid-auto-flow:row dense;

设定网格间间距通过grid-row-gap或者grid-column-gap设定
控制

     /* 设置自身对齐方式 */
   justify-self: start;
    align-self: start;
    /* 网格容器设置所有网格项对齐方式 */
    justify-items:center;
    align-items:center;
    /* 设置行和列的对齐方式 */
    justify-content:center;
    align-content:center;

模板
grid最大的一个好处是可以可视化的创建布局

 <style>
    section{
      display: grid;
      grid-template-columns: 20% 1fr 1fr;
      grid-template-areas: "hd . sd"
                           "hd . sd";
    }
    img{
      width: 100%;
    }
    article:nth-of-type(1){
      grid-area: hd;
    }
    article:nth-of-type(2){
      grid-area: sd;
    }
  </style>

.点符号区域表示匿名单元

响应式Web设计与CSS

响应式布局之外

• 假如在高分辨率桌面上与低分辨率桌面应用同样的400css 像素 * 400css像素的图片会导致图片在高分辨率桌面放大变行，所以需要依据像素（1css像素对应的设备像素）比做响应式图片

@media (-webkit-min-device-pixel-ratio:1.5),
      (min-resolution:1.5dppx)
    {
      .profile{
        background-image: url();
      }
    }

第九章 表单与数据表

设计数据表

• caption标签用于定义表格标题
• 列标题或者行标题使用th定义而不是td
• colgroup定义列组，可以对某一列进行控制

 <table>
    <caption><strong>这是标题</strong></caption>
    <colgroup>
      <col class="col-1">
      <col class="col-2">
      <col class="col-3">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">这是第一个列标题</th>
        <th scope="col">这是第二个列标题</th>
        <th scope="col">这是第三个列标题</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>这是第一个</td>
        <td>这是第二个</td>
        <td>这是第三个</td>
      </tr>
      <tr>
        <td>这是第一个</td>
        <td>这是第二个</td>
        <td>这是第三个</td>
      </tr>
    </tbody>
  </table>

• 伪元素content可以通过attr函数获取特性

td::before{
	content:attr(data-label);
}

表单

• fieldset元素用于分组相关信息块，比如包含联系inxi，包含留言信息的区块分组，同时可以配合legend元素使用，legend元素类似fieldset的标题

  <fieldset >
    <legend>这是分组的标题</legend>
    <input type="text" name="" id="">
    <input type="password" name="" id="">
  </fieldset>

• label标签还具有增强表单的功能，为障碍人士提供帮助，可以使用隐式的也可以使用显示的，隐式写法：

<label>Email:<input /></label>

• 可以通过resize:vertical属性指定textarea的缩放
• 对绝对定位的元素使用clip属性可以达到剪切的目的，相比display:none、visibility:hidden在于CSS会读取文本内容，对障碍人士有好处，在表单中尽量使用这个做隐藏

变换、过渡与动画

二维变换

• 平移使用百分比时是基于自身宽度计算的，而不是包含块
• 计数器实现

    ul{
      /* 定义计时器，名字为count，初始值为2 */
      counter-reset: count 2;
      list-style: none;
    }
    li{
      position: relative;
      /* 递增 */
      counter-increment: count;
    }
    li::before{
      /* 使用计数器 */
      content: '$' counter(count);
      position: absolute;
      transform-origin: 100% 100%;
      transform: translate(-100%,-100%) rotate(-90deg);
    }

• transform:skewX(15deg)设置变形，对哪边设置变形，那么变形后的那边变形后保持水平，另外一边倾斜，可以利用变形达到2.5D的效果
  
• 变换其实是通过矩阵进行的，通过矩阵表示一系列的变换组合，通过martix函数可以直接通过函数控制，为的是方便JavaScript调用
• 变换后的元素会创建新的包含块。如果其中有元素应用position:fixed则会把变换的元素当作自己视口
• 过渡延迟还可以设置为负值，假如持续时间为10s，延迟时间设置为-5s，那么过渡开始就会进入过渡中段

关键帧动画

• 默认第一个关键帧动画在delay前不会被应用。如果指定animation-fill-mode:backwards，那么第一个关键帧的属性会立即应用，使用forwards动画完成后应用最后一个关键帧的计算样式，使用both则前向和反向都进行填充如果不存在delay的话加与不加是没有区别的
• animation-play-state:paused可以达到暂停动画的目的，默认值是running

三维变换

• perspective:800px定义观察点位于屏幕前方多远，恰当的距离一般为600px-1000px，在要变换的元素的父元素上设置
• perspective-origin:top left定义观察者位置
• 在父元素上设置透视效果，子元素都应用同样的透视关系是比较好的，也可以通过perspective()函数对单个元素设置透视效果

.box{
	transform:perspective(800px) rotateY(60deg); 
}

• 默认情况下，应用到父元素上的三维变换会造成子元素的三维变换失效，所以需要设置，所以需要创建一个三维上下文，让子元素和父元素在同一三维空间中，对父元素设置transform-style:preserve-3d
• 高级三维变换rotate3d(1,1,1,45deg)，绕源点到矢量[1,1,1]的连接线旋转45deg
• 三维变换也可以像二维变换matrix使用matrix3d变换矩阵进行变换，接收16个参数，堪称最复杂的CSS属性

第十一章 高级特效

CSS Shapes

• shape-outside:circle()指定外轮廓形状，只能对浮动元素设置，指定polygon()指定多边形

      /* 圆和椭圆，类似渐变的配置 */
      shape-outside: circle(150px at 50%);
      shape-outside: ellipse(150px 40px at 50% 25%);
      /* 上下20px，左右30px，圆角10px */
      shape-outside: inset(20px 30px round 10px);

• 可以通过设置url达到形状图片的目的，并可以通过shape-image-threshold改变透明度阈值阈值，默认是以完全透明的边生成形状
• 也可以通过盒子的形状生成元素的形状，并且形状也能依照圆角生成

shape-outside:border-box;

• 可以通过shape-margin给整个形状添加外边距

剪切与蒙版

• 创建形状会影响周围文本流，但是不会影响元素外观，蒙版通过透明度的不同影响元素外观，剪切如字面信息一样影响外观，但是不会影响正常文本流。clip属性可以达到剪切的目的，但是需要元素绝对定位，并且只能用于剪切矩形（可以用于控制元素的显示与消失），并且剪切会影响元素响应区域，而蒙版不会。clip-path实现了剪切路径形状定义硬边界

      /* 多边形剪切 */
      clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
      /* 还可以使用circle ellipse inset，剪切 */

对于复杂边界，推荐使用SVG定义边界

• 可以使用蒙版实现一种遮盖的效果，蒙版透明部分，相应的显示内容也会变得透明，蒙版不透明部分，元素相应的部分也不那么透明。

-webkit-mask-image: radial-gradient( ellipse 90% 30% at  50%, rgba(0,0,0,0) 45%, #000 70% ); 
 /* 第二个颜色为透明 */
-webkit-mask-size: 100% 200%;

• 元素之间的混合可以使用mix-blend-mode:multiply达到混合的目的，默认是会与背景混合的，也可以设置opacity:0.999达到新堆叠上下文分离的目的，或者使用新属性isolation:isolation分离

滤镜

• box-shadow，可以通过filter:drop-shadow达到目的，相比box-shadow的优势在于性能更好，会调用GPU处理。
• 背景滤镜可以使用backdrop-filter设置，与filter类似，不过是给元素背景及其后面页面的合成结果，可以利用其实现毛玻璃效果

backdrop-filter:blur(5px);
background-color:rgba(0,0,0,.5);

• 应用特效的次序：

1. 基本属性（除opacity）
2. 滤镜
3. 剪切
4. 蒙版
5. 应用混合模式，同时会应用opacity属性，opacity实际上也是一种混合模式