web前端基础面试题

最新推荐文章于 2024-05-11 10:11:55 发布

賀崽

最新推荐文章于 2024-05-11 10:11:55 发布

阅读量131

点赞数 2

本文链接：https://blog.csdn.net/Z_qing_he/article/details/112103963

版权

1. 用css画一条长100px, 宽0.5px的细线;(移动端)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
    .line {
      position: relative;
      width: 100px;
      height: 1px;
    }
    .line:after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: red;
      transform: scaleY(.5);
      -webkit-transform: scaleY(.5); // 0.5px线
    }
    .common-line{
      margin-top: 10px;
      width: 100px;
      height: 1px;
      background-color: red; // 1px线
    }
    </style>
</head>
<body>
  <div class="line"></div>
  <div class="common-line"></div>
</body>
</html>

2. 给body设置背景色, 背景色会影响到body默认的margin区域吗?

答：会。

3. 有关定位(position)的理解:

当父级元素(含祖先元素)没有设置position的relative和absolute属性值时;子元素设置了position: absolute,且子元素没有设置left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角还是 padding的左上角还是 content的左上角)

答：父级元素的content左上角

当父级元素(含祖先元素)没有设置position的relative和absolute属性值时,子元素设置了position: absolute,且子元素设置了left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角还是 padding的左上角还是 content的左上角)

答：html,body的margin区域的左上角
当父级元素(含祖先元素)设置了position的relative和absolute属性值时;子元素设置了position: absolute,且子元素没有设置left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角还是 padding的左上角还是 content的左上角)

答：父级元素content的左上角且子元素没有把父元素撑开
当父级元素(含祖先元素)设置了position的relative和absolute属性值时,子元素设置了position: absolute,且子元素设置了left right top bottom属性,那么子元素相对于哪个元素定位(精确到: 是其margin的左上角还是 padding的左上角还是 content的左上角)

答：父级元素padding的左上角
了解粘性定位 (表格表头固定; 吸顶)

答：设置position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件:
- 父元素不能overflow:hidden或者overflow:auto属性。
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效

5. 如何使一个盒子水平垂直居中(至少5种)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
    /* 方式一： */

    .parent1 {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      position: relative;
    }
    .child1 {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }

    /* 方式二： */
    .parent2 {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      position: relative;
    }
    .child2 {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    /* 方式三： */
    .parent3 {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .child3 {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      display: inline-block;
    }

    /* 方式四 */
    .parent4 {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child4 {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }

    /* 方式五 */
    .parent5 {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      position: relative;
    }
    .child5 {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }
    </style>
</head>

<body>
  <h2>方式一：</h2>
  <div class="parent1">
    <div class="child1">我是子元素</div>
  </div>
  <h2>方式二：</h2>
  <div class="parent2">
    <div class="child2">我是子元素</div>
  </div>
  <h2>方式三：</h2>
  <div class="parent3">
    <div class="child3">我是子元素</div>
  </div>
  <h2>方式四：</h2>
  <div class="parent4">
    <div class="child4">我是子元素</div>
  </div>
  <h2>方式五：</h2>
  <div class="parent5">
    <div class="child5">我是子元素</div>
  </div>
</body>

</html>

7. 用css写一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
    .triangle.up {
      width: 0;
      height: 0;
      border-width: 0 30px 30px;
      border-style: solid;
      border-color: transparent transparent red;
    }
    </style>
</head>
<body>
  <div class="triangle up"></div>

</body>
</html>

賀崽

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端基础面试题

1. 用css画一条长100px, 宽0.5px的细线;(移动端)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt
复制链接

扫一扫