前端面试HTML/CSS系列

Danan
318 阅读6分钟

前端面试题

一、Html面试题

1、如何理解Html语义化？

主要有两点：一个是增加代码可读性，另一个是有利于搜索引擎优化（SEO）；

2、块状元素 & 内联元素

块状元素：在页面上独占一行，如：

display: block/table; 有div、p、table、h1~h5、ul、ol等。

内联元素： 在页面上排列成一行，超出浏览器则换行，如：

display: inline/inline-block; 有 span、img、button、input等

二、CSS面试题

1、盒模型的宽度计算

问题： div1 的 offoffsetWidth 是多少？

<style type="text/css">
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
            // box-sizing: border-box;
        }
</style>
**    **
<div id="div1">
    this is div1
</div>

答案： 122px；

解析： offsetWidth = (内容宽度 + 内边距 + 边框)， 无外边距；

补充： 如果让offsetWidth 等于100px, 只需要多设置一下： box-sizing: border-box;

offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）

clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

style.width         //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

style.height       //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

scrollWidth       //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

scrollHeigh       //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

2、margin纵向重叠问题

问题： AAA 与 BBB 之间的纵向距离是多少？

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

```
<body>
    
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

</body>
```

答案： 15px；

解析： 相邻元素的 margin-top 和 margin-bottom 会发生重叠； 空白内容的

也会重叠；

3、margin 负值的问题

margin-top 和 margin-left 为负值，元素向上、向左移动；

margin-right 为负值，右侧元素左移，自身不受影响；

margin-bottom 为负值， 下方元素上移，自身不受影响

4、BFC的理解和应用

4-1、什么是BFC，如何应用？

Block format content, 块级格式化上下文；

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

4-2、 BFC 的布局规则

· 内部的Box会在垂直方向，一个接一个地放置。

· Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

· 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

· BFC的区域不会与float box重叠。

· BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

4-3、形成BFC的常见条件

· float 不为none

· position 为absolute 或者 fixed

· overflow 不为 visible

· display 是 block 或者 inline-block 等

4-4、BFC的常见应用

· 清除浮动

5、float布局

5-1、如何实现圣杯布局和双飞翼布局？

两种布局的目的：

· 三栏布局，中间一栏最先加载和渲染（内容最重要）

· 两侧内容固定，中间内容随着宽度自适应

· 一般用于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 {
            clear: both;
            text-align: center;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container">
        <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>

5-2、 手写clearfix

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

6、flex布局

容器的属性，常用的有6个， 分别是：

属性解释参数
flex-direction决定主轴的方向，即项目的排列方向row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
flex-flow是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。
justify-content定义了项目在主轴上的对齐方式具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 · flex-start（默认值）：左对齐； · flex-end：右对齐； · center： 居中；· space-between：两端对齐，项目之间的间隔都相等； · space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；
align-items项目在交叉轴上如何对齐具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下: - flex-start：交叉轴的起点对齐。- flex-end：交叉轴的终点对齐。- center：交叉轴的中点对齐。- baseline: 项目的第一行文字的基线对齐。- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch该属性可能取6个值，除了auto，其他都与align-items属性完全一致

问题： 请使用flex布局实现一个三个点的色子？如图所示：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 5px solid #cccccc;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            justify-content: space-around;
        }
        .item {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #FF0000;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

7、定位

7-1、absolute 和 relative 分别依据什么定位？

· relative 依据自身定位

· absolute 依据最近一层的定位元素定位 （如： relative、absolute、fixed，如果上层没有，则直接依据body定位）

7-2、居中对齐有哪些实现方式？

7-2-1、 水平居中

inline元素： text-align： center

block元素： margin: auto

absolute元素： left: 50% + margin-left: 负值（子元素宽度的一半）

7-2-2、 垂直居中

inline元素： line-height 的值等于 height 值

absolute元素： top: 50% 和 margin-top: 负值(子元素高度的一半)

absolute元素： transform(-50%, -50%)

absolute元素： top = 0,left = 0, right = 0, bottom = 0, 和 margin: auto

8、图文样式

8-1、line-height 如何继承？

问题： p 标签的行高是多少？

<style>
    body {
        fonr-size: 20px;
        line-height: 200%;
    }
    p {
        font-size: 16px;
    }
</style>
<body>
    <p>AAA</p>
</body>

答案： 40px; ( 20 X 200% = 40px )

原因：

· 如果ling-height 写具体值， 如 30px, 则继承改值

· 如果lineg-height 写成比例，如 2/15，则继承改比例

· 如果ling-height 写百分比， 如200%， 则继承计算出来的值

9、CSS响应式

9-1、rem 是什么 ？

rem 是一个长度单位

· px 是绝对长度单位，最常用的

· em 是相对长度单位， 相对于父元素， 不常用

· rem 是相对长度单位， 相对于根元素，常用于响应式布局

9-2、响应式布局的常见方案？

· media-query(媒体查询)，根据不同的屏幕宽度设置根元素 font-size;

<!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">
        @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;
        }

    </style>
</head>
<body>
    <div id="div1">
        this is div
    </div>
</body>
</html>

· rem, 基于根元素的相对单位

9-3、 vw/vh

rem 的弊端：

rem 具有‘阶梯’性

网页视口尺寸：

· window.screen.height // 屏幕高度

· window.innerHeight // 网页视口高度

· document.body.clientHeight // body 高度

vw/vh：

· vh = 网页视口高度的 1/100

· vw = 网页视口宽度的 1/100

· vmax 取两者最大值

· vmin 取两者最小值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vw vh test</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            background-color: red;
            width: 10vw;
            height: 10vh;
        }
    </style>
</head>
<body>
    <p>vw vh 测试</p>
    <div id="container">
    </div>

    <script>
        // window.innerHeight === 100vh
        // window.innerWidth === 100vw
    </script>
</body>
</html>
avatar
文章
阅读
粉丝