乐趣区

关于前端:Javascript学习笔记面试一CSS部分

jiezi

一、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会产生重叠
  • 空白内容的 <p></p> 也会重叠

答案：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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 圣杯布局 </title>
    <style type="text/css">
        .container {padding: 0 300px 0 200px; /*  重点 */}

        .main,
        .left,
        .right {
            min-height: 130px;
            float: left; 
            position: relative;
        }

        .main {
            background-color: blue;
            width: 100%;
        }

        .left {
            background-color: aqua;
            width: 200px;
            margin-left: -100%;  /*  重点 */
            left: -200px; /*  重点 */
        }

        .right {
            background-color: aquamarine;
            width: 300px;
            margin-right: -300px; /*  重点 */
        }
    </style>
</head>

<body>
    <div class="container">
          <div class="main">main</div>
          <div class="left">left</div>
          <div class="right">right</div>
    </div>

</html>

双飞翼布局： : 略

手写 clearfix

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

6. flex 布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 色子 </title>
    <style>
        .box {
            border: 2px solid #ccc;
            width: 200px;
            height: 200px;

            display: flex;
            justify-content: space-around;
        }

        .item {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: #ccc;
        }

        .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>

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


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 程度居中 </title>
    <style>
        .box {
            width: 200px;
            height: 600px;
            border: 2px solid #ccc;
            position: relative;
        }

        .box div {
            height: 100px;
            border: 1px solid #000;
            margin-bottom: 10px;
        }

        .item1 {
            text-align: center;     /*  重点 */
            line-height: 100px;
        }
        .item2 {
            width: 100px;
            margin: auto; /*  重点 */
        }
        .item3 {
            position: absolute;
            width: 100px;
            left: 50%;/*  重点 */
            margin-left: -50px;    /*  重点 */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item1">
            <span> 一段文字 </span>
        </div>
        <div class="item2">this is block</div>
        <div class="item3">this is absolute</div>
    </div>
</body>

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 取两者最小值
退出移动版