面试题之CSS第一篇

高频CSS面试题之第一篇

简述BFC及其应用

• 指一个独立的布局环境，BFC内部元素布局与外部互不影响

• 如何触发BFC**
  float的值非none
  overflow的值非visible，或者设置为：auto、scroll、hidden
  position的值：absolute、fixed

• 常见的BFC的应用
  解决浮动元素令父元素高度坍塌的问题
  解决非浮动元素被浮动元素覆盖问题
  解决外边距垂直方向重合问题

position有哪些值？分别根据什么定位

• static：默认值，没有定位
• fixed：固定定位，相对于浏览器定位
• relative：相对于自身定位，不脱离文档流
• absolute：相对于第一个有relative的父元素定位，脱离文档流

display:none和visibility:hidden的区别

• 占用位置的区别：display:none不占位置，vibility:hidden占位置
• 重绘和回流的问题
  都会产出重绘但display:none会产生一次回流

css的sprite是什么？有什么优缺点

• 把多个小图标合并成一张大图片
• 优点：减少了http请求的次数，提升了性能
• 缺点：维护性比较差

opacity和rgba区别

• 共同性：实现透明效果
  opacity：0-1, 0表示完全透明，1表示不透明
  rgba:R-红 G绿 B 蓝

• 区别：opacity会继承父元素opacity的属性，而rgba不会

px和em的区别

• px：是一个绝对单位，相对于屏幕分辨率而言的，但同时具有一定的相对性，因为在不同设备之间每个设备像素所代表的物理长度是可以变化的，这点表示出它的相对性
• em：是一个相对长度单位，具体的大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示80px，0.5em表示40px

vw和vh是什么

• 是css3的新单位，即view width（可视窗口宽度）view height（可视化窗口高度）
• 1vw等于可视窗口宽度的百分之一
• 1vh等于可视窗口高度的百分之一

分析比较opacity:0、visibility:hidden、display:none的优劣和适用场景

• 结构
  display:none：会让元素完全从渲染树中消失，渲染时不占任何空间，不能点击
  visibility:hidden：不会让元素从渲染树消失，渲染元素会继续占据空间，只是内容不可见，不能点击
  opacity:0 ：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
• 继承
  display:none和opcity:0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示
  vibility:hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility:visble可以让子孙节点显示
• 性能
  display:none：修改元素会造成文档回流，读屏器不会读取display：none元素内容，性能消耗较大
  visibility:hidden和opcity:0：修改元素只会造成本元素的重绘，性能消耗少

清除浮动有哪些方法

• 触发BFC
• 在浮动元素下方多创建一个盒子添加样式clear:both
• 使用伪元素：after{cotent:'',display:block;clear:both}

双飞翼布局的实现方案

• 大概意思是一个左中右布局占满屏幕，其中左右2块固定宽，中级自适应，要求先加载中间块
• 创建三个盒子，其中中间的盒子套2个盒子，三个盒子全部设置浮动，左右盒子固定宽高，中间盒子宽度设置为100%，高度与其他2个盒子一致即可。最后设置左边盒子margin-left:-100%，右边盒子设置margin-left:-自身宽度，

link和@import区别

• 兼容性：link比@import好
• 加载顺序有差别，浏览器先加载link和再加载@import

png、jpg、gif图片格式解释一下分别什么时候使用

• png：无损压缩，尺寸体积比jpg、jpeg大，适合做小图标
• jpg：采用压缩算法，有一点失真，比png体积要小，适合中大图标
• gif：一般做动图
• webp：同时支持有损和无损压缩，相同质量的图片，webp具有更小的体积，兼容性不是很好

说出space-between和space-around的区别

• 按水平方向来说，space-between是两端对齐，在左右两侧没有边距，而space-around是每个子项目左右方向的margin相等，所以两个item中间的边距会比较大

用css画三角形

• 用边框画，不需要的弄成透明的就可以了（transparent）

css 优先级

• ！import > 内联样式 > ID > class > 标签 > 通配

line-height 和heigh的区别

• height：元素的高度值，就是盒子的高度
• line-height：每一行文字的高度，文字换行则整个盒子会被撑大

img的title和alt的区别

• title：鼠标移入图片显示的值
• alt：图片无法加载是显示的值
• 作用：为了增强seo效果要加入alt属性来描述这张图是什么内容或者关键字，让爬虫能够能好的找到

flex布局如何使用

• flex为弹性布局，指定display:flex即可
• 容器有以下属性：flex-direction flex-wrap flex-flow jutify-content align-items align-content
• flex-direction 属性决定主轴的方向
• flex-wrap:决定一条轴排不下，如何换行
• flex-flow:flex-direction和flex-wrap属性的简写，默认值为row和nowrap
• jutifiy-content ：定义了项目在主轴上的对齐方式
• align-item：定义了项目在交叉轴上如何对齐
• align-content：定义了对根线的对齐方式，如果项目只有一根轴线，该属性不起作用

说一说盒模型

css盒模型定义了盒的每个部分，包含margin border padding content ,根据盒子大小的计算方式不同盒模型分成两种 ,标准盒模型和怪异盒模型

• 标准模型：给盒子设置width和height，实际上设置的是content box，要加上padding 和 border 再加上设置的宽高一起才是盒子的大小
• 怪异盒模型：给盒子设置width和height，包含了padding和border,设置的width和height 就是盒子的实际大小
• 默认情况下，盒子模型就是标准模型
• 设置标准盒模型：box-sizing:content-box
• 设置怪异模型：box-sizing: border-box