css简单的梳理总结

• 选择器
  
  • 优先级
  • 计算方式
    
    • 继承属性 无
    • 通配符选择器 0 0 0 0
    • 标签选择器 0 0 0 1
    • 类/属性选择器 0 0 1 0
    • id选择器 0 1 0 0
    • 内联/行内/行间样式 1 0 0 0
    • 4位的非进位数
    • 来源（用户样式，网站样式，标签自带样式）
    • 用户样式的important 高于网站样式的important
    • 其它情况都是网站样式高于用户样式

• 层叠

  • 如果多个选择器为同一个元素设置了相同的样式属性
  • 这些属性是不会合并的

  • 只会选择其一

    p {
      text-decoration: underline;
    }
    .foo {
      text-decoration: overline;
    }

• 字体

  • font-size
  • font-weight
  • font-style
  • font-family

• 常规流/正常流 normal flow

  • 所有没有浮动，没有定位的元素，就处于常规流
  • 所有的元素/内容从上到下，从左到右显示，前面的内容会把后面的内容往后顶，后面元素的位置会被前面的元素往后顶
  • 正常流里的元素不会与其它正常流里的元素产生重叠
• 脱离正常流
  
  • 一个元素完全不影响后面元素的布局

• 包含块 containing block

  • 一个元素的布局很大程度上依赖于其所在的包含块
  • 大多数时候，百分比都是取自包含块content-box的宽度或高度
  • 如何确定包含块？
  • 常规流里的元素
    
    • 一个元素的包含块就是离其最近的块级祖先
  • 浮动元素
    
    • 同常规流
  • 定位元素
    
    • fixed
    • 视口
    • relative
    • 相当于元素在正常流里
    • absolute
    • 离其最近的定位祖先
  • 根元素的包含块是初始包含块，即视口

• 布局/格式化/上下文

  • 什么是布局？
  • 在何种情况下，何种元素将以何种方式摆在何种位置，以及对其它元素的影响

