html css面试题整理

Ah_牛仔

2022年02月15日 22:25

html相关

1、如何理解HTML语义化？

利于搜索引擎（SEO）、代码阅读性好

2、块状元素 & 内联元素

display: block/table div h1 h2 table ul ol p等
display: inline/inline-block span img input button等

3、浏览器重绘、重排

网页生成过程：

HTML被HTML解析器解析成DOM 树
css则被css解析器解析成CSSOM 树
结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
生成布局（flow），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上

重排(也称回流): 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。触发：

添加或者删除可见的DOM元素
元素尺寸改变——边距、填充、边框、宽度和高度

重绘： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。触发：

改变元素的color、background、box-shadow等属性

重排优化建议：

分离读写操作
样式集中修改
缓存需要修改的DOM元素
尽量只修改position：absolute或fixed元素，对其他元素影响不大
动画开始GPU加速，translate使用3D变化

transform 不重绘，不回流是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

css相关

1、盒子模型宽度如何计算？

标准盒模型：属性width,height只包含内容content，不包含border和padding。offsetWidth = width + padding + border
IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。offsetWidth = width;
box-sizing:border-box; 可以将盒子转换为IE盒模型

2、margin纵向重叠问题

如下代码，AAA BBB之间的距离是多少？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin 纵向重叠</title>
    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

</body>
</html>
复制代码

相邻元素得margin-top和margin-bottom会发生重叠
空白内容的<p></p>也会重叠
答案： 15px

3、margin负值问题

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

4、BFC理解和应用

Block Format Context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素形成BFC的常见条件
float不是none
position 是 absolute或fixed
overflow 不是 visible
display 是 flex inline-block等 BFC的常见应用
清除浮动

5、float布局问题，以及clearfix

圣杯布局和双飞翼布局

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页实现：
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }

        #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;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>
复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        .col {
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            margin: 0 190px 0 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>
复制代码

手写clearfix

.clearfix:after {
    content: '';
    display: table;
    clear:: both;
}
复制代码

6、flex布局问题

常用语法

flex-direction
justify-content
align-items
flex-wrap
align-self 实现一个3色的骰子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 画骰子</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }

    </style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>
</html>
复制代码

7. css 定位

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

relative依据自身定位
absolute依据最近一层的定位元素定位

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

水平居中

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

垂直居中

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

8.line-height如何继承

写具体数值，如30px，则继承该值
写比例，如2/1.5，则继承该比例
写百分比，如200%，则继承计算出来的值

    <style>
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一行文字</p>
</body>
</html>
复制代码