前端面试题整理 - HTML & CSS 篇

以前都是准备离职的时候才开始准备面试题。最近想着未雨绸缪，在平时就整理好，也不必临时抱佛脚了。今天的部分是全部HTML和CSS部分的核心面试题。

如何理解语义化?

-w1060

答：

用对应的标签去写对应的内容，比如h标签，p段落...
可以让人更容易看懂，增加代码可阅读性
让搜索引擎更容易阅读，增强SEO

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

块级元素： display：block/table的元素比如：div、h1、h2、table、ul、ol、p

内联元素： display:inline/inline-block的元素比如：span、img、input、button

盒模型的宽度如何计算？

-w819

答：offsetWidth = (内宽 + 内边距 + 边框)。不含外边距122px; 如果加上box-sizing:border-box,offsetWidth就是100px;

margin纵向重叠的问题？

-w641

答：相邻元素的margin-top和margin-bottom会发生重叠。

margin是负的问题?

对margin的top、left、bottom、right设置负值，会如何？

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

BFC的理解和应用？

什么是BFC？如何应用？

答：Block format Context：块级格式化上下文

它是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

形成BFC的条件如下：

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

使用案例：清除浮动

Float布局的问题，以及clearfix

如何实现圣杯布局和双飞翼布局？

什么是圣杯和双飞翼布局？

三栏布局，中间一栏优先加载和渲染
两侧内容固定，中间内容随着宽度自适应
一般用于PC网站

案例如下： -w541

圣杯技术点总结

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

#center {
    background-color: #ccc;
    width: 100%;
}
#left {
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -100%;
    right: 200px;
}
#right {
    background-color: red;
    width: 150px;
    margin-right: -150px;
}

-w547

手写clearfix

/* 手写 clearfix */
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

双飞翼布局

-w295

-w319 效果： -w395

如何实现双飞翼布局？

1、左侧float：left 2、中间的左右预留空白 -w234 3、左侧通过margin为负，悬浮到左侧 4、右侧margin-left负，悬浮到右侧

-w296

用flex绘制三点的色子

-w740

align-self是什么意思？

居中对齐弹性对象元素内的某个项：

#myBlueDiv
{
    align-self:center;
}

-w854

absolute和relative根据什么定义？

relative 依据自身定位
absolute 依据最近的一层的定位元素（absolute，relative，fixed，或者body ）进行定位。

居中对齐有哪些实现方式？

水平居中

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

垂直居中

inline元素: line-height
absolute元素: top: 50% + margin-top: 负值;
absolute元素: transform(-50%, -50%);
absolute元素: top，left，bottom，right = 0; margin: auto;

line-height的继承问题？

-w326

答案：40px

line-height的继承规则如下：

如果具体的数字，就继承数字
如果写成2 或者 1.5，也是继承2或者1.5
如果写成百分比，则继承百分比计算后的值

rem是什么？rem和em、px对比如何？

rem是一个长度单位。

px是绝对长度单位，最常用
em是相对长度单位，相对于父元素。这个不是很常用
rem也是相对长度单位，相对于根元素(html)的长度单位计算，常常用于响应式布局

rem如何实现响应式？

media-query，根据不同的屏幕宽度设置根元素(html)的font-size
rem基于根元素做长度计算

代码如下：

@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 110px;
    }
}

body {
    font-size: 0.16rem;
}
#div1 {
    width: 1rem;
    background-color: #ccc;
}

通过vw/vh如何实现响应式？

通过rm实现是有一定弊端的，因为rem实现响应式具有阶梯性。

了解vw/vh的前提

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

-w479

vh指的是网页视口高度的1/100

vw指的是网页视口宽度的1/100

vmax取vh和vm两个的最大值，vmin则反之。