前端css3新增【面试题】_css3新增面试问题-CSDN博客

px和em的区别
- px相对于屏幕分辨率，是一个绝对单位，
- em是一个相对单位，具体大小相对父元素进行计算
vw和vh是什么？
- vw：可视窗口宽度
- vh：可视窗口高度
介绍BFC及其应用
- BFC：独立的布局容器。容器内部与外部互不影响
- 触发BFC的方式：
  1. 设置浮动：
    - overFlow：不为visible
    - position：absolute、fixed
    - display：inline-block、table-cell、flex、inline-flex
    - float：不为none
- 应用：
  1. 解决浮动元素令父元素高度塌陷的问题
  2. 解决非浮动元素被浮动元素覆盖的问题
  3. 解决外边距垂直方向重合的问题
flex布局如何使用
- 主轴就是x轴，交叉轴就是y轴
- 指定display：flex；即可开启flex弹性布局
- flex-direction：指定主轴方向，是水平还是垂直
- flex-wrap：如何换行
- flex-flow：flex-direction和flex-wrap的简写形式；如flex-flow：row nowrap
- justify-content：水平如何对齐
- align-items：垂直如何对齐
- align-content：当有多个轴线时如何对齐
- 子项属性：
  - order: 定义项的排列顺序，数值越小，排名越靠前
  - flex-grow：定义项目放大比例
  - flex-shrink：定义项目缩小比例
  - flex-basis：项目占据主轴空间
  - flex：时flex-grow、flex-shrink、flex-basis的简写；默认 0 1 auto；
  - align-self：定义项自己本身的对齐方式
分析比较Opacity：0，visibility：hidden，display：none优劣和使用场景
- 结构
  - display:元素完全消失，不占据空间
  - visibility：元素不消失，占据空间
  - opacity：元素不消失，占据
- 继承
  - 非继承：display：none，opacity：0，其后代元素跟着一起消失，修改后代属性不可见
  - 继承：visibility：hidden由于后代节点也继承了这个属性，那么修改后代属性可让他变得可见
- 性能
  - display：none：性能消耗较大，造成文档回流
  - opacity：0 ：性能消耗小，会造成重绘
  - visibility:hidden：只会造成本元素的重绘，性能消耗小

如何使用css或js实现多行文本溢出效果，考虑兼容性

单行：

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;//行数
overflow:hidden;

居中为什么要使用transform，为什么不用marginLeft/Top
- transform不会造成重绘，marginLeft/Top会造成重绘
介绍下粘性布局
- css3新增属性，设置sticky后，当元素要移动到屏幕外的时候，定位变成fixed，根据top，left值来进行定位，不脱离文档流。他相对的是离他最近的具有滚动框的祖先元素
说出space-between 和space-around的区别
- space-between：两端对齐
- space-around：每个子项目的左右margin相等
css3中transition和animation的属性分别有哪些
- transition：过度动画
  - transition-property：指定过度的css属性
  - transition-duration：指定过度时间
  - transition-timing-function：指定过度函数
  - transition-delay：指定过度延迟时间
- animation：关键帧动画
  - animation-name：指定要绑定到选择器的关键帧的名字
  - animation-duration：动画需要多少秒完成
  - animation-timing-function：设置动画如何完成一个周期
  - animation-delay：动画间隔时间
  - animation-iteration-count：定义动画播放次数
  - animation-fill-mode：动画不播放的时候，应用到元素的样式
  - animation-play-state：指定动画的运行或暂停

用css写一个三角形

//原理：div宽高设置为0，然后用border来撑开宽高。在去设置他的某个边框为透明
	div{
		width:0;
		height:0;
		border:10px solid red;
		border-top-color:transparent;
		border-left-color:transparent;
		border-right-color:transparent;
	}

清除浮动的方法

浮动元素后边追加一个空div，并添加样式
```
{
	clear:both;
	height:0;
	overflow:hideen;
}
```

伪元素清除浮动

.floatBox::after{
	content:"";
	display:block;
	visibility:hidden;
	clear:both;
}

