一、HTML面试题

1、如何理解语义化？

我的回答：语义化就是实现同样的功能，尽量使用html里面section，main，这些约定俗成的结构去书写dom结构。这样方便理解。

优化以后的回答：写主体结构使用main，section，footer，标题，h2,h3,列表使用ul,li,文字使用p标签。

通过遵守同样的规则，使彼此可以看懂的彼此表达的意思，这也是语言的作用，所以被称为语义化。总得来说，就是方便看懂，便于搜索引擎SEO。

2、默认情况下，哪些元素是块级元素，哪些是内联标签？

我的回答： div，p,ul,ol 等独占一行，内联元素span img button input不会独占一行。

二、CSS面试题

1、盒模型的计算

offsetWidth = 宽度+内边距+边框，无外边距;
使用border-box
如下图：

2.margin纵向重叠的问题

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的也会重叠

答案：15px

3.margin 设置负值的问题

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

4、BfC的理解和应用？

Block format context，块级格式化上下文。
一块独立渲染区域，内部的元素渲染不会影响到边界以外的元素。

最常应用：清除浮动；

形成BFC的常见条件：

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

设计的目的就是它要能够包容它内部的元素，里面的元素不要乱跑，祸害别人。不要脱离文档流。好像一个史莱姆，把什么东西都吞进去。

清除浮动的方法

推荐使用伪元素clearfix:after

.clearfix{
    content:'';
    height:0;
    display:block;
    clear:both;
    visibility:hidden
    
}

5、float布局

如何实现圣杯布局和双飞翼布局？（这是谁起的破名字）

圣杯布局
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding，一个用margin





    
    
    圣杯布局
    



    
        　　main
        　　left
        　　right

双飞翼布局： :略

手写clearfix

.clearfix:after{
    display:table;
    content:'';
    clear:both;
}
.clearfix{
    *zoom:1;
}

6. flex布局


    
    
    色子

7、CSS 定位

absolute 和relative分别依据什么定位？

定位元素：

absolute，relative，fixed
body

8、水平居中和垂直居中

我的回答：
1.flex:

    .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;

            display: flex;
            justify-content: center;
        }

        .item {
            align-self: center;
            width: 100px;
            height: 100px;
            border: 1px solid pink;
        }


    
    
    水平居中
    



    
        
            一段文字
        
        this is block
        this is absolute

absolute终极方案：

top：0;
right：0;
bottom:0;
left:0;
margin:auto;

9、line-height的继承问题

写具数值，如30px,则继承该值 （比较好理解）
写比例，如2/1.5 ，则继承该比例（比较好理解）
写百分比，如200% 则继承计算出来的值（考点）

10、响应式布局

rem

rem 相对于根元素的长度单位
em 相对于父元素不好用也不常用
px 绝对长度单位

结合media-query ，检测宽度，然后设置根元素的font-size，以此作为标准宽度

vw/vm

针对rem的弊端-具有阶梯性

网页视口尺寸

window.screen.height; // 屏幕高度
window.innerHeight; // 去导航栏 网页视口高度
document.body.clientHeight; // 文档的高度

vw 视口宽度的百分之一
vh 视口高度的百分之一
vmax 取两者最大值
vmin 取两者最小值

Javascript学习笔记面试(一)CSS部分