常见css面试题

最新推荐文章于 2024-07-18 09:03:14 发布

FE-Dong

最新推荐文章于 2024-07-18 09:03:14 发布

阅读量219

点赞数

分类专栏： javascript 面试题

本文链接：https://blog.csdn.net/Dong8508/article/details/80537144

版权

javascript 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

面试题

5 篇文章 0 订阅

订阅专栏

一、盒子居住

（1）（未知盒子宽高）

 transform居中，可以不知道宽高
   .wrapper {
        padding: 20px;
        background: orange;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 5px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }*/

    /*
    flex居中，可以不知道宽高
    body{
        width: 100%;
        height: 100%;
        justify-content: center; !*子元素水平居中*!
        align-items: center; !*子元素垂直居中*!
        display: -webkit-flex;
    }
    .wrapper {
        width: 500px;
        height: 300px;
        background: orange;
        color: #fff;
        }*/

（2）已知盒子宽高

/*绝对定位居中
   .wrapper {
       width: 400px;
       height: 18px;
       padding:20px;
       background: orange;
       color: #fff;
       position: absolute;
       left:0;
       right:0;
       top: 0;
       bottom: 0;
       margin: auto;
   }*/

    /*
    绝对定位宽高各一半居中
    .wrapper {
            width: 400px;
            height: 18px;
            padding: 20px;
            background: orange;
            color: #fff;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -9px;
            margin-left: -200px;
        }

    */

二、待整理。。