HTML，CSS面试题

何起哪落
107 阅读6分钟

1.css实现瀑布流

2.盒模型

<!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>
    .one{
      width: 200px;
      height: 200px;
      padding: 5px;
      margin: 5px;
      border: 5px solid black;
      background-color: red;
    }
    .two{
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      padding: 5px;
      margin: 5px;
      border: 5px solid black;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
  <!-- 盒模型分为标准盒模型、怪异盒模型，标准盒模型的width、height只作用于content，
    怪异盒模型的width、height包括content、padding、border，可通过box-sizing调整盒模型 -->
</body>
</html>

3.BFC

<!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>
    .box1 {
      display: flex;
      margin-bottom: 50px;
      border: 1px solid black;
    }
    .box1 .one {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: red;
      float: left;
    }

    .box2 {
      margin-bottom: 50px;
      border: 1px solid black;
    }
    .box2 .one {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: red;
    }
    .box2 .parent{
      overflow: hidden;
    }
    .box2 .parent .two {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color:yellow;
    }

    .box3 {
      margin-bottom: 50px;
      border: 1px solid black;
    }
    .box3 .one {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: red;
      float: left;
    }
    .box3 .two {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color:yellow;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <!-- BFC 块级格式化上下文，独立的渲染区域，容器里的元素不会影响到外面的元素 -->
  <!-- 常见的触发BFC的条件，
          1.display:inline-block、flex、inline-flex 
          2.position:absolute/fixed 
          3.overflow:hidden、auto、scroll
          4.float:不为none
  -->
  <!-- BFC的三大作用，
          1.清除浮动
          2.避免外边距重叠   
          3.BFC的区域不会与float box重叠
  -->

  <!-- 1.清除浮动 -->
  <div class="box1">
      <div class="one"></div>
  </div>

  <!-- 2.避免外边距重叠 -->
  <div class="box2">
    <div class="one"></div>
    <div class="parent">
      <div class="two"></div>
    </div>
  </div>

  <!-- 3.阻止元素被浮动元素覆盖 -->
  <div class="box3">
    <div class="one"></div>
    <div class="two"></div>
  </div>
</body>

</html>

4.IFC

<!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>
    .box1{
      border: 1px solid black;
      text-align: center;
    }
    .box1 .one{
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      vertical-align: bottom;
    }

    .box2{
      height: 100px;
      border: 1px solid black;
    }
    .box2 .one{
      line-height: 100px;
      vertical-align: middle;
    }
    .box2 .two{
      display: inline-block;
      width: 25px;
      height: 25px;
      background-color: red;
    }
  </style>
</head>
<body>
  <!-- IFC 内联格式化上下文，text-align设置水平布局，vertical-align设置垂直布局 -->

  <!-- text-align -->
  <div class="box1">
    <span class="one"></span>
  </div>

  <!-- vertical-align -->
  <div class="box2">
    <i class="one"></i>
    <span class="two"></span>
  </div>
</body>
</html>

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>
</head>
<body>
  基本选择器
  1.ID选择器
  2.class选择器
  3.标签选择器
  4.*通配符选择器

  其他选择器
  1.并集选择器
  2.交集选择器
  3.后代选择器
  4.子代选择器
  5.属性选择器
  6.兄弟选择器

  伪类选择器
  1.:hover
  2.:active
  3.:focus
  4.:blur
  5.:checked
  6.:target
  7.:first-child
  8.:last-child
  9.:nth-child
  10.:not

  伪元素选择器
  1.before
  2.after
  3.first-letter
  4.first-line
  
  优先级
  1.!important 1000
  2.ID选择器 100
  3.class选择器 10
  4.元素选择器 1
  5.*通配符选择器 0-1
</body>
</html>

6.flex弹性布局

7.Grid网格布局

8.元素居中问题

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   /*
   块级元素水平居中
   */
   .case1{
     width: 300px;
     height: 300px;
     background-color: red;
     margin: 0 auto;
   }

   /*
   行内元素居中
   */
   .case2{
     width: 300px;
     height: 300px;
     background-color: red;
     text-align: center;
   }
   .case2 div{
     display: inline-block;
     width: 100px;
     height: 100px;
     background-color: blue;
   }

   /*
   通用水平居中
   1.定位+margin
   2.display: flex;justify-content: center;
   */
   .case3{
     width: 300px;
     height: 300px;
     background-color: red;
     /* position: relative; */
     display: flex;
     justify-content: center;
   }
   .case3 div{
     width: 100px;
     height: 100px;
     background-color: blue;
     /* position: absolute;
     left: 50%;
     margin-left: -50px; */
   }
 </style>
</head>
<body>
 <div class="case1"></div>
 <br>
 <div class="case2">
   <div></div>
 </div>
 <br>
 <div class="case3">
   <div></div>
 </div>
 <br>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   /*
   行内元素垂直居中
   */
   .case1{
     width: 300px;
     height: 300px;
     line-height: 300px;
     background-color: red;
     margin: 0 auto;
   }

   /*
   通用垂直居中
   1.定位+margin
   2.display: flex;align-items: center;
   */
   .case2{
     width: 300px;
     height: 300px;
     background-color: red;
     margin: 0 auto;
     /* position: relative; */
     display: flex;
     align-items: center;
   }
   .case2 div{
     width: 100px;
     height: 100px;
     background-color: blue;
     /* position: absolute;
     top: 50%;
     margin-top: -50px; */
   }
 </style>
</head>
<body>
 <div class="case1">
   <span>123</span>
 </div>
 <br>
 <div class="case2">
   <div>123</div>
 </div>
</body>
</html>

10.三列布局

<!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>
   .container1{
     border: 1px solid black;
     overflow: hidden;
   }
   .container1 .left{
     width: 200px;
     height: 200px;
     background-color: red;
     float: left;
   }
   .container1 .center{
     width: 200px;
     height: 200px;
     background-color: pink;
     float: left;
   }
   .container1 .right{
     width: 200px;
     height: 200px;
     background-color: yellow;
     float: left;
   }

   .container2{
     border: 1px solid black;
     display: flex;
     justify-content:center;
   }
   .container2 .left{
     width: 200px;
     height: 200px;
     background-color: red;
   }
   .container2 .center{
     width: 200px;
     height: 200px;
     background-color: pink;
   }
   .container2 .right{
     width: 200px;
     height: 200px;
     background-color: yellow;
   }
 </style>
</head>
<body>
 
 <!-- float -->
 <div class="container1">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
 </div>

 <!-- flex -->
 <div class="container2">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
 </div>
</body>
</html>

11.如何使一个元素消失

<!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>
   .one{
     display: none;
   }
   .two{
     visibility: hidden;
   }
   .tree{
     opacity: 0;
   }
 </style>
</head>
<body>
 <div class="one">123</div>
 <div class="two">456</div>
 <div class="tree">789</div>

 <script>
   const two = document.querySelector(".two");
   const tree = document.querySelector(".tree");
   two.addEventListener("click",function(){
     console.log("two");
   },false)
   tree.addEventListener("click",function(){
     console.log("tree");
   },false)
 </script>
</body>
</html>

12.nth-of-type与nth-child的区别

<!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>

   /* div下所有span,排第二 */
   span:nth-of-type(2){
     background-color: red;
   }

   /* div下所有元素,排第二,且元素是p */
   p:nth-child(2){
     background-color: yellow;
   }
 </style>
</head>
<body>
 <div>
   <span>1</span>
   <p>2</p>
   <span>3</span>
   <p>4</p>
   <span>5</span>
   <p>6</p>
 </div>
</body>
</html>

13.px、rem、em、vw、vh、%

px像素
rem根元素font-size
em父元素font-size
vw视口宽度
vh视口高度
%父元素百分比

14.Meta 标签中的 viewport 属性及含义

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta 
   name="viewport" 
   content="width=device-width,
   user-scalable=no,
   initial-scale=1.0,
   maximum-scale=1.0,
   minimum-scale=1.0"
 />
 <title>Document</title>
</head>
<body>
 <!-- width=device-width,浏览器宽度等于设备宽度，
 user-scalable=no,不允许缩放，
 initial-scale=1.0,初始的缩放级别，
 maximum-scale=1.0,可以将网页放大到的最大级别，
 minimum-scale=1.0,可以将网页缩小到的最小级别， -->
</body>
</html>

15.移动端适配方案

1.百分比布局
2.rem
3.flex
4.grid
5.媒体查询

16.如何实现字体小于12px?

<!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>
    .content{
      font-size: 12px;
      transform: scale(0.5);
    }

    svg text{
      font-size: 6px;
    }
  </style>
</head>
<body>
  <!-- transform -->
  <div class="content">123</div>

  <!-- svg -->
  <svg width="100" height="30">
    <text>
      <tspan x="0" dy="6">456</tspan>
    </text>
  </svg>
</body>
</html>

17.background

background-color
background-image
background-repeat
background-position:
    背景图片放置的起始点
background-origin:
    规定background-position相对于什么位置来定位
background-attachment:
    背景图片是固定还是随着页面的其余部分滚动
background-size:
    cover 图片同比缩放至完全覆盖元素，图片可能被截取
    contain 图片同比缩放至宽高有一条填充满元素，图片不会存在截取
background-clip:
    背景图片裁剪保留区域

18.float

<!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>
    .container1{
      overflow: hidden;
      border: 1px solid black;
    }
    .container1 .one{
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .container2{
      border: 1px solid black;
    }
    .container2 .one{
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }
    .container2 .two{
      clear: both;
    }

    .container3{
      border: 1px solid black;
    }
    .container3 .one{
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }
    .container3::after{
      display: block;
      content: '';
      clear: both;
    }
  </style>
</head>
<body>
  <!-- 特点：
1.float元素会脱离文档流
2.float元素具备块级元素特征
3.float不属于继承属性 -->

<!-- 1.利用BFC特性，在父级元素添加overflow:hidden -->
  <div class="container1">
    <div class="one"></div>
  </div>

  <!-- 2.在子元素列表后添加一个块级元素，clear:both -->
  <div class="container2">
    <div class="one"></div>
    <div class="two"></div>
  </div>

  <!-- 3.利用after伪类在子元素列表后添加一个块级元素，clear:both -->
  <div class="container3">
    <div class="one"></div>
  </div>
</body>
</html>

19.position

1.position:relative 相对定位
2.position:absolute 绝对定位
3.position:fixed 固定定位
4.position:sticky 粘性定位

vertical-align

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*
    问题1:图文对齐
    */
    .case1{
      border: 1px solid black;
    }
    .case1 img{
      vertical-align: bottom;
    }

    /*
    问题2:图片与图片对齐
    */
    .case2{
      border: 1px solid black;
    }
    .case2 img{
      vertical-align: bottom;
    }

    /*
    问题3:包装图片下方3px
    1.父级设定和图片一致的height
    2.父级font-size设为0
    3.子图片转为block
    4.子图片转vertical-align:bottom
    */
    .case3{
      border: 1px solid black;
      /* height: 690px; */
      /* font-size: 0; */
    }
    .case3 img{
      /* display: block; */
      vertical-align: bottom;
    }

    /*
    问题4:一行中各个行内元素vertical-align分别设置不同的值有什么影响
    vertical-align是各个行内元素设置自己在垂直方向上排列方式，自己不同的方式对别的元素也有影响，具体什么影响看效果
    */
    .case4{
      border: 1px solid black;
    }
    .case4 img{
      vertical-align: bottom;
    }
    .case4 span{
      vertical-align: baseline;
    }
    .case4 input{
      vertical-align: middle;
    }

    /*
    问题5:行内元素可用vertical-align在垂直方向上微调
    */
  </style>
</head>
<body>
  <div class="case1">
    <img height="200" src="./bindundun.jpeg" alt="kobe">
    <span>123</span>
  </div>
  <br>
  <div class="case2">
    <img height="200" src="./bindundun.jpeg" alt="kobe">
    <img height="200" src="./bindundun.jpeg" alt="kobe">
  </div>
  <br>
  <div class="case3">
    <img height="200" src="./bindundun.jpeg" alt="kobe">
  </div>
  <br>
  <div class="case4">
    <img height="200" src="./bindundun.jpeg" alt="kobe">
    <span>123</span>
    <input type="button" value="按钮"/>
  </div>
</body>
</html>
avatar
文章
阅读
粉丝