0201面试题——清除浮动、三栏布局、画正方体

359 阅读4分钟

HTML/CSS

理论

  1. position值有哪些
    • static: 普通文档流
    • relative: 不脱离文档流,仍然占据文档位置
    • absolute:脱离文档流,相对于首个定位的祖先定位
    • fixed: 固定定位,不随滚动条滚动
    • sticky: 黏性定位,在窗口中时同相对定位,将要滑出窗口时同固定定位
  2. 隐藏元素的方式有哪些
    • visibility: hidden; // 设置为不可见,不可点击,会占位
    • opacity: 0; // 设置透明度为0,不可见,元素仍然存在页面中,会占位,可点击
    • display: none; // 元素不在页面中,但仍然在文档中。不占位,不可点击
    • 标签的hidden属性: 与display: none相同,唯一区别是hidden属性是标签上的,具有语义性
  3. 实现动画的方案有哪些
    • transition: 设置过渡
    • animation: 自定义动画
    • js
  4. transition和animation的区别
    • transition 用于设置属性的过渡,让一些值在变化的时候能有一个过程,是变相的动画
    • animation 直接自定义动画,规定元素在动画过程中各个阶段的状态
  5. 清除浮动的方法有哪些
    • 触发BFC,因为在BFC中,浮动元素也会参与到高度的计算,可以解决父元素的高度坍塌问题
      • 根元素或包含根元素的元素
      • 浮动元素(元素的 float 不是 none )
      • 绝对定位元素(元素的 position 为 absolute 或 fixed )
      • 行内块元素(元素的 display 为 inline-block )
      • 表格单元格(元素的 display 为 table-cell ,HTML表格单元格默认为该值)
      • 表格标题(元素的 display 为 table-caption ,HTML表格标题默认为该值)
      • 匿名表格单元格元素(元素的 display 为 table 、 table-row 、 table-row-group 、 table-header-group 、 table-footer-group (分别是HTML table 、 row 、 tbody 、 thead 、 tfoot 的默认属性)或 inline-table )
      • overflow 值不为 visible 的块元素
      • display 值为 flow-root 的元素
      • contain 值为 layout 、 content 或 strict 的元素
      • 弹性元素( display 为 flex 或 inline-flex 元素的直接子元素)
      • 网格元素( display 为 grid 或 inline-grid 元素的直接子元素)
      • 多列容器(元素的 column-count 或 column-width 不为 auto ,包括 column-count 为 1 )
      • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
    • 浮动还会引起非浮动子元素被覆盖
      • 在非浮动子元素上添加 clear: both即可,表示不允许两边有浮动元素
  6. 隐藏页面中某个元素的方法有哪些
    • 占据位置
      • visibility: hidden;
      • opacity: 0;
    • 不占据位置
      • display: none;
      • 元素的hidden属性
      • 利用定位,将元素移出视口,让用户看不见,但是仍然在页面中
  7. 如何实现异步加载script脚本
    • 在script标签上添加defer
      • 异步加载脚本,且推迟到文档加载完成后执行,可以保证依赖关系
    • 在script标签上添加async
      • 异步加载脚本,加载完成立即执行,执行顺序跟加载速度相关,无法保证依赖关系
    • 动态插入script标签
      • 当需要时再插入script代码,或者插入script标签引入外部文件
    • import动态导入
        // 以这种方式调用,将返回一个 promise。
        import('/modules/my-module.js')
        .then((module) => {
          // Do something with the module.
        });
        // 也可以使用await
        let module = await import('/modules/my-module.js');
      

