css技巧--------------------css相关知识技巧-------------------------

参考汇总

1. css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）

当margin或者padding取值是百分比的时候

无论是left，right或者top，bottom，都是以父元素的width为参考物，进行提前占位，

避免资源加载时候的闪烁，还可以让高度自适应。

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定） */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        .outer {
            width: 400px;
            height: 100%;
            background: blue;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        
        .inner {
            position: relative;
            width: 100%;
            height: 0;
            /* 当margin或者padding取值是百分比的时候，
            无论是left，right或者top，bottom，
            都是以父元素的width为参考物，进行提前占位，
            避免资源加载时候的闪烁，还可以让高度自适应。 */
            padding-bottom: 50%;
            background: red;
        }
        
        .box {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">
            <div class="box">hello</div>
        </div>
    </div>
</body>

</html>

2. CSS 怎么画一个大小为父元素宽度一半的正方形？

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* CSS 怎么画一个大小为父元素宽度一半的正方形？ */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        .outer {
            width: 400px;
            height: 100%;
            background: blue;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .inner {
            width: 50%;
            padding-bottom: 50%;
            background: red;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

3. CSS实现自适应正方形、等宽高比矩形

width 设置百分比
padding 撑高
如果只是要相对于 body 而言的话，还可以使用 vw 和 vh
伪元素设置 margin-top: 100%撑高

双重嵌套，外层 relative，内层 absolute

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            padding-top: 50%;
            height: 0;
            background: #ccc;
            width: 50%;
            position: relative;
        }
        
        .inner {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">hello</div>
    </div>
</body>

</html>

padding 撑高画正方形

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 600px;
            background: blue;
        }
        
        .inner {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            background: red;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

相对于视口 VW VH

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .inner {
            width: 1vw;
            height: 1vw;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

伪元素设置 margin-top

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .inner {
            width: 100px;
            overflow: hidden;
            background: blue;
        }
        
        .inner::after {
            content: '';
            margin-top: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

4. 实现两栏布局的方式

左 float，然后右 margin-left（右边自适应）

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        div {
            height: 500px;
        }
        
        .aside {
            width: 300px;
            float: left;
            background: yellow;
        }
        
        .main {
            background: aqua;
            margin-left: 300px;
        }
    </style>
</head>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

</html>

右 float，margin-right

BFC + float

BFC渲染规则

（1）BFC垂直方向边距重叠

（2）BFC的区域不会与浮动元素的box重叠

（3）BFC是一个独立的容器，外面的元素不会影响里面的元素

（4）计算BFC高度的时候浮动元素也会参与计算

    <style>
        div {
            height: 500px;
        }
        
        .aside {
            width: 300px;
            float: left;
            background: yellow;
        }
        
        .main {
            overflow: hidden;
            background: aqua;
        }
    </style>
</head>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

float + 负 margin

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .left {
            width: 100%;
            float: left;
            background: #f00;
            margin-right: -80%;
        }
        
        .right {
            float: left;
            width: 80%;
            background: #0f0;
        }
    </style>
</head>

<body>
    <div class="left">
        <p>hello</p>
    </div>
    <div class="right">
        <p>world</p>
    </div>
</body>

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .left {
            width: 100%;
            float: left;
            background: #f00;
            margin-right: -80%;
        }
        
        .right {
            float: left;
            width: 80%;
            background: #0f0;
        }
    </style>
</head>

<body>
    <div class="left">
        <p>hello</p>
    </div>
    <div class="right">
        <p>world</p>
    </div>
</body>

</html>

圣杯布局实现两栏布局

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        div {
            height: 100%;
        }
        
        .container {
            display: flex;
        }
        
        .left {
            float: left;
            width: 100%;
            background: #0f0;
        }
        
        .right {
            float: left;
            width: 300px;
            margin-left: -300px;
            background: #00f;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">你好</div>
        <div class="right">我好</div>
    </div>
</body>

</html>

flex 实现两栏布局

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        div {
            height: 100%;
        }
        
        .container {
            display: flex;
        }
        /* 左侧固定 200px不会被压缩 */
        
        .left {
            flex: 0 0 200px;
            background: #0f0;
        }
        
        .right {
            flex: 1 1;
            background: #00f;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">你好</div>
        <div class="right">我好</div>
    </div>
</body>

</html>

position + margin

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        html,
        body,
        div {
            height: 100%;
        }
        
        .container {
            display: flex;
            position: relative;
        }
        
        .left {
            position: absolute;
            width: 300px;
            background: #0f0;
        }
        
        .right {
            width: 100%;
            margin-left: 300px;
            background: #00f;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">你好</div>
        <div class="right">我好</div>
    </div>
</body>

</html>

5. 实现一个两栏三列的布局，并且要求三列等高，且以内容最多的一列的高度为准。

position + margin-left + margin-right

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        div {
            height: 500px;
        }
        
        .box {
            position: relative;
        }
        
        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            background: green;
        }
        
        .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
            background: red;
        }
        
        .middle {
            margin-left: 200px;
            margin-right: 200px;
            background: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

通过 float + margin

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        div {
            height: 500px;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: green;
        }
        
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: red;
        }
        
        .middle {
            margin-left: 210px;
            margin-right: 210px;
            background: black;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>
</body>

</html>

圣杯布局

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .container {
            padding: 0 300px 0 200px;
            border: 1px solid black;
        }
        
        .content {
            float: left;
            width: 100%;
            background: #f00;
        }
        
        .left {
            width: 200px;
            background: #0f0;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        
        .right {
            width: 300px;
            background: #00f;
            float: left;
            margin-left: -300px;
            position: relative;
            right: -300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">中间内容</div>
        <div class="left">左侧区域</div>
        <div class="right">右侧区域</div>
    </div>
</body>

</html>

双飞翼布局

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        div {
            height: 100%;
        }
        
        .main {
            float: left;
            width: 100%;
            background: #f00;
        }
        
        .main .content {
            margin-left: 200px;
            margin-right: 300px;
        }
        
        .left {
            width: 200px;
            background: #0f0;
            float: left;
            margin-left: -100%;
        }
        
        .right {
            width: 300px;
            background: #00f;
            float: left;
            margin-left: -300px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="content">hello world</div>
    </div>
    <div class="left">你好</div>
    <div class="right">王鹏浩</div>
</body>

</html>

flex 布局

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        div {
            height: 100%;
        }
        
        .container {
            display: flex;
        }
        
        .content {
            flex: 1 1;
            order: 2;
            background: #f00;
        }
        
        .left {
            flex: 0 0 200px;
            order: 1;
            background: #0f0;
        }
        
        .right {
            flex: 0 0 300px;
            order: 3;
            background: #00f;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">hello world</div>
        <div class="left">你好</div>
        <div class="right">王鹏浩</div>
    </div>
</body>

</html>

6. 用css2和css3分别写一下垂直居中和水平居中

CSS2

水平居中：

div + margin: auto;
span + text-align

垂直居中

使用 position 然后 left/top 和 margin 的方式垂直居中（已知宽高和未知宽高）
使用 position + margin
使用 display: table-cell;

已知宽高，进行水平垂直居中

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            position: relative;
            width: 400px;
            height: 600px;
            background: blue;
        }
        
        .inner {
            position: absolute;
            width: 200px;
            height: 300px;
            background: red;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

宽高未知，比如内联元素，进行水平垂直居中

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 600px;
            /* background: blue; */
            border: 1px solid red;
            background-color: transparent;
            position: relative;
        }
        
        .inner {
            position: absolute;
            background: red;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="outer">
        <span class="inner">我想居中显示</span>
    </div>
</body>

</html>

绝对定位的 div 水平垂直居中

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 600px;
            /* background: blue; */
            border: 1px solid red;
            background-color: transparent;
            position: relative;
        }
        
        .inner {
            position: absolute;
            background: red;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 200px;
            height: 300px;
            margin: auto;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">我想居中显示</div>
    </div>
</body>

</html>

图片和其他元素使用 display: table-cell; 进行垂直居中

结合display: table-cell; vertical-align: middle;实现垂直居中

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 600px;
            /* background: blue; */
            border: 1px solid red;
            background-color: transparent;
            /* 结合 垂直居中 */
            display: table-cell;
            vertical-align: middle;
        }
        
        .inner {
            background: red;
            width: 200px;
            height: 300px;
            border: 1px solid blue;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">我想居中显示</div>
    </div>
</body>

</html>

CSS3

垂直、水平居中

flex

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 600px;
            display: flex;
            /* 垂直居中 */
            align-items: center;
            /* 水平居中 */
            justify-content: center;
            border: 1px solid red;
            background-color: transparent;
        }
        
        .inner {
            background: red;
            width: 200px;
            height: 300px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">我想居中显示</div>
    </div>
</body>

</html>

参考链接

css技巧

参考汇总

能不能讲一讲Flex布局，以及常用的属性？。

BFC是什么？能解决什么问题？

grid布局

1. css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）

2. CSS 怎么画一个大小为父元素宽度一半的正方形？

3. CSS实现自适应正方形、等宽高比矩形

双重嵌套，外层 relative，内层 absolute

padding 撑高画正方形

相对于视口 VW VH

伪元素设置 margin-top

4. 实现两栏布局的方式

左 float，然后右 margin-left（右边自适应）

右 float，margin-right

BFC + float

float + 负 margin

圣杯布局实现两栏布局

flex 实现两栏布局

position + margin

5. 实现一个两栏三列的布局，并且要求三列等高，且以内容最多的一列的高度为准。

position + margin-left + margin-right

通过 float + margin

圣杯布局

双飞翼布局

flex 布局

6. 用css2和css3分别写一下垂直居中和水平居中

CSS2

已知宽高，进行水平垂直居中

宽高未知，比如 内联元素，进行水平垂直居中

绝对定位的 div 水平垂直居中

图片和其他元素使用 display: table-cell; 进行垂直居中

CSS3

垂直、水平居中

宽高未知，比如内联元素，进行水平垂直居中