温故而知新，进步一点点 ♥(✿ฺ´∀`✿ฺ)ﾉ~
css相关的问题，都是些基础知识，我们来复习下关于css的面试题
HTML
1、DOCTYPE
是 HTML5 中标准通用标记语言的文档类型声明，告诉浏览器的解析器用什么方式来加载识别文档
2、script 标签中 defer 和 async的区别
同：异步加载外部js
异：async 在 js加载完后立即执行，defer 在html文档解析完成后执行
3、块级元素、行内元素、行内块元素区别
- 块级元素（block）：可以设置宽、高、行高、内外边距，独占一行，不设置宽度默认为父元素宽度。
- 行内元素（inline）：无法设置高宽，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效，不独占一行，不设置宽、高度时，宽、高度为内容的宽、高度。
- 行内块级元素（inline-block）：可以设置高、行高、内外边距，宽度默认为内容本身宽度，不独占一行，元素之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；
4、常用 mate 标签有哪些
5、HTML5
新增特性
- 新增语义化标签，head、footer、nav、main、section等
- 新增canvas画布、websocket通信、拖拽等
- 新增本地存储 localStorage、sessionStorage
对语义化的理解 - 提高代码可读性，可清晰看出代码结构，有利于开发维护。
- 方便爬虫识别内容
6、查找、创建、添加、删除、移动、复制 节点
- 查找：
document.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.querySelector()document.querySelectorAll()
- 创建：
document.createElement()
- 添加：
document.appendChild()
- 删除
document.removeChild()
- 移动
doucument.appendChild()
- 复制
dom.cloneNode(true)
CSS
1、DOM
DOM（Document – Object – Model）文档对象模型，树形结构。提供大量api来实现对html节点增、删、改、查等。
2、BOM
BOM（Browser – Object – Model）浏览器对象模型。提供浏览器交互的一系列方法和接口。
3、CSS3
- 新增特性
- border-radius、text-shadow、box-shadow…
- transform、transition、gradient、animation…
- 选择器 & 权重
!important(1000)- 内联样式
- id选择器（100）
- 类选择器、伪类选择器（div::last-child）、属性选择器（div[ class = ‘foo’ ]）（10）
- 标签选择器、伪元素选择器（div:after）（1）
- 关系选择器（兄弟选择器 + 、子选择器 > 、后代选择器 ）、通配符选择器 （0）
- 可继承属性 和 不可继承属性
- 可继承
- font-weight
- font-size
- font-family
- color
- line-height
- cursor
- …
- 不可继承
- width、height、margin、padding、border
- display
- position
- background
- overflow
- …
- 可继承
- 盒模型
- 怪异盒模型（box-sizing:border-box）：
width = 内容的 宽 + 左&右 padding + 左&右 borderheight = 内容的 高 + 上&下 padding + 上&下 border
- 标准盒模型（box-sizing:content-box）
width = 内容的 宽height = 内容的 高
- 怪异盒模型（box-sizing:border-box）：
- 常见 单位
- px：
固定像素单位 - 百分比%
- em、rem ：
em相对于父元素，rem相对于根html元素font-size - vw、vh :
视口宽、高
- px：
3、事件捕获 和 事件冒泡 — 事件委托
事件流：从页面中接收事件的顺序就叫事件流。分为三个阶段：捕获阶段、目标阶段、冒泡阶段。
事件捕获：从window顶层逐级向内执行的过程。
事件冒泡：从目标元素逐级向外触发的过程。
- stopPropagation() 阻止事件冒泡
- preventDefault() 阻止默认事件
利用事件冒泡并结合事件捕获，可以使用事件委托，实现对内部元素事件的统一监听
- currentTarget：事件目标元素。
- current：事件流中的元素。
addEventListener的第三个参数
element.addEventListener(event, function, useCapture);
-
默认为 false (冒泡)
{ capture: Boolean, //事件捕获阶段传播触发 once: Boolean, // 只调用一次，如果是`true`会在其被调用之后自动移除 passive: Boolean, // 永远不会调用`preventDefault()`。如果`listener`仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告 }
4、flex 布局
相关概念：弹性盒模型、主轴和交叉轴。
容器 属性
flex-direction
设置主轴的方向
- row（默认）
- row-reverse
- column
- column-reverse
flex-wrap
设置是否可以换行
- nowrap(默认) 不会换行，宽度被压缩
- wrap 会换行
- wrap-reverse 会换行，且交叉轴元素排布 变为从下向上
justify-content
项目在主轴上的对齐方式
- flex-start
- flex-end
- center
- space-around
- space-between
– 项目每一行首尾元素距容器边缘距离 是 元素间距一半，来分配剩余空间。 - space-evenly
– 项目每一行首尾元素距容器边缘距离 与 元素间距相等，来分配剩余空间。
align-items
项目在交叉轴上的对齐方式
- flex-start
- flex-end
- center
- baseline 各个项目第一行文字基线对齐
- stretch 项目高度未定时会填满
align-content
定义了 多根轴线 在 交叉轴上的对齐方式
- flex-start
- flex-end
- center
- space-around
- space-between
- stretch
项目 属性
flex-grow
项目放大的比例
flex-shrink
flex-wrap:nowrap 时项目缩小的比例
flex-basis
项目在主轴上初始所占宽度
align-self
- flex-start
- flex-end
- center
- baseline
- stretch
order
每个元素排序，数值越小越靠前
注意
项目在主轴上初始所占宽度
- flex:1 -> flex: 1 1 0%
（可扩大 可缩小 元素宽度可在缩小过程中挤压） - flex:auto -> flex: 1 1 auto
（可扩大 可缩小 元素宽度在缩小时候不得小于自身宽度） - flex:0 -> flex: 0 1 0%
（不可扩大 可缩小 元素宽度可在缩小过程中挤压） - flex:none -> flex: 0 0 auto
（不可扩大 不可缩小 元素宽度在缩小时候不得小于自身宽度）
5、BFC
(Block Formatting Contexts):块级格式化上下文，是一块独立且隔离的渲染区域
如何触发块级格式化上下文
- body根元素
- 浮动元素 float除了none以外的值 （left、right）
- 绝对定位元素 position （absolute、fixed）
- display 为 flex、inline-block、table-cell
- overflow 除了 visibility 之外的（hidden、auto、scroll）
可以解决什么问题
- 两个元素 外边距margin重叠问题
- 子元素浮动造成的父元素高度坍塌问题等（浮动清除）
6、如何CSS实现三角形、扇形
- 三角形 (利用 border 属性 和 transparent 实现)
- 上三角:
div { width:0; height:0; border:100px solid; border-color:transparent transparent red transparent; } - 下三角:
div { width: 0; height: 0; border: 100px solid; border-color:red transparent transparent transparent; } - 左三角:
div { width: 0; height: 0; border: 100px solid; border-color: transparent red transparent transparent; } - 右三角:
div { width: 0; height: 0; border: 100px solid; border-color: transparent transparent transparent red; }
- 上三角:
- 扇形
- 利用 border 属性 和 transparent 实现
- transform:rotate(deg);
- loading效果
7、transform、transition、animation什么区别
transform : 形变 - 元素复杂的变化参数
transition : 属性 - 一过性
animation : 动画 - 关键帧、往复性
-
transform 形变
transform-origin (移动原点)- translate (移动)
translate(x,y)translate3d(x,y,z)translateX()沿元素自身的x轴移动元素。translateY()沿元素自身的y轴移动元素。translateZ()沿元素自身的z轴移动元素。
- scale (缩放)
scale(x,y)scale3d(x,y,z)scaleX()scaleY()scaleZ()
- rotate (旋转)
rotate(deg)rotate3d(x,y,z,deg)rotateX(deg)rotateY(deg)rotateZ(deg)
- skew (倾斜)
skew()skewX()skewY()
-
transition: property duration timing-function delay;
- transition-property （ all 、name或者某个属性 ）
- transition-duration （ 完成过渡耗时 ）
- transition-timing-function （ 规定速度效果的速度曲线 ）
- transition-delay （ 过渡效果何时开始 ）
-
animation: nane duration timing-function delay iteration-count direction fill-mode;
- name 调用@keyframes定义好的动画
- animation-duration 播放动画所需时间
- timing-function 过渡动画类型（ease、ease-in-out）
- delay 执行之前等待时间
- iteration-count 执行播放次数（可无限次）
- direction 动画播放方向 normal、reverse、alternate
- play-state 动画的播放状态（running、paused）
- fill-mode 结束时的状态（none 回到没开始的状态、forwards 回到第一帧的状态、backwords 回到第一帧的状态）
8、常用两栏、三栏布局
两栏布局
- 定宽部分 float浮动 && 自适应部分 margin 撑开 && 父元素 触发BFC防止元素飞出
- 父元素 display:flex; && 定款部分 width 固定 && 自适应部分 flex:1;
三栏布局
- float + margin 方案：左(float:left;width:l;) && 右(float:right;width:r;) && 中(margin:0 r/2 0 l/2;)
- flex 方案: 父（display:flex;） && 中 (flex:1;) && 左(width:l;) && 右(width:r;)
- 定位方案：父（position:relative;）左position:absolute;
9、水平垂直居中的方案
子元素宽度、高度已知：
- text-align:center + margin-top:-(height/2)
子元素宽度、高度未知：
- text-align:center + transform:translate(-50%,-50%)
- position:absolute + left、right、top、bottom:0
- display:flex + justify-content : center; align-items : center;
原文链接：https://juejin.cn/post/7355677638881394723 作者：Ariel_jhy
