Javascript学习笔记面试(一)CSS部分

头像
米姐胡扯扯
    阅读 5 分钟

    一、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
    如下图：

    image.png

    2.margin纵向重叠的问题

    • 相邻元素的margin-top和margin-bottom会发生重叠
    • 空白内容的<p></p>也会重叠

    答案：15px

    3.margin 设置负值的问题

    image.png

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

    image.png
    image.png

    <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 取两者最小值
    前端css3html
    米姐胡扯扯
    9 声望6 粉丝

    市民小胡

    « 上一篇
    JavaScript设计模式（慕课网学习笔记）
    下一篇 »
    babel配置问题

    引用和评论

    推荐阅读
    头像
    关于时间、时间戳（个人学习笔记）

    米姐胡扯扯阅读 2.6k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 7阅读 5.5k

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.6k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.5k评论 1

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 11.7k

    头像
    LRU算法，你别跑，我就要吃透你

    夕水赞 3阅读 5k

    头像
    更强大、更灵活！ defineModel 重新定义双向绑定

    南玖赞 3阅读 5.2k

    0 条评论
    得票最新