web前端基础面试题

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


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
    <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)的理解:

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

答:父级元素的content左上角

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

    答:html,body的margin区域的左上角

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

    答:父级元素content的左上角 且 子元素没有把父元素撑开

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

    答:父级元素padding的左上角

  4. 了解 粘性定位 (表格 表头固定; 吸顶)

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

    使用条件:

    • 父元素不能overflow:hidden或者overflow:auto属性。

    • 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位

    • 父元素的高度不能低于sticky元素的高度

    • sticky元素仅在其父元素内生效

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


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
    <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写一个三角形


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
    <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>

你可能感兴趣的:(css,html,css3,定位)