CSS知识树

css

• css和盒模型
  • 标准模型 （content）
  • 怪异模型 （content+border+padding）
• 布局

  • 表格布局

  • 两栏布局 一栏定宽，一栏自适应

  • 三栏布局 两边定宽中auto

    • 圣杯布局
    • 双飞翼布局 float和BFC

  • 分栏布局 column-width

  • 弹性布局 有老版和新版的

    • 容器
      • flex-direction justify-content align-items flex-wrap align-content
    • 项目
      • order align-self flex-basis flex-shrink

  • 最强大的网格布局

    • 容器
      • repeat()函数 auto-fill 关键字 fr 关键字 minmax()函数 auto 关键字
      • grid-template-columns grid-template-rows grid-row-gap grid-column-gap grid-template-areas grid-auto-flow
      • justify-items align-items justify-content align-content
    • 项目
      • grid-column-start grid-column-end grid-row-start grid-row-end
      • grid-column grid-row 上面的合写 grid-area
      • justify-self align-self

  • 响应式媒体

    • 媒体类型 属性 关键字
• 文本块
  • letter-spacing text-align text-decoration text-indent white-space word-spacing text-transform text-rendering
• css像素/单位 px rem em
• 定位类型 relative absolute fixed sticky
• 浮动 盒模型一层，文字一层，只浮盒模型那层
• BFC
  • 成立条件 float的值不是none position不是static或relative overflow不是visible display不是inline-block、table-cell、flex、table-caption或者inline-flex
• haslayout 如何触发？
• hack注释
• 动态伪类lvhaf link visited hover active focus
• 伪元素 ::before ::after :first-line first-letter
• 锚伪类 :target
• 结构性伪类
  • :nth-child first-child last-child only-child
  • :nth-of-type first-of-type last-of-type only-of-type
  • p:nth-child(5) 和 p:nth-of-type(5) 区别
• 表单性伪类 :check :disabled enabled focus
• 阴影
  • box-shadow
  • text-shadow css增加了text-stroke文字描边 direction文字排版 unicode-bidi文字排版
• 自定义字体
• 选择器
  • 属性权重优先级 !import > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 游览器默认属性
  • e e 后代选择器 e,e 多元素选择器 e > e 子选择器 e+e 兄弟选择器
  • 属性选择器 [a=1] [a~=1] [q|=1] 选择所有
  • 属性选择器 [a^=1] [a$=1] [a*=1] 选择每一个
• 新属性
  • 盒模型阴影
  • 倒影 box-reflect
  • resize 自由调整 overflow要搭配
  • 边框图片
  • 渐变
• 过渡
  • transition-property 过渡属性的名称
  • transition-duration过渡时间
  • transition-timing-function过渡效果
  • transition-delay
  • addEventListenter(“transitionend”,function(){console.log(“监听完成 会触发两次”)})
  • 一个坑：transition在元素首次渲染还没有结束的情况下是不会触发的
• 变形 transform
  • rotate translate skewX scale origin基点变换
  • 注意：在绝大部分变换样式切换时,如果变换函数的位置，个数不相同也不会触发过渡
  • 3D变形
    • 景深 perspective 写在父元素身上，作用于子元素，本身不起作用 或写在子transform: perspective(100px);
    • 景深叠加 3D缩放/旋转/平移
    • perspective-origin
    • 灭点
    • 3D舞台与平面 transform-style: preserve-3d;
    • backface-visibility 背面是否透明
• 动画
  • name duration timing-function delay iteration-count play-state
  • 动画帧
  • animation-direction 执行方向 animation-fill-mode动画外的状态
  • step steps(n, start/end)
    • start表示一开始就越阶，（0%的那个阶段没有执行到）就是start看不到第一帧
    • end表示每个阶段完成后才越阶，（0%的那个阶段就有执行到）就是end看不到最后一帧
  • 坑 只有块元素才配拥有动画
• css函数
• css变量
• js操作css
  • getComputedStyle
  • getPropertyValue
  • getPropertyPriority
  • setProperty
  • removeProperty
  • item

杂-面试题

• 游览器是如何解析css的 从右往左
• 垂直水平居中 7种
  • flex
  • grid
  • table
  • 通过 left + right + width + padding + margin 和 top + bottom + height + padding + margin
  • absolute l 50% r 50% translate3d
  • 利用text-align:center和vertical-align:middle属性
  • 用line-height和高度一样
• 清除浮动的方式
  • 使用伪元素 先block 然后clear
  • 使用空标签然后clear 性质跟上面一样 <div style="clear: both"></div>
  • 使用 <br clear="all" />
  • 开启BFC 开启overflow或者position清除浮动
• css三角形
• CSS 选择符有哪些
• 伪类与伪元素的区别
• CSS3 新增伪类有那些
• li 与 li 之间有看不见的空白间隔是什么原因引起的？
• 什么是包含块，对于包含块的理解
• width:auto 和 width:100%的区别
• margin 重叠问题
• 对 BFC 规范的理解？
• IFC 是什么
• 为什么需要清除浮动？清除浮动的方式
• 使用 clear 属性清除浮动的原理
• zoom:1 的清除浮动原理?
• CSS 优化、提高性能的方法有哪些
• 全屏滚动的原理是什么？
• 让页面里的字体变清晰，变细用 CSS 怎么做
• 设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？
• layoutviewport、visualviewport 和 idealviewport 的区别？
• 如何让去除 inline-block 元素间间距？
• png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp
• 1rem、1em、1vh、1px各自代表的含义
• 画一条0.5px的直线
• display: inline 的元素设置 margin 和 padding 会生效吗
• 表格单双行条纹样式
• 什么是层叠上下文