html css面试题整理

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对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。 触发:

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

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

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

重排优化建议:

  1. 分离读写操作
  2. 样式集中修改
  3. 缓存需要修改的DOM元素
  4. 尽量只修改position:absolutefixed元素,对其他元素影响不大
  5. 动画开始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依据最近一层的定位元素定位

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

  1. 水平居中
  • inline元素: text-align: center
  • block元素: margin: auto;
  • absolute元素: left: 50% + margin-left负值
  1. 垂直居中
  • 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>
复制代码

p标签行高将会是多少? 答案: 40px

9. css 响应式

rem是什么?

  • rem是个长度单位
  • 根据根元素的font-size大小,与媒体查询结合,常用与响应式布局

响应式布局的常见方案?

分类:
前端
标签: