☆第2弹☆【WEB前端工程师-基础面试题】--CSS/JavaScript

最新推荐文章于 2024-06-20 20:19:27 发布

长安梦我

最新推荐文章于 2024-06-20 20:19:27 发布

阅读量111

点赞数 1

分类专栏： JavaScript CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/zhongqingtian/article/details/125324817

版权

1、盒子在父元素中垂直居中的3中方式

方法1：已知宽高，水平、垂直各移动自身宽、高度的一半

  <style>
    .box{
      width: 500px;
      height: 400px;
      border: 3px dashed red;
      margin: 100px auto;
      position: relative;
    }

    .son{
      width: 150px;
      height: 150px;
      background-color:tomato;
      position: absolute;
      left:50%;
      top:50%;
      /* 方法1 ：已知宽高，水平、垂直各移动自身宽、高度的一半*/
      argin-left: -75px;
      margin-top:-75px; 

    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son"></div>
  </div>
</body>

方法2：未知宽高，移动自身高度、宽度一半

  <style>
    .box{
      width: 500px;
      height: 400px;
      border: 3px dashed red;
      margin: 100px auto;
      position: relative;
    }

    .son{
      width: 150px;
      height: 150px;
      background-color:tomato;
      position: absolute;
      left:50%;
      top:50%;
      /* 方法2：假设未知宽高，移动自身高度、宽度一半*/
      transform: translate(-50%,-50%); 
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son"></div>
  </div>
</body>

方法3：弹性布局flex，写给父元素

<style>
    .box{
      width: 500px;
      height: 400px;
      border: 3px dashed red;
      margin: 100px auto;
      position: relative;
      /****方法3：弹性布局flex，写给父元素****/
      display:flex;
      align-items:center;
      justify-content: center;
    }

    .son{
      width: 150px;
      height: 150px;
      background-color:tomato;
      position: absolute;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son"></div>
  </div>
</body>

2、清除浮动方法4种

①给父元素设置高度

②BFC保护(块级格式化上下文)：给父元素设置overflow：hidden;

③在父元素末尾添加一个虚拟子元素，转为块元素，设置clear:both;

④伪元素

<style>
    .box{
      /*方法1:给父元素设置高度 */
      /*height：200px;*/
      width: 700px;
      background-color:grey;
      /*方法2:块级格式化上下文BFC */
      /* overflow: hidden; */
    }

    .box>div{
      width:200px;
      height: 200px;
      float: left;
    }

    .one{
      background-color: orangered;
    }
    
    .two{
      background-color:aquamarine
    }

    .three{
      background-color:greenyellow;
    }

    /* 方法3: */
    .clear{
      clear:both;
      /* 必须是块状标签 */
      display: block;
    }

    /* 方法4：添加伪元素 */
    /* .box::after{
      content:"";
      display:flex;
      clear:both;
    } */
  </style>
</head>
<body>

   <div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <!-- 方法3:给父元素最后面添加一个假的子元素 -->
    <!-- <span class="clear"></span> -->
   </div>

3、渐进增强和优雅降级

①渐进增强 progressive enhancement：

先保证基本的功能，再改进和追加功能。

针对低版本浏览器进行构建页面，保证基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

②优雅降级 graceful degradation：

先构建完整的功能，再针对低版本浏览器进行兼容 -webkit- -ms- -o- ...

4、盒子模型

1、边框border

边框样式属性

最低0.47元/天解锁文章

长安梦我

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
☆第2弹☆【WEB前端工程师-基础面试题】--CSS/JavaScript

WEB前端不可不只的经典面试题：JavaScript、CSS(循环，作用域，声明提升，盒子模型、清楚浮动4中方法，子元素在父元素水平居中3中方法、匿名函数自调用，闭包、渐进增强和优雅降级.....)
复制链接

扫一扫