什么是重绘，重排，如何触发重绘重排
- 任何改变用来构建dom树的信息都会导致重绘，重排。如：
  1. 添加，修改，删除dom节点
  2. display：none;
  3. visibility:hidden;只会触发重绘
  4. 移动动画，或添加动画
  5. 添加一个样式表，调整样式属性
  6. 调整窗口大小，调整字号，或者滚动
- 重绘：元素的外观改变会导致重绘，顾名思义就是重新绘制
- 重排：重新生成布局或重新排列元素
- 注意：重绘不一定重排，重排一定会重绘
图片的优化
- 小图用base64
- 装饰类图片：如箭头等，可以用css生成
- 使用cdn加载图片
css3新增了什么？大概罗列一下？
```
- 新增选择器

  1. p~ul：选择前面有p元素的所有ul元素

  2. a[src^="https"]：选择src的值为https开头的每个a元素

  3. a[$src=".pdf"]：选择src的值以pdf结尾的每个a元素

  4. a[src* = "abc"]：包含src值包含abc的每个a元素

  5. p:first-of-type：选择父元素的首个p元素；

     ```
     比如这个结构就是选中内容为1的元素
     <body>
     <p>1</p>
     <div>
     	<p>1</p>
         <p>2</p>
         <div>
         	<p>1</p>
             <p>2</p>
         </div>
     </div>
     </body>
     ```

  6. p:last-of-type：选择父元素的最后一个p元素，跟first相反

  7. p:only-of-type：选择父元素里只有一个p元素的容器

  8. p:only-child：选择其属于父元素的唯一子元素的每个p元素

  9. p:nth-child(2)：选择其属于父元素的第二个子元素的每个p元素

  10. p:nth-last-child(2)：与上面相反

  11. p:nth-of-type(2):选择属于其父元素第二个p元素的每个元素
  
  12. p:nth-last-type(2):与上面相反
  
  13. p:last-child：选择属于其父元素最后一个子元素每个p元素
```
- 新样式：
  1. 边框：
    - 圆角：border-radius
    - 阴影：box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内外阴影
    - 图片边框：border-image
  2. 背景：
    - background-clip：背景图像区域包括哪个？
      - border-box:只渲染到边框，如果设置了边框样式，边框样式的层级会比他高
      - padding-box:只渲染到内边距
      - content-box：只渲染到内容
    - background-origin：图像以什么基准进行左上角对齐
      - border-box
      - padding-box
      - content-box
    - background-size:背景大小
      - contain：自适应缩小
      - cover：自适应填满容器
      - 100px 100px：固定高宽
      - 50% 50%：百分比高宽
  3. 文字：
    - word-wrap（换行）：normal(默认)，break-all(允许单词内换行)
    - text-overflow（文字溢出）：clip(直接裁剪)，ellipsis(省略号)
    - text-shadow：跟盒子阴影一样
  4. transition(过度属性)：过度css属性，持续时间，时序函数，间隔时间
    - transition-property：css属性
    - transition-duration：动画时间，s为单位
    - transition-timing-function：linear
    - transition-delay：间隔时间
  5. transform（2d/3d转换属性）
    - tranform可以旋转缩放，倾斜或者平移
    - 属性：
      - transform：translate（x,y,z) //平移
      - transform:scale(x,y,z) //缩放
      - transform:rotate(x,y,z) //旋转
      - transform:skew(x,y) //倾斜
  6. animation：动画
    - animation-name：动画名称
    - animation-duration：持续时间
    - animation-timing-function：动画时间函数
    - animation-delay：动画间隔时间
    - animation-iteration-count：执行次数
    - animation-direction：动画执行方向
    - animation-paly-state：动画播放状态
    - animation-fill-mode：动画填充模式
  7. 渐变：
    - linear-gradient（线性渐变）：direction(方向)，颜色1，颜色2…
    - radial-gradient(径向渐变)：deg（角度），color1，color2
  8. calc方法：宽度，高度计算方法，除了+号其他加空格，实例：width：calc（100vw - 20px）