前端CSS面试整理

1、标准盒模型

• 标准盒模型宽度 width=（内容宽度+内边距+边框），无外边距
• 不标准的宽度设置box-sizing：border-box
• width=内容宽度+内边距+边框

如果加box-sizing：border-box；那么就是border2+padding2（内边距）+content

2、margin 设置负值的问题

• margin-top和marginLeft设置负值。元素向上、向左移动
• margin-right设负值 右侧元素左移 自身不受影响
• Margin-bottom设负值 下方元素上移 自身不受影响

3、BFC理解和应用

block format context 块级作用域上下文

存在的意义就是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素；

常见形成BFC的条件

• float不是none
• display是flex、inline-block等
• position是absolute或fixed
• overflow不能是visible

BFC的常见应用场景

• 清除浮动（如果没有bfc 会造成浮动的子元素脱离父级盒子，加上bfc之后 浮动的元素也会在父级盒子之中）

4、float布局

圣杯布局和双飞翼布局

• 三栏布局 、中间一栏最先加载和渲染（内容最重要）

• 两侧内容固定、中间内容随着宽度自适应

• 一般用于PC网页

  实现方式

  • 使用float布局

  • 两侧使用margin负值，以便和中间内容横向重叠

  • 防止中间内容被两侧覆盖，一个用padding（圣杯布局） 一个用margin（双飞翼布局）

    清除浮动的方法

  .clearFix:after{
    content:'';
    display:table/block;
    clear:both;
  }
  .clearFix{
    *zoom:1/*兼容IE低版本\*/
  }
  

5、line-height如何继承

• 如果父元素的line-height为具体的尺寸值：继承父元素的line-height值
• 如果父元素的line-height为百分比：继承父元素的font-size*父元素的lineHeight
• 如果父元素的line-height为比例值：继承自身的font-size*父元素的line-heigh

6、rem布局

• px 绝对长度单位 最常用
• em 相对长度单位 相对于父元素 不常用
• rem 相对长度单位 相对于根元素 常用于响应式布局（根元素设置fontsize：100px（1个个rem等于100px），那么1px就是0.01rem）

7、网页视口尺寸

• 屏幕高度 window.sceen.height

• 可视高度 window.innerHeight

• body高度 window.body.clientHeight

  vh/vw

  • vh 网页视口高度的1/100
  • vw 网页视口宽度的1/100

  vmin/vmax

  • vmin 取两者最小值
  • vmax 取两者最大值

8、如何理解语义化

• 增加代码可读性
• 让搜索引擎更容易读懂

9、块状元素&&内联元素

• display:block/table;eg:div、h、ul、table、ol、p等
• display：inline/inline-block;eg:span、b、i、img、input、button

10、flex布局

    align-self 子项目交叉轴对其方式

11、居中对齐的实现方式

• 水平居中
  inline元素：text-align：center
  block元素：margin：auto
  absolute元素：left：50% ；marginLeft：-本身的1/2
• 垂直居中
  inline元素：line-heighheight
  absolute元素：top：50% ；marginTop：-本身的1/2 （必须知道宽度）
  absolute元素：top：50% ； left：50%；transforn（-50%,-50%）
  absolute元素：top,left,bottom,right=0;margin:auto
  flex定位：justify-content：center；aligin-item：center

12、响应式布局的常用方案

• media-query，根据不同的屏幕宽度设置根元素font-size
• rem实现