深入解析CSS

本书旨在达成两个目标：帮读者深度掌握CSS语言，并快速了解CSS 的新进展和新特性。本书分为以下四部分。第一部分回顾基础知识，并重点关注几个很容易被忽视的细节，包括层叠和继承、相对单位、盒模型等；第二部分介绍网页布局的各种关键工具，如浮动布局、Flexbox、网格布局、定位、响应式设计等；第三部分介绍**的最佳实践，主要包括如何用模块化的方式组织CSS，以及如何构建一个模式库；第四部分介绍与设计师共事时需要考虑哪些重要因素，以及自己如何做一点设计工作。

深入解析CSS

• 层叠
  • 来源
    • 内联 > 作者样式表 > user agent
    • !important 最高
  • 优先级
    • ID > 类 > 标签
    • 三位表示法：
      • 1,2,3表示1个ID2个类三个标签
      • 0,4,5表示0个ID4个类5个标签
      • 上述优先级 1,2,3 > 0,4,5
    • 如果任一个用了!important，则它生效
      • 假设内联style用了，则没法覆盖这条规则了
      • 所以样式覆盖的原则，是尽量降低被覆盖规则的优先级，而不是提高覆盖规则的优先级
  • 源码顺序
    • 爱恨原则
• 继承
  • 就是父子元素间的继承，大多是文本类的属性可继承
  • 有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial
    • inherit子元素与父级保持一致
    • initial恢复元素默认
• 浏览器查看
  • 子主题
• 简写
  • 副作用：没写的属性仍然会设置省略的值，即它们会被隐式地设置为初始值。这会默默覆盖在其他地方定义的样式
  • 四个值的TRouBLe”口诀 ：三个值时，l同r
  • 两个值（background-position、box-shadow、text-shadow）的笛卡尔网格，先水平再垂直
  • 上面两条的记忆法：属性需要指定从一个点出发的两个方向的值，就想想“笛卡儿网格”。如果属性需要指定一个元素四个方向的值，就想想“时钟”。
• 相对单位
  • em：以自身元素（继承）的字号为基础
    • 如果对同一个元素设定font-size：1.2em；padding：1.2em，此时字号与内边距是不一样的！假设父元素字号是16px，则自身字号为19.2px，而内边距将是23.04px！
    • 为避免麻烦，font-size慎用em，其他属性用em没问题
  • rem：以根字号为基础
    • 根节点字号用类表示
  • 从可访问性来说，字号都应用相对单位，而不要用px等绝对单位（视障人士可通过放大页面或浏览器的字号设置）
  • 根字号的响应式设计
  • 基于视口的相对单位：vh，vw，vmin，vmax
  • line-hight建议不写单位，它会自动按元素本身字号来计算（em效果）；但如果写了单位，则会作为固定值被后代继承，有可能发生文字重叠的问题。
    • 使用无单位的数值时，继承的是声明值，即在每个继承子元素上会重新算它的计算值。
