读张鑫旭老师的《CSS世界》总结

概述

• 整个css世界围绕“流”来展开，映射现实世界的流
  • 现实世界，水流（div）放到一个容器里面，一定是平铺展开，如果放一个木头（span），它会漂在水流上面，再放一个，还是会跟前一个一样
  • 水流的特性就是“自适应特性”，div是典型的有“流”特性的元素，所以，“div+css布局”实际上就是“流体布局”
    • table也可以做到自适应布局，但是，表格并不属于“流体布局”，它属于另一个世界，比css出现的还要老
  • 对css2.1全面支持从IE8开始，如今的css3有很多优秀的特点
    • 布局更丰富
      • 移动端的崛起，催生css3媒介查询和更多响应式布局特性；如：
        • 图片的srcset属性
          

        • css的object-fit属性
          

          效果：
          

      • 弹性盒布局flexble
      • 格栅布局grid
    • 视觉表现
      • 圆角（border-radius）、阴影（box-shadow）、渐变
      • transform、transition和animation元素变换和动画
      • filter滤镜和混合模式

css术语概念

• 基本概念
  • 规则集、声明块、声明、属性、值

    // 整段被称为“规则或规则集”，由选择器和声明块组成
    // 声明块是{} 包裹的系列声明
    .vocabulary {
          // 声明就是 属性名：属性值  组成
    height: 99px;color: transparent;}

  • 关键字和泛关键字
    • transparent、solid等是关键字
    • inherit是泛关键字，所有css属性都可以使用
  • 功能符
    • 被括号括起来的那种，比如rgba和rgb、url、元素属性值、calc、过渡效果（scale()）等
• 未定义行为
  • 我们同样的代码，在chrome可以正常，在firefox或者ie里面，样式就会走形，俗称样式bug，这种表现差异并不是浏览器的bug，用计算机领域专业术语应该是“未定义行为”
  • 比如:active伪类，我们有一个a标签模拟的按钮，样式是a:active {background-color: red;},假设我们给它绑定mousedown事件，回调函数里面阻止按钮的默认行为
    • 在除了firefox之外的所有浏览器都可以正常表现
    • 因为规范并没有对这种场景的描述，所以firefox可以自己发挥，像这种情况，就称为“未定义行为”

流、元素与基本尺寸

• 块级元素
  • 普遍认为display：block的元素都是块级元素，这是错误的。
    • li的默认display值是list-item
    • table的默认display值是table，它们都是块级元素，因为都符合块级的特征，独占一行
  • 块级具有换行特性，理论上可以配合clear清除浮动

    .clear:after {
        content: '';    display: table; // 也可以是block，或者是list-item
        clear: both;
    }  // IE 浏览器不支持display 值为list-item

• 为什么list-item元素会出现项目符号
  • 所有的块级元素都有一个“主块级盒子”，list-item还有一个“附加盒子”，学名“标记盒子”
  • “标记盒子”专门用来放远点、数字等这些项目符号
• display：inline-block导致的容器盒子
  • 每个块级元素都有两个盒子，外在的块级盒子负责元素是否换行显示，内在盒子又叫块级容器盒子，负责宽高、内容呈现。
• 值为inline的内联元素内外都是“内联盒子”