coding

  1. 实现一个头部导航的吸顶方案有哪些

    • 基于sticky定位的吸顶
        <style>
        .nav {
          height: 200px;
          background-color: pink;
          position: sticky;
          top: 0px;	// 表示top0的时候固定,即吸顶
        }
        .content {
          height: 2000px;
          background-color: gray;
        }
        .other {
          height: 200px;
          background-color: gray;
        }
      
      </style>
      <body>
        <div class="other"></div>
        <div class="nav"></div>
        <div class="content"></div>
      </body>
      
    • 基于滚动事件
        <style>
          #nav {
            height: 200px;
            background-color: pink;
            width: 100%;
          }
          .content {
            height: 2000px;
            background-color: gray;
          }
          .other {
            height: 200px;
            background-color: gray;
          }
      
        </style>
        <body style="margin: 0px;">
            <div class="other"></div>
            <div id="nav"></div>
            <div class="content"></div>
            <script>
              function sticky () {
                let nav = document.getElementById('nav')
                // 绝对TOP
                let navTop = nav.getBoundingClientRect().top + document.documentElement.scrollTop;
      
                return function () {
                  if (window.scrollY >= navTop) {
                    nav.style.position = "fixed"
                    nav.style.top = "0"
                  } else {
                    nav.style.position = "static"
                  }
                }
              }
              window.addEventListener('scroll', sticky());
            </script>
        </body>
      
  2. 三栏布局实现方案

    • html 如下

          <div class="box">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
          </div>
      
    • 使用float

          div {
            height: 500px;
          }
          .left, .right {
            background-color: pink;
            width: 20%;
            float: left
      
          }
          .center {
            background-color: gray;
            width: 60%;
            float: left;
          }
      
    • 使用定位方式

          .box {
            position: relative;	// 占据文档流,使得不影响其他元素的布局,同时给子元素提供定位参考
          }
          div {
            position: absolute;
            height: 500px;
          }
          .left, .right {
            background-color: pink;
            width: 20%;
          }
          .right {
            right: 0;
          }
      
          .center {
            background-color: gray;
            width: 60%;
            left: 20%;
          }
      
    • 使用 flex

          .box {
            display: flex;
          }
          div {
            height: 500px;
          }
          .left, .right {
            background-color: pink;
            flex-grow: 1;
          }
      
          .center {
            background-color: gray;
            flex-grow: 3;
          }
      
    • 使用 grid

          .box {
            display: grid;
            grid-template-columns: 20% 60% 20%;
          }
          div {
            height: 500px;
          }
          .left, .right {
            background-color: pink;
          }
      
          .center {
            background-color: gray;
          }
      
  3. 画三角形

      <style>
        .triangle {
          width: 200px;
          height: 200px;
          background-color: pink;
          clip-path: polygon(50% 0, 100% 100%, 0% 100%);
        }
      </style>
      <body style="margin: 0px;">
          <div class="triangle"></div>
      </body>
    
  4. 画正方体

      <style>
        .box {
          height: 200px;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          animation: rotate 2s infinite linear;
          transform-origin: 50% 100px -50px; /*设置变换中心*/
          transform-style: preserve-3d;	/*一定要开启3d,不然没有立体效果*/
        }
        @keyframes rotate {
          from {
            transform: rotateX(0deg) rotateY(0deg);
          }
          to {
            transform: rotateX(360deg) rotateY(360deg);
          }
        }
        .side {
          position: absolute;
          width: 100px;
          height: 100px;
          background-color: rgba(33, 33, 33, 0.3);
          transform-origin: 50px 50px -50px; /*设置变幻中心*/
          font-size: 28px;
          text-align: center;
          line-height: 100px;
          color: pink;
        }
        .back {
          transform: rotateY(180deg)
        }
        .top {
          transform: rotateX(90deg)
        }
        .bottom {
          transform: rotateX(-90deg)
        }
        .left {
          transform: rotateY(-90deg)
        }
        .right {
          transform: rotateY(90deg)
        }
    
    
      </style>
      <body style="margin: 0px;">
          <div class="box">
            <div class="front side"></div>
            <div class="back side"></div>
            <div class="top side"></div>
            <div class="bottom side"></div>
            <div class="left side"></div>
            <div class="right side"></div>
          </div>
      </body>