CSS面试题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

前端CSS

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.盒模型宽度计算：

请问div1的offsetWidth多大？

<!-- 如下代码，请问div1的offsetWidth多大？-->
    <style type="text/css">
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
        }
    </style>
    <div id="div1">
        this is div1
    </div>

答案与扩展：
offsetWidth=(内容宽度 + 内边距 + 边框)，无外边框
clientWidth = 内容宽度+左右padding

如果让offsetWidth等于100px,该如何做？

答案：box-sizing: border-box;

2.margin纵向重叠

    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>

    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

答案：15px 中间多层次p标签 都被忽略

3.讲一下margin负值问题

答案：

1. margin-top和margin-left负值，元素向上、向左移动
2. margin-right负值,右侧元素左移，自身不受影响
3. margin-bottom负值，下方元素上移，自身不受影响

4.BFC理解和应用

答案：块级格式化上下文；一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。

形成BFC的常见条件：

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

BFC常见应用：

清除浮动

5.float布局

圣杯布局和双飞翼布局的目的：

1.三栏布局，中间一栏最先加载和渲染（中间内容一般最重要）
2.两侧内容固定，中间内容随着宽度自适应
3.一般用于PC网页

圣杯布局和双飞翼布局的技术总结：

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，用padding 或者margin 留出两侧位置

6.手写 clearfix

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

7.flex布局：

常用语法：

flex-direction 决定主轴的方向（即项目的排列方向）。
justify-content 定义了项目在主轴上的对齐方式。
align-items 定义项目在交叉轴上如何对齐。
flex-wrap 如果一条轴线排不下，如何换行.
align-self 允许单个项目有与其他项目不一样的对齐方式

8.absolute和relative

relative依据自身定位
absolute 依据最近一层的定位元素定位  定位元素包括：absolute relative fixed  
都没有就根据body定位

9.水平居中

inline元素：text-align:center
block元素:margin：auto
absolute元素：left：50% + margin-left 负值

10.垂直居中

inline元素：line-height的值等于height值
absolute元素：top:50% + marign-top负值   *必须知道子元素高度宽度
absolute元素：transform: translate(-50%, -50%)
absolute元素：top,left,bottom,right=0; + margin: auto

11.line-height如何继承?

写具体数字，如30px，则继承该值
写比例，如2/1.5,则继承该比例    具体值就等于font-size * 该比例
*写百分比，如200%，则继承计算出来的值  (注意下这个坑~)

12.rem

rem是什么？

em ，相对长度单位，相对于父元素；
rem，相对长度单位，相对于根元素，常用于响应式布局。

它的弊端是？

”阶梯性“设置   可以用vw/vh去弥补

13.vw/vh

vw网页视口宽度的1/100
vh网页视口高度的1/100
vmax取上面两个最大值；vmin取上面两个最小的值

网页视口尺寸？

window.screen.height   //屏幕高度
window.innerHeight //网页视口高度
document.body.clientHeight //body高度

14.响应式布局的常用方案

media-query , 根据不同的屏幕宽度设置根元素font-size
rem，基于根元素的相对单位
js脚本设置font-size：
    <script>
      var width = document.documentElement.clientWidth || document.body.clientWidth;
      var ratio = width / 375;
      var fontSize = 100 * ratio;
      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
    </script>