前端基础面试题@CSS篇_前端基础布局样式面试题-CSDN博客

随笔

最近出去面了一次试。去之前信心满满，去之后灰头土脸，因为连最简单的“css居中方式有多少种”、“说说js数据类型”这种入门问题竟然回答的支支吾吾，也怪不得面试官20分钟就优雅的把我送了出来。

痛定思痛，总结了一些基础面试题，望壮士你出门迎敌时，不要像我一样尴尬……

清除浮动方式

1、使用伪类。
也可以在父级标签最后添加一个div，div中的属性同伪类。原理其实和伪类是一样的，都是利用clear：both

.father :after {
	clear:both;
	content:"";
	display:block;
}
.father{
	zoom:1;//IE专有属性，解决ie6、7浮动问题
}

2、父级标签触发BFC(下面有专门介绍)

.father {
	overflow:auto;
	zoom:1;//IE专有属性，解决ie6、7浮动问题
}

未知宽高的元素实现水平垂直居中

方法一：父元素dispaly:table,子元素display:cell-table。

优势：父元素可以动态改变高度。
劣势：table属性容易造成多次reflow,IE8以下不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法一</title>
</head>
<style>

.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>

方法二：利用空元素或伪类

下面代码中的注释部分为替代after伪类的另一种写法，原理一样

优点：兼容性好
缺点：多出来个空元素、麻烦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        background: #92b922;
    }
    .test {
        background: #de3168;
        display: inline-block;
        color: #fff;
        padding: 20px;
    }
    .wrap:after {
        display: inline-block;
        content: '';
        width: 0px;
        height: 100%;
        vertical-align: middle;
    }
    /* .vamb{
        display: inline-block;
        width: 0px;
        height: 100%;
        vertical-align: middle;
    } */
    </style>
    <div class="wrap">
            <!-- <b class="vamb"></b> -->
        <div class="test">
            水平垂直居中了吧<br>
            两行文字哦
        </div>
    </div>
</html>

方法三：绝对定位 transform

优点：方便，支持webkit内核
缺点：transform兼容性差，IE9以下不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world</div>
    </div>
</body>
</html>

方法4:flexbox布局

优点：方便
缺点：兼容性不好,IE支持很差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
	<div class="parent4">
        <div class="child">hello world</div>
    </div>
</body>
</html>

BFC

BFC(block formatting context)翻译为“块级格式化上下文”，它会生成一个独立的渲染区域(不影响外面的元素，同时也不受外面元素的影响)，它的生成有以下规则：

内部的box会在垂直方向上一个接一个的放置
内部box在垂直方向上的距离由margin决定，同属一个BFC内的相邻box会发生margin重叠
每一个内部box的左边，与BFC的的左边相接触，即使存在浮动也是一样
BFC的区域不会与float box发生重叠
计算BFC的高度时，浮动元素也参与计算(上面清除浮动的问题就是这个原理)

触发BFC的条件：

根元素
float属性不为none
position为absolute或者fixed
display为inline-block、table-cell、table-caption、flex、inline-flex
overflow不为visible

前端精选文摘：BFC 神奇背后的原理这篇文章说的很清楚，也有相应的原理和例子，可以仔细看看。

实现自适应两列布局

方法一：右边元素触发BFC

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .father {
        background-color: lightblue;
    }

    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }

    .right {
        overflow: auto;
        height: 500px;
        background-color: lightseagreen
    }
</style>

<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='right'>
            right
        </div>
    </div>
</body>

</html>

方法二：margin-left实现

局限性：这种方法必须知道左侧的宽度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .father {
        background-color: lightblue;
    }

    .left {
        width: 100px;
        float: left;
        background-color: red;
    }

    .right {
        margin-left: 100px;
        background-color: lightseagreen
    }
</style>

<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='right'>
            right
        </div>
    </div>
</body>

</html>

三列布局

flex

优点：方便
缺点：还是flex兼容性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
    .father {
        display: flex;
        height: 100%;
    }

    .left,
    .right {
        flex: 0 1 100px;
        background-color: red;
    }

    .middle {
        flex: 1;
        height: 100%;
        background-color: green;
    }
</style>
<body>
    <div class="father">
        <div class='left'>left</div>
        <div class='middle'>middle</div>
        <div class='right'>center</div>
    </div>
</body>
</html>

负margin布局(双飞翼)

优点：市面上使用最多的一个
缺点：麻烦，这是多年前淘宝的老技术了

<!DOCTYPE>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>圣杯布局/双飞翼布局</title>
    <style>
        .mainWrap {
            width: 100%;
            float: left;
        }

        .main {
            margin: 0 120px;
        }

        .left,
        .right {
            float: left;
            width: 100px;
        }

        .left {
            margin-left: -100%;
        }

        .right {
            margin-left: -100px;
        }
    </style>
</head>

<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="mainWrap">
        <div class="main" style="background-color: lightcoral;">
            main
        </div>
    </div>
    <div class="left" style="background-color: orange;">
        left
    </div>
    <div class="right" style="background-color: lightsalmon;">
        right
    </div>
</div>

</html>