CSS知识树

r囧r小猫 2021-07-25 02:50 350阅读 0赞

# 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 会生效吗
 *  表格单双行条纹样式
 *  什么是层叠上下文