前端面试题总结-CSS篇

mengweiping

已于 2023-11-10 15:19:40 修改

阅读量58

点赞数

文章标签：前端

于 2023-11-03 16:18:29 首次发布

本文链接：https://blog.csdn.net/mengweiping/article/details/134204389

版权

1 水平居中方式有哪些

（1）父元素宽度和子元素宽度都已知时

子元素margin: auto
子元素对父元素相对定位/绝对定位，left: 50%; margin-left: (子元素宽度/ 2)*(-1)
子元素对父元素绝对定位，左右设为0， margin: auto

（2）对父子元素宽度没有要求时

父元素 text-align:center, 子元素是内联级元素（如display: inline-block; span等）()

（4）子元素宽度未知时

子元素相对父元素绝对定位，transform: translateX(-50%)

（5）终极杀手

父元素display: flex; justify-content: center;

2 垂直居中方式有哪些

（1）父元素 display: table-cell, vertical-align: middle

（2）子元素相对父元素绝对绝对定位

top: 50%, margin-top: (子元素高度/2)*(-1)
如果子元素高度未知时：transform: translateY(-50%)
top和bottom 设置为 0 ， margin: auto

（2）终极杀手：父元素 display: flex, align-items: center

3 三栏布局方式

（1）使用display:flex;中间一栏flex:1

（2）使用浮动,左右float，中间margin

<div class="container">
  <div class="left">左边固定</div>
  <div class="right">右边固定</div>
  <div class="center">中间自适应</div>
</div>
<style>
  .container {
    width: 100%;
    overflow: hidden;
  }
  .left {
    width: 200px;
    float: left;
  }
  .right {
    width: 200px;
    float: right;
  }
  .center {
    margin: 0 200px;
  }
</style>

（3）使用grid网格布局

<style>
  .container {
    display: grid;
    grid-template-columns: 200px auto 200px;
  }
  .left {
    grid-column: 1;
  }
  .right {
    grid-column: 3;
  }
  .center {
    grid-column: 2;
  }
</style>
<div class="container">
  <div class="left">左边固定</div>
  <div class="center">中间自适应</div>
  <div class="right">右边固定</div>
</div>

4 浏览器缓存机制

浏览器缓存分为【强缓存】和【协商缓存】

（1）强缓存：如果请求响应header包含【expires】或者【cache-control】则为强缓存，会获取本地缓存，且【cache-control】优先级高于【expires】，如果两者都存在，刚使用cache-control参数

（2）协商缓存，则分两种：

(a) 请求响应header中包含【Last-Modified】，下一次再发送请求时，请求header中带有【If-Modified-Since】字段，值为上一次请求头的【last-modified】值，服务器则会对这一资源的修改时间与请求头中的修改时间做对比，如果在上一次请求后没有再修改，则返回304，告诉浏览器直接获取缓存中资源，否则会返回新资源

(b) 请求响应header中包含【ETag】，下一次再发送请求时，请求header中带有【If-None-Match】字段，值为上一次请求头的【ETag】值，服务器则会对这一资源的ETag与请求头中的值是否一致，如果一致，则返回304，告诉浏览器直接获取缓存中资源，否则会返回新资源

5 哪些情况会产生margin合并

块状元素在以下三种情况下会产生margin合并

（1）相邻元素：共同边界设置了相同margin，如下图，第一个元素与第二元素之间距离是10px，而不是20px

 <div class="container">
    <div style="margin-bottom: 10px;background: red;">第一个</div>
    <div style="margin-top: 10px;background: red;">第二个</div>
  </div>

(2) 父元素与第一个子元素/最后一个子元素：共同边界设置了相同margin

<div style="background: blue; margin-top: 10px;">
    <div style="margin-bottom: 10px;background: red;">第一个</div>
    <div style="margin-top: 10px;background: red;">第二个</div>
 </div>

(3) 空块级元素

6 图片加载优化

（1）使用懒加载的方式，当图片要进入可视区域时才进行加载

window.onscroll = function () {
    const imgs = document.querySelectorAll('image')
    const scrollTop = 
        window.innerHeight +
        (document.body.scrollTop || document.documentElement.scrollTop)
    imgs.forEach(img => {
        if (img.offsetTop < scrollTop) {
            img.src = img.getAttribute('data-src')
        }
    })
}

（2）使用图片预加载的方式，当图片展示前一张时优先加载下一张

（3）使用csssprite或者svgsprite

7 CSS实现三道杠

<div class="content"></div>
<style>
.content {
    width: 100px;
    height: 10px;
    background-color:red;
    border-top: 10px solid red;
    border-bottom: 10px solid red;
    background-clip: content-box;
    padding: 20px 0;
}
</style>