css常考面试题

1.盒模型宽度计算

盒模型宽度计算，下面div的offsetWidth

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

offsetWidth = 内容宽度 + 内边距 + 边框。无外边距。
所以 offsetWidth = 100 + 10 * 2 + 1 * 2 = 122px
补充：如果让offsetWidth = 100px ，可以怎么做
答：加上box-sizing: border-box;

2.margin纵向重叠问题

如下代码，AAA和BBB之间的距离是多少?


<!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>margin 纵向重叠</title>
    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
</style>
</head>
<body>
    
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

</body>
</html>

知识点：

1.相邻元素的margin-top和margin-bottom 会发生重叠
2.空白内容的p也会重叠
3.所以答案是：15px

3.margin负值问题

知识点：

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

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

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

4.bfc理解和应用

概念：

1.块级格式化上下文

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

形成bfc的常见条件：

1.float不是none

2.position是absolute或fixed

3.overflow不是visible

4.display是flex inline-block等

bfc常见应用：清除浮动


// bfc前
<style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
</style>
<div class="container">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p>某一段文字……</p>
</div>

// bfc后：在父元素和p元素上添加bfc
<style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }
</style>
<div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
</div>

float布局

知识点：

1.如何实现圣杯布局和双飞翼布局
2.手写clearfix

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

1.三栏布局，中间一栏最先加载和渲染
2.两侧内容固定，中间内容随着宽度自适应

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

1.使用float布局
2.两侧使用margin负值，以便和中间内容横向重叠
3.防止中间内容被两侧覆盖，一个用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 {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
</style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <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>

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

常用语法：

flex-direction justfy-content align-items flex-wrap align-self

<!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>flex 画骰子</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }
</style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>
</html>

7.css定位

absolute和relative定位：

1.relative根据自身定位
2.absolute根据最近一层的定位元素定位,，找不到，就根据body定位

水平居中：

inline元素：text-aligin:center
block元素：margin: auto
absoulte元素：left:50% + margin-left负值

垂直居中：

inline元素：line-height的值等于height的值
absolute元素：top:50% + margin-top 负值。需要知道元素的宽高
absolute元素：transform(-50%, -50%) 不需要知道宽高
absolute元素：top,left,bottom,right = 0 + margin: auto 不需要知道宽高

水平对齐演示：

<!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">
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .item {
            background-color: #ccc;
        }

        .container-1 {
            text-align: center;
        }

        .container-2 .item {
            width: 500px;
            margin: auto;
        }

        .container-3 {
            position: relative;
            height: 100px;
        }
        .container-3 .item {
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
        }
</style>
</head>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>

    <div class="container container-2">
        <div class="item">
            this is block item
        </div>
    </div>

    <div class="container container-3">
        <div class="item">
            this is absolute item
        </div>
    </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">
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            height: 200px;
        }
        .item {
            background-color: #ccc;
        }

        .container-1{
            text-align: center;
            line-height: 200px;
            height: 200px;
        }

        .container-2 {
            position: relative;
        }
        .container-2 .item {
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -50px;
        }

        .container-3 {
            position: relative;
        }
        .container-3 .item {
            width: 200px;
            height: 80px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .container-4 {
            position: relative;
        }
        .container-4 .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
</style>
</head>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>

    <div class="container container-2">
        <div class="item">
            this is item
        </div>
    </div>

    <div class="container container-3">
        <div class="item">
            this is item
        </div>
    </div>

    <div class="container container-4">
        <div class="item">
            this is item
        </div>
    </div>
</body>
</html>

8.line-height如何继承

<!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>line-height 继承问题</title>
    <style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
</style>
</head>
<body>
    <p>这是一行文字</p>
</body>
</html>

行高是40px。

有三种情况：

// body的line-height直接是数字，则p的line-height直接就是body的line-height,为40px
<style type="text/css">
        body {
            font-size: 20px;
            line-height: 40px;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
</style>

// body的line-height直接是比例，则p的line-height直接就是p的font-size * 比例,为24px
<style type="text/css">
        body {
            font-size: 20px;
            line-height: 1.5;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
</style>

// body的line-height直接是百分比，则p的line-height直接就是body的font-size * body的line-height,为40px
<style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
</style>

9.css响应式

px：绝对长度单位，最常用
em：相对长度单位，相对于父元素，不常用
rem：相对长单位，相对于根元素html的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>rem 演示</title>
    <style type="text/css">
        html {
            font-size: 100px; // 1rem = 100px
        }
        div {
            background-color: #ccc;
            margin-top: 10px;
            font-size: 0.16rem;
        }
</style>
</head>
<body>

    <p style="font-size: 0.1rem">rem 1</p>
    <p style="font-size: 0.2rem">rem 1</p>
    <p style="font-size: 0.3rem">rem 1</p>

    <div style="width: 1rem;">
        this is div1
    </div>
    <div style="width: 2rem;">
        this is div2
    </div>
    <div style="width: 3rem;">
        this is div3
    </div>

</body>
</html>

响应式布局方案?

1.媒体查询

2.rem

3.vw/vh

vw：网页视口宽度的1/100

vh：网页视口高度的1/100