css 高频面试题

01-如何使一个盒子水平垂直居中？

方法一  ：margin：0 auto ；实现水平方向居中，垂直方向 margin-top 调 （存在父盒子塌陷问题，父盒子添加overflow hidden 避免塌陷问题）

方法二：定位（子绝父相）

方法三：flex布局   

display: flex;

justify-content: center;

align-items: center;

方法四：grid 布局

02-如何实现一个三角形？

 .box {

            width: 0;

            height: 0;

            border: 20px solid transparent;

            border-top: 20px solid red;

        } 

03-如何实现双飞翼（圣杯）布局？

1、利用定位实现两侧固定中间自适应

        1.1）父盒子设置左右 padding 值

        1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处

        1.3）中间盒子自适应

   <style>
        .father {
            height: 400px;
            background-color: pink;
            position: relative;
            padding: 0 200px;
        }
        .left,
        .right {
            width: 200px;
            height: 300px;
            background-color: yellow;
            position: absolute;
            top: 0;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }
        .center {
            background-color: blue;
            height: 350px;
        }
    </style>

    <div class="father">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

2、利用 flex 布局实现两侧固定中间自适应

        2.1）父盒子设置 display:flex;

        2.2）左右盒子设置固定宽高

        2.3）中间盒子设置 flex:1 ;

       .father {
            height: 400px;
            background-color: pink;
            display: flex;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: yellow;
        }

        .right {
            width: 200px;
            height: 300px;
            background-color: yellow;
        }

        .center {
            flex: 1;
            background-color: blue;
        }

        <div class="father">
         <div class="left"></div>
         <div class="center"></div>
         <div class="right"></div>
        </div>

3.利用 calc(100% - 400px)实现两侧固定中间自适应

   3.1）所有盒子 float: left;

   3.2）左右盒子设置固定宽高

   3.3）中间盒子设置 calc(100% - 左右盒子宽之和) ;

       .box {
            height: 300px;
            background-color: yellow;
        }

        .c {
            float: left;
            background-color: purple;
            width: calc(100% - 400px);
            height: 100%;
        }

        .l,
        .r {
            float: left;
            width: 200px;
            height: 100%;
            background-color: blue;
        }

  <div class="box">
        <div class="l"></div>
        <div class="c">中间</div>
        <div class="r"></div>
    </div>

04-px,em,rem,vw分别代表什么意思？

1、px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是

一 个虚拟长度单位，是计算机系统的数字化图像长度单位

2、em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字

体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大

小，因此并不是一个固定的值

3、rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字

体大小时，仍然是相对大小，但相对的只是 HTML 根元素

4.vw百分之一视口宽度

4、区别：

IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem

相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通

过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐

层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem

05.-定位的方式有哪些？区别是什么？

定位模式	是否脱标	移动位置
static静态定位	否（占有位置）	不能使用边偏移
relative相对定位	否（占有位置）	相对于自身位置移动
absolute绝对定位	是（不占有位置）	最近一级带有定位的父级
fixed固定定位	是（不占有位置）	浏览器可视区
sticky粘性定位	否（占有位置）	浏览器可视区