前端面试题整理—

前端面试题整理——HTML/CSS

如何理解语义化：

对应的内容是用相应意思的标签，增加开发者和机器爬虫对代码的可读性。

块状元素和内联元素：

块状元素有：display:block/table；有div h1 h2 table ul ol p等，这些元素特点是独占一行。

内联元素：display:inline/inline-block；有span img input button等，内联元素不会独占一行，会挨着往后排，直到浏览器的边缘换行为止。

盒模型宽度计算：

#div{
        width:100px;
        padding:10px;
        border:1px solid #000;
        margin:10px;
}

offsetWidth = （内容宽度+内边距+边框），无外边距，因此#div的宽度是122px。

如果让offsetWidth等于100px，该如何做？

加一个：box-sizing:border-box;

margin纵向重叠问题：

p{
            font-size:16px;
            line-height:1;
            margin-top:10px;
            margin-bottom:15px;
}

相邻元素的margin-top和margin-bottom会发生重叠

空内容的<p></p>也会重叠，会被忽略掉

所以AAA和BBB之间的距离是15px

margin负值问题：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin负值问题</title>
    <style>
        .box1{
            width: 500px;
            height:100px;
            border:1px solid #000;
            padding:10px;
        }
        .left{
            width: 50px;
            height:50px;
            float:left;
            border:1px solid red;
            margin-left:-10px;
            margin-right:-20px;
        }
        .right{
            width: 50px;
            height:50px;
            float:left;
            border:1px solid blue;
        }
        .box2{
            width: 500px;
            height:200px;
            border:1px solid #000;
            padding:10px;
        }
        .top{
            width: 50px;
            height:50px;
            border:1px solid red;
            margin-top:-10px;
            margin-bottom:-20px;
        }
        .bottom{
            width: 50px;
            height:50px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
<h2>测试 margin-left、margin-right为负值</h2>
<div class="box1">
   <div class="left"></div>
   <div class="right"></div>
</div>
<h2>测试 margin-top、margin-bottom为负值</h2>
<div class="box2">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
</body>
</html>

View Code

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

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

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

BFC理解与应用：

<style>
        .left{
            float:left;
        }
        .bfc{
            overflow: hidden;
        }
</style>
<div class="bfc">
    <img class="left" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <p class="bfc">文字文字文字文字文字文字文字文字</p>
</div>

View Code

什么是BFC？如何应用

BFC全称是 Block format context，块级格式化上下文

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

形成BFC的常见条件：

float不是none。设置元素为float，该元素就有了BFC

position 是 absolute 或 fixed

overflow 不是 visible

display 是 flex、inline-block等

BFC的常见应用：

清除浮动

手写clearfix：

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

View Code

圣杯布局和双飞翼布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float布局</title>
    <style>
        .box1{
            padding:0;
            margin:0;
        }
        .box1 header,.box1 footer{
            height:20px;
            background:#ccc;
            text-align:center;
        }
        .box1 .main{
            padding-left:100px;
            padding-right:200px;
        }
        .box1 .content{
            height:50px;
            background:#666;
            float:left;
            width: 100%;
            margin-right:-100%;
        }
        .box1 .left{
            height:20px;
            background:yellow;
            width: 100px;
            float:left;
            margin-left:-100px;
        }
        .box1 .right{
            width:200px;
            height:20px;
            background: aquamarine;
            float:left;
            margin-left:100%;
        }
        /*手写clearfix*/
        .clearfix:after{
            content:'';
            display: block;
            clear:both;
        }
        /*
        *zoom:1;兼容IE低版本
        */
    </style>
</head>
<body>
<!--圣杯布局-->
<div class="box1">
    <header>header</header>
    <div class="main clearfix">
        <div class="content">content</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</div>
<!--双飞翼布局-->
<style>
    .box2{
        padding:0;
        margin:0;
    }
    .box2 #main{
        width: 100%;
        height:200px;
        background:#ccc;

    }
    .box2 #main-wrap{
        margin:0 200px 0 100px;
    }
    .box2 #left{
        width:100px;
        height:100px;
        background:#0000FF;
        margin-left:-100%;
    }
    .box2 #right{
        width:200px;
        height:100px;
        background:red;
        margin-left:-200px;
    }
    .col{
        float:left;
    }
</style>
<div class="box2">
    <div id="main" class="col">
        <div id="main-wrap">main</div>
    </div>
    <div id="left" class="col">
        left
    </div>
    <div id="right" class="col">
        right
    </div>
</div>
</body>
</html>

View Code

圣杯布局和双飞翼布局的目的

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

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

一般用于PC页面

圣杯布局和双飞翼布局的技术总结

使用float布局

两侧使用margin负值，以便和中间内容横向重叠

防止中间内容被两侧覆盖，一个用padding一个用margin

flex布局实现一个三点色子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        .box{
            width: 100px;
            height:100px;
            border:1px solid #000;
            display: flex;
            justify-content: space-around;
            align-items:flex-start;
        }
        .item{
            width: 20px;
            height:20px;
            background:#000;
            border-radius:50%;
        }
        .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>

View Code

常规使用属性：

flex-direction：主轴方向
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
flex-wrap：是否换行
align-self：子元素在交叉轴对齐方式

absolute和relative定位：

relative根据自身定位

absolute依据最近一层的定位元素定位，定位元素有：absolute、relative、fixed、body

居中对齐的实现方式：

水平居中

inline元素：text-align:center

block元素：margin:auto

absolute元素：left:50% 加 margin-left：负值

垂直居中

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

absolute元素：top:50% 加 margin-top:负值这个方法需要知道元素的宽高

absolute元素：top:50%;left:50%;transform:translate(-50%,-50%)

absolute元素：top,left,bottom.right都设置为0 加 margin:auto

line-height如何继承：

写具体数值，如30px，则继承该值（比较好理解）如下代码，答案是30px

body{
            font-size:20px;
            line-height:30px;
}
p{
            font-size:16px;
}

View Code

写比例，如2或1.5，则继承该比例（比较好理解）如下代码如果是2，答案是32px

body{
            font-size:20px;
            line-height:2;
}
p{
            font-size:16px;
}

View Code

写百分比，如200%，则继承计算出来的值（考点）如下代码如果是200%，答案是40px

body{
            font-size:20px;
            line-height:200%;
}
p{
            font-size:16px;
}

View Code

网页视口尺寸：

window.screen.height 屏幕高度

window.innerHeight 网页视口高度

document.body.clientHeight body高度

放弃安逸，持续努力——成长