乐趣区

关于css:面试回顾CSS常见题全总结

jiezi

盒模型 

<!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">
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="div1">
        this is div1
    </div>

    <script>
        // document.getElementById('div1').offsetWidth
    </script>
</body>
</html>
offsetWidth
  • 失常盒子模型宽度：内容宽度（width）+padding+border+margin
  • 管制总宽度为 width：box-sizing：border-box
margin 纵向重叠
  • 相邻元素的 margin-top 和 margin-bottom 会产生重叠，最终高度会取大的
  • 空白内容的 <p></p> 也会重叠 
<!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>
margin 负值问题
  • top 和 left 负值，元素向上、向左挪动
  • right 负值，右侧元素左移，本身不受影响
  • bottom 负值，下方元素上移，本身不受影响 
<!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">
        body {margin: 20px;}

        .float-left {float: left;}
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

        .container {
            border: 1px solid #ccc;
            padding: 10px;
        }
        .container .item {
            width: 100px;
            height: 100px;
        }
        .container .border-blue {border: 1px solid blue;}
        .container .border-red {border: 1px solid red;}
    </style>
</head>
<body>
    
    <p> 用于测试 margin top bottom 的正数状况 </p>
    <div class="container">
        <div class="item border-blue">
            this is item 1
        </div>
        <div class="item border-red">
            this is item 2
        </div>
    </div>

    <p> 用于测试 margin left right 的正数状况 </p>
    <div class="container clearfix">
        <div class="item border-blue float-left">
            this is item 3
        </div>
        <div class="item border-red float-left">
            this is item 4
        </div>
    </div>

</body>
</html>

BFC 了解与利用

  • Block format context，块级格式化上下文
  • 一块独立渲染区域，外部元素的渲染不会影响边界以外的元素

造成 BFC 的常见条件

  • float 不是 none
  • position 是 absolute 或 fixed
  • overflow 不是 visible（为 hidden）
  • display 是 flex inline-block 等

BFC 的常见利用

  • 革除浮动 
<!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>Document</title>
    <style type="text/css">
        .container {background-color: #f1f1f1;}
        .left {float: left;}
        .bfc {overflow: hidden; /* 触发元素 BFC */}
    </style>
</head>
<body>
    <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>
</body>
</html>

布局

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

  • 三栏布局，两头一栏最先加载和渲染
  • 两侧内容固定，两头内容随着宽度自适应
  • 个别用于 PC 网页

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

  • 应用 float 布局
  • 两侧应用 margin 负值，以便和两头内容横向重叠
  • 避免两头内容被两侧笼罩，一个用 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>

flex 布局

罕用语法回顾：

  • flex-direction // 横向、纵向
  • justify-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>

css 定位

absolute 和 relative 定位

  • relative 根据本身定位
  • absolute 根据最近一层的定位元素定位

  • 定位元素：

    • absolute relative fixed
    • body
<!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>absote relative 定位问题 </title>
    <style type="text/css">
        body {margin: 20px;}
        .relative {
            position: relative;
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;

            top: 20px;
            left: 50px;
        }
        .absolute {
            position: absolute;
            width: 200px;
            height: 100px;
            border: 1px solid blue;

            top: 20px;
            left: 50px;
        }
    </style>
</head>
<body>

    <p>absolute 和 relative 定位问题 </p>
    <div class="relative">
        <div class="absolute">
            this is absolute
        </div>
    </div>

</body>
</html>

程度居中

  • inline 元素：text-align：center
  • block 元素：margin：auto
  • absolute 元素：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>

css 图文款式

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>

css 响应式

rem 概念

  • 绝对长度单位，绝对于根元素，罕用于响应式布局 
<!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;}
        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>

响应式布局的罕用计划

  • media-query，依据不同的屏幕宽度设置根元素 font-size
  • rem，基于根元素的绝对单位 
<!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">
        @media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
            html {font-size: 86px;}
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            /* iphone6/7/8 和 iphone x */
            html {font-size: 100px;}
        }
        @media only screen and (min-width: 414px) {
            /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
            html {font-size: 110px;}
        }

        body {font-size: 0.16rem;}
        #div1 {
            width: 1rem;
            background-color: #ccc;
        }

    </style>
</head>
<body>
    <div id="div1">
        this is div
    </div>
</body>
</html>

vw/vh

  • rem 的弊病：阶梯性
  • vh：网页视口高度的 1 /100
  • vw：网页视口宽度的 1 /100
  • vmax 取两者较大值；vmin 相同
退出移动版