• 格式化分类

  • 常规块级元素的格式化
  • 水平方向
    
    • 块级元素会在其前后换行，使其独占一整行
    • 块级元素水平方向的尺寸一定会等于其包含块的可用宽度（ml,bl,pl,w,pr,br,mr相加等available width of containing block）
    • margin与width都可以是auto
      
      • width会尽量宽
      • margin会尽可能的平均分配
      • 除非元素过分受限
      • 过分受限时，某一方（取绝于语言环境）的margin会被重置为auto
  • 垂直方向
    
    • 块级元素会垂直摆放（stacking）
    • 常规流里块级元素的高度等于（当元素没有pdding与margin时：
    • 最高元素的border上边缘
    • 到
    • 最低元素border的下边缘
    • 【常规流】里【块级元素】垂直方向的margin会合并
    • 给常规流里的块级元素设置百分比高度往往是无效的
    • 除非它的包含块的高度不依赖于它。
      
      • 具体原因，是会产生逻辑矛盾
      • 子元素会撑大父元素
  • 行内格式化
  • 就是一个块级元素的每一行内容都是如何布局和生成的
  • 水平方向
    
    • 由浏览器来计算哪些元素会放在同一行里
    • 然后在行内元素的相应位置剪断
      
      • 断开的位置border是不存在的
      • ouline是存在的
    • 然后像块级元素一样堆叠摆放
    • 行元素元素水平方向上的m,p,b,w都会影响布局

  • 垂直方向

    • 行内非替换元素（span）
    • 垂直方向的所有盒子属性都对布局无效
    • em框，字符框，高度是font-size
      
      • 值得注意的一点：文字的内容有可能超出em框
    • 内容区/框，em框的集合即为内容区
    • 行内框：
      
      • 非替换元素
      • 内容区的上下分别加上半行间距（行间距：line-height - font-size）
      • 替换元素
      • 就是其margin-box
        
        • 更严格来，其行内框是从margin-top的边缘到margin-bottom的边缘
        • 所以有可能一个行内框的高度为负的
    • 行框
      
      • 是由该行所有行内框的最高点
      • 以及
      • 所该行所有行内框的最低点确定

    • 行内框在垂直方向的位置由vertical-align属性控制

      • baseline 该元素的baseline跟该行匿名文本baseline对齐
      • 匿名文本的基线就是其基线
      • 行内块元素的基线
        
        • 有内容 以内容最下方一行内容的基线做为基线
        • 无内容 同行内替换元素
      • 行内替换元素的基本被认为margin-bottom的下边缘
      • 百分比 乘以line-height后上或下移动
      • 绝对数值 上或下移
      • top 该元素的行内框顶部对着本行行框顶部
      • bottom同上相反
      • middle 该元素的行内框的中间对着baseline上方0.5ex的位置
      • text-top 该元素的行内框顶部对着本行匿名文本的内容框的顶部

    • 行内替换元素（img）

    • 往往是有内在宽高的
    • 设定了宽或高，另一方向的维度会自动变化
    • 是以margin-box外边缘为行内框的
    • 行内块元素（inline-block）
    • *
  • 浮动格式化
  • 浮动元素会自动变成block
  • 浮动不能与除position: static/relative;同时使用
    先浮动再定位
  • 浮动元素【半脱离】常规流
    
    • 因为还是会对常规流有间接影响
  • 浮动元素的摆放
    
    • 浮动元素会完全不与其它浮动元素重叠
    • 浮动元素会尽量往上
    • 在无法处于上方时，会下移
      
      • 下移后不能因需要尽量往上（即使有空间）再重新上移
    • 浮动元素会尽量往浮动方向移动
    • 浮动元素会在上，左，右方不超出包含块
    • 当浮动元素的宽度大于包含块的宽度时，会超其包含块的左右
    • 浮动元素的高度也不能超过其前面的任意浮动元素
    • 浮动元素的高度还不能超其所在行行框的最高点
  • 常规流块级元素会当浮动元素不存在（不考虑clear）
    
    • 所以仅有浮动元素的包含块默认高度是塌陷的
  • 行内元素会绕着浮动元素渲染
    
    • 会在左浮动元素的右方、右浮动元素的左方渲染
  • 清除浮动
    被设置了clear属性的block元素会往下移动直至其border-box的上边缘与某个方向上的浮动元素margin-box的下边缘在同一高度
    
    • 此现象不是margin collapse
    • 对于左浮动元素来说，为其清除右方浮动将是无效的
    • 可以理解为clear：left；表示让元素的左方没有左浮动元素
    • 可以理解为clear：right；表示让元素的右方没有右浮动元素
      可以理解为clear：left；表示让元素的左方没有左浮动元素、右方没有 浮动元素
  • 闭合浮动 enclosing float
    
    • 使包含块变高以使其能够将其浮动后代包在其盒子范围内
    • 思路：
    • 1 让常规流里的元素把包含块撑大
      
      • 给包含块一个处于最后的块级子结点
      • 为此子结点清除浮动
      • 此结点则会下移，同时撑高了包含块
      • 放一个真实的结点
      • 使用伪元素
    • 2 触发包含块的BFC
      
      • 使用任何一种 方法触发包含块的BFC
      • overflow: hidden
      • table
      • 
        
        • BFC?
      • Block Format Context 块级格式化上下文
        
        • 类似于js中的作用域
        • 创建了一个新的布局空间
        • 其内部的元素一定渲染在一个矩形区域内
        • 此上下文的渲染不会影响其外部，反之亦然
        • 子元素的margin不会超BFC元素的外面
  • 定位
  • 不同定位方式
    
    • fixed
    • 视口
    • relative
    • 同不定位
    • absolute
    • 最近的定位祖先
    • static
    • 默认值
  • 使用top，left，right，bottom来设定元素的位置
    
    • 如果不使用以上任何属性，元素会在其本来的位置
    • 正值都是让该方向的边线往定位祖先的中心移动
    • 负值都是让该方向上的边线远离定位祖先的中心
  • 定位盒子
    
    • 被定位元素的定位盒子是其margin-box
    • 祖先的定位盒子是其padding-box
  • Flex
  • flex container： display：flex
  • flex item： flex container的直接子元素
  • 元素是默认是先按主轴方向排列
  • 主轴方向空间不够的话向侧轴方向移动
    
    • 再从下一行/列的主轴方向开始排列
  • 主轴和侧轴方向可以分别使用
    
    • flex-direction row下,row-reverse上,column右,column-reverse左
    • flex-wrap wrap下/右, wrap-reverse上/左
    • 设置
  • 空间分配：
    
    • flex-grow 默认为0
    • 扩张权重
    • flex-shrink 默认为1
    • 收缩权重
    • 实际计算收缩权重时还需拿权重乘以flex-basis
  • 属性简写
    
    • flex： flex-basis flex-grow flex-shrink;
    • flex-flow: flex-direction flex-wrap;
  • 表格
  • 2/3D变幻
  • 变幻不影响布局
  • 变幻一般会使用显卡图形加速
    
    • 性能会更好
    • 不在主线程执行
    • 就算页面有js卡死
      
      • 23D动画也能执行
  • transform-origin: 变幻不动点
  • transform-style 3d变幻，是否保留子元素的3d效果
  • 变幻实际上都是由矩阵实现的。
  • 变幻中的百分比数值都是相对于元素自身
  • rotate，skew，translate，
  • transition 渐变
  • trasition-property/delay/timing-function/duration
  • 渐变要发生，元素必须得有transition
    
    • 只要transition属性丢失，渐变效果就没有了
  • animation
  • 
    
    • media query
  • 可以查询
    
    • 视口宽高
    • 屏幕方向
    • 屏幕像素密度
    • 是否支持某个css特性 @support (display: flex) {}
  • rem移动端布局
  • 
    
    • 设定初始包含块的宽度。
  • 不同设备出厂设置的默认渲染宽度不一样
  • 有些设备不能设置为纯数值，只能使用device-width
  • 想要按比例还原视觉稿
  • 于是想要找一个单位x，能够使得1x = 1视觉稿像素
  • 只有rem有这个功能可以灵活缩放
    
    • 1rem = 1视觉稿像素
    • 100vw = 视觉稿宽度(W)
    • 100vw = Wrem
    • 1rem = calc(100vw / W)
    • 有些手机不支持vw或calc
    • 只能通过js读取页面的宽度，计算出来
    • 由于Chrome不能使用小于12号的字
    • 所以再把1rem放大为原来的10倍