CSS面试总结(会持续更新)

最新推荐文章于 2024-08-20 19:01:17 发布

庚中

最新推荐文章于 2024-08-20 19:01:17 发布

阅读量162

点赞数

分类专栏：二.CSS 文章标签： CSS面试总结(会持续更新)

本文链接：https://blog.csdn.net/xiaodi520520/article/details/86565843

版权

二.CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.题目:怎么让一个不定宽高的div水平居中，垂直水平居中？
分析:重点是不定宽高的盒子哦,如果只有一个盒子,并且有宽高,直接使用margin:0 auto就好了,但是如果是没有宽高,margin就不能使用.所以我总结了一下,可以使用下面的方法:
方法一:使用弹性布局

    <style>
    .big{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        /*justify-content: space-around:主轴居中  */
       justify-content: space-around;
       /* align-items: center:副轴居中 */
       align-items: center;  
    }
    .big>div{
        /* 子盒子没有设置宽高,直接用内容撑开 */
        background-color: red;    
    }
    </style>
</head>
<body>
    <div class="big">
        <div>中</div>
    </div>
</body>

方法二:定位方法

    <style>
      .big {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        position: relative;
      }
      .big > div {
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        /*   transform: translate(-50%,-50%):X和Y轴平移自身一半 */
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="big">
        <div>中</div>
    </div>
  </body>

方法三:table-cell布局(用的比较少)

    <style>
      .big {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align: middle;
        text-align: center;

      }
      .big > div {
        background-color: red;
        vertical-align: middle;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="big">
        <div>中</div>
    </div>
  </body>

最终实现效果如下: 在这里插入图片描述

二.什么是贝塞尔运动曲线?你用过吗?
贝塞尔运动曲线是css3里的一个特性,用法如下:

    <style>
      .animation {
        width: 80px;
        height: 80px;
        background-color: orange;
        /* cubic-bezier是贝塞尔曲线 */
        transition: all 2s cubic-bezier(.15,.93,.83,.67);
      }
      .animation:hover {
        transform: translateX(200px);
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>