• css变量
  • 不是只sass或less那种预处理技术的变量，而是css本身的，可理解为自定义属性
  • 定义：必须定义在语句块中，必须—开头；如 :root { —main-color: #222; }
  • 使用： p { color: var(—main-color); }
    • var函数接受2个入参，第一个找不到或者非法就用第二个，所有都非法则用属性默认值
    • 支持用js改变css变量的值
      • 用这个特性，可实现换肤
  • 在不支持的浏览器上，var语句被忽略
• 布局
  • 盒模型box- sizing
    • 默认content-box
    • border-box
      • 布局时一般先设置这种，方便计算
  • 文档流
    • 行内元素
    • 块元素
  • 布局基础样式
  • 浮动布局中，可用calc来建立关联
    • 清除浮动
      • 在主容器的最末尾元素上加clear，一般是个空div。但更好的实现是在主容器本身用after伪元素
      • 不发生margin折叠的清除浮动： 外边距无法通过单元格元素折叠
    • 浮动布局适用于每行元素个数固定且元素是百分比宽度的场景。用media:nth-child(3n+1)来清除每行第一个元素的浮动
  • 等高列的方案
    • IE8用display：table
      • • 又由于table-cell不支持margin，需要变通如下
    • IE10+用flex布局
  • 垂直对齐
    • vertical-align只适用于行内元素或table-cell
    • 自然高度的容器：设置相等的上下padding
    • 固定高度或无法用padding的容器：对容器使用display: table-cell和vertical-align: middle
    • 不需考虑IE9-，用flex布局
    • 只有一行文字：用line-height等于height； 内部块元素可用inline-block转换
    • 容器和内容高度都知道：绝对定位
    • 其余可参考网站http://howtocenterincss.com
  • margin重叠
    • 最终效果为大的那个margin
    • 重叠不止发生在兄弟节点间，父子节点之间也有可能。总之，所有相邻的顶部和底部外边距会折叠到一起。如果在页面中添加一个空的、无样式的div（没有高度、边框和内边距），它自己的顶部和底部外边距就会折叠。
    • 只有上下外边距会产生折叠，左右外边距不会折叠
    • 如何防止？
      • 加padding或border
      • 对容器使用overflow: auto（或者非visible的值
      • 脱离文档流：绝对定位、浮动、fixed定位，inline- block
      • flex box
      • table-cell
  • 双容器经典布局
    • • 使用了max-width而不是width，因此如果视口宽度小于1080px的话，内层容器就能缩小到1080px以下。换句话说，在小视口上，内层容器会填满屏幕，在大视口上，它会扩展到1080px。这种方式能有效避免在小屏幕上出现水平滚动条。
  • 块级格式化上下文 （block formatting context, BFC）
    • 特点：BFC里的内容不会跟外部的元素重叠或者相互影响
    • 如何创建BFC？
      • float: left或right
      • overflow:hidden、auto或scroll
      • display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。
      • position:absolute或position: fixed
  • 浮动网格布局：行作clear，列分多列
  • flex布局
    • 弹性容器、弹性子元素、两条轴
    • 用margin: auto来填充弹性子元素之间的可用空间
    • flex属性是三个不同大小属性的简写
      • flex-basis：定义元素大小的基准值任意的width值，包括px、em、百分比。它的初始值是auto
      • flex-grow：用来填充除去基准值后容器剩余宽度；若为0，则最终元素宽度就是基准值，非0则填满剩余空间
      • flex- shrink：当基准值超出容器时，用来缩小；若是0，不收缩；若是大于0则收缩至不再溢出。
      • 推荐用简写。flex简写属性会给出有用的默认值：flex-grow为1、flex-shrink为1、flex-basis为0%。注意不是初始值，而是有用的默认值
    • flex常用局部方式
    • 用flex-direction改变主副轴方向：默认值row和column，指定子元素从左到右/从上到下排列；用row-reverse和column-reverse改变方向
      • 常用于垂直方向上的撑满；大部分概念与水平一样，但对于高度和宽度的方式不同（因为css处理宽高本质不同：宽自动铺满，高有内容决定）
    • 所有属性一览
      • 容器属性
      • 子元素属性
  • 网格布局grid
    • display: grid定义容器；grid-template-columns和grid-template-rows定义了网格每行每列的大小。fr，代表每一列（或每一行）的分数单位（fraction unit）。也可混搭：grid-template-columns: 300px 1fr表示第一列300px，第二列充满剩余空间。grid-gap定义子元素间距，可垂直水平分别定义
    • 四个概念
      • 网格线
      • 网格轨道
        • 用grid-template-columns和grid-template-rows定义的是网格轨道
          • grid-template-rows: repeat(4, auto)；定义了四个水平网格轨道，高度为auto，这等价于grid-template-rows: auto auto auto auto
      • 网格单元
      • 网格区域
    • 在网格里的每个元素都必须是主要网格容器的子元素
• 垂直居中
  • img与文字同处一行，img需要加vertical- align：middle
• 技巧
  • 相邻的兄弟选择器会选中除了第一个元素之外的所有菜单项，给每个菜单项之间加上边框。
    • 猫头鹰选择器（适合新项目）： 会选中页面上有着相同父级的非第一个子元素
  • 让table在小屏幕上按行显示
  • 流式布局中防止图片超出容器
    • img { max-width: 100%;
  • 对表单下的input设定样式：.login_form input:not([type=checkbox]):not([type=radio]) { display:block; width:100%; }
  • 大写的实现：大写仅仅是一种样式时，正常的做法是在HTML中按标准的语法规则书写，再用CSS实现大写text-transform:uppercase;
  • <input>比较特殊，其宽度由size属性决定，而它表示不出滚动条的情况下大致能容纳的字符数量。如果不指定的话，该属性就会恢复为默认值。可以用CSS的width属性强制指定宽度。
• 一些工具
  • autoprefixer：给低版本浏览器加兼容前缀，GitHub有下