慕课网前端面试03--HTML/CSS面试题

最新推荐文章于 2024-07-31 14:35:30 发布

TinyWu369

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量230

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/sinat_28753227/article/details/125781467

版权

一、HTML面试题

1.题目

如何理解HTML语义化？
默认情况下，哪些HTML标签是块级元素，哪些是内联元素？

2.解答

2.1 如何理解HTML语义化？

<div>标题</div>
  <div>
    <div>一段文字</div>
    <div>
      <div>列表1</div>
      <div>列表2</div>
    </div>
  </div>

<h1>标题</h1>
  <div>
    <p>一段文字</p>
    <ul>
      <li>列表1</li>
      <li>列表2</li>
    </ul>
  </div>

让人更容易读懂，增加代码可读性
让搜索引擎更容易读懂（SEO）

2.2 块元素&内联元素

display:block/table；有div h1 h2 table ul ol p等。
display:inline/inline-block；有span img input button等。

二、CSS面试题

1.知识模块

布局
定位
图文样式
响应式
CSS3

1.1布局

盒子模型的宽度如何计算？
margin纵向重叠的问题？
margin负值的问题？
BFC理解和应用？
float布局的问题，以及clearfix？
flex画色子

解答

1.盒模型宽度计算

<!-- 如下代码，请问div1的offsetWidth是多大？ -->
  <style>
    #div1 {
      width: 100px;
      padding: 10px;
      border: 1px solid #ccc;
      margin: 10px;
    }
  </style>

  <div id="div1">
  </div>

offsetWidth=(内容宽度+内边距+边框)，无外边距
因此，答案是122px.
补充：如果让offsetWidth等于100px，该如何做？
在这里插入图片描述

2.margin纵向重叠问题

<!-- 如下代码，AAA和BBB之间的距离是多少？ -->
  <style>
    p{
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>

  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p></p>也会重叠
答案：15px.

3.margin负值的问题？
对margin的top left right bottom设置负值，有何效果

margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

4.BFC理解和应用？
什么是BFC，如何应用？
Block Format Context，块级格式化上下文。
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
形成BFC的常见条件：
float不是none
position是absolute或fixed
overflow不是visible
display是flex inline-block等
BFC应用：清除浮动。

<style type="text/css">
    .container{
      background-color: #f1f1f1;
    }
    .left{
      float: left;
    }
  </style>
  <div class="container">
    <img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="" class="left" style="margin-right: 10px;">
    <p>某一段文字...</p>
  </div>

在这里插入图片描述
图片脱离文档流，解决方法：

<style type="text/css">
    .container{
      background-color: #f1f1f1;
    }
    .left{
      float: left;
    }
    .bfc{
      overflow: hidden;
    }
    <div class="container bfc">
    <img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="" class="left" style="margin-right: 10px;">
    <p>某一段文字...</p>
  </div>

在这里插入图片描述

5.float布局的问题，以及clearfix？

如何实现圣杯布局和双飞翼布局？
圣杯布局和双飞翼布局的目的
三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页
圣杯布局和双飞翼布局的技术总结:

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin

圣杯布局：

<!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>圣杯布局</title>
  <style type="text/css">
    body {
      min-width: 550px;
    }

    #header {
      text-align: center;
      background-color: #f1f1f1;
    }

    #container {
      padding-left: 200px;
      padding-right: 150px;
    }

    #container .column {
      float: left;
    }

    #center {
      background-color: #ccc;
      width: 100%;
    }

    #left {
      position: relative;
      background-color: yellow;
      width: 200px;
      margin-left: -100%;
      right: 200px;
    }

    #right {
      background-color: red;
      width: 150px;
      margin-right: -150px;
    }

    #footer {
      clear: both;
      text-align: center;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body>
  <div id="header">this is header</div>
  <div id="container">
    <div id="center" class="column">this is center</div>
    <div id="left" class="column">this is left</div>
    <div id="right" class="column">this is right</div>
  </div>
  <div id="footer">this is footer</div>
</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>双飞翼布局</title>
  <style type="text/css">
    body{
      min-width: 550px;
    }

    .col{
      float: left;
    }

    #main{
      width: 100%;
      height:200px;
      background-color: #ccc;
    }

    #main-wrap{
      margin: 0 190px 0 190px;
    }

    #left{
      width:190px;
      height:200px;
      background-color: #0000ff;
      margin-left: -100%;
    }

    #right{
      width: 190px;
      height: 200px;
      background-color: #ff0000;
      margin-left: -190px;
    }
  </style>
</head>

<body>
  <div id="main" class="col">
    <div id="main-wrap">
      this is main
    </div>
  </div>
  <div id="left" class="col">
    this is left
  </div>
  <div id="right" class="col">
    this is right
  </div>
</body>

</html>

在这里插入图片描述

手写clearfix

    /* 手写clearfix */
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }

    .clearfix{
      *zoom:1; /* 兼容IE低版本*/
    }

6.flex画色子
flex实现一个三点的色子
常用语法回顾
flex-direction
justify-content
align-items
flex-wrap
align-self

<!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>flex画骰子</title>
  <style type="text/css">
    .box {
      width: 200px;
      height: 200px;
      border: 2px solid #ccc;
      border-radius: 10px;
      padding: 20px;

      display:flex; /* flex布局 */
      justify-content:space-between; /* 两端对齐 */
    }

    .item{
    /* 背景色、大小、边框等 */
      display: block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #666;
    }

    .item:nth-child(2){
      align-self: center; /* 第二项居中对齐 */
    }

    .item:nth-child(3){
      align-self: flex-end; /* 第三项尾对齐 */
    }
  </style>
</head>
<body>
  <div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
</body>
</html>

在这里插入图片描述

1.2 定位

absolute和relative分别依据什么定位？
relative依据自身定位
absolute依据最近一层的定位元素定位
定位元素
absolute relative fixed body
居中对齐有哪些实现方式？
水平居中

inline元素：text-align:center;
block元素：margin:auto;
absolute元素：left:50%+margin-left负值

<!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>水平对齐</title>
  <style type="text/css">
    .container {
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
    }

    .item {
      background-color: #ccc;
    }

    .container-1 {
      text-align: center;
    }

    .container-2 .item {
      width: 500px;
      margin: auto;
    }

    .container-3 {
      position: relative;
      height: 100px;
    }

    .container-3 .item {
      width: 300px;
      height: 100px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
    }
  </style>
</head>

<body>
  <div class="container container-1">
    <span>一段文字</span>
  </div>
  <div class="container container-2">
    <div class="item">
      this is block item
    </div>
  </div>
  <div class="container container-3">
    <div class="item">
      this is absolute item
    </div>
  </div>
</body>

</html>

在这里插入图片描述

垂直居中

inline元素：line-height的值等于height值;
absolute元素：top:50%+margin-top负值;
absolute元素：transform(-50%,-50%);
absolute元素：top,left,bottom,right=0+margin:auto;
前两种都需要知道元素自身的宽高，第三种有浏览器兼容性，第四种没有浏览器兼容性。

<!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>垂直对齐</title>
  <style type="text/css">
    .container {
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
      height: 200px;
    }

    .item {
      background-color: #ccc;
    }

    .container-1 {
      text-align: center;
      line-height: 20px;
      height: 20px;
    }

    .container-2 {
      position: relative;
    }

    .container-2 .item {
      width: 300px;
      height: 100px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      top: 50%;
      margin-top: -50px;
    }

    .container-3 {
      position: relative;
    }

    .container-3 .item {
      width: 200px;
      height: 80px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .container-4 {
      position: relative;
    }

    .container-4 .item {
      width: 100px;
      height: 50px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>

<body>
  <div class="container container-1">
    <span>一段文字</span>
  </div>
  <div class="container container-2">
    <div class="item">
      this is item
    </div>
  </div>
  <div class="container container-3">
    <div class="item">
      this is item
    </div>
  </div>
  <div class="container container-4">
    <div class="item">
      this is item
    </div>
  </div>
</body>

</html>

在这里插入图片描述

1.3 图文样式

line-height的继承问题？

写具体数值，如30px，则继承该值（比较好理解）
写比例，如2/1.5，则继承该比例（比较好理解）
写百分比，如200%，则继承计算出来的值（考点）

<!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>line-height继承</title>
  <style type="text/css">
    body {
      font-size: 20px;
      /* line-height: 50px; */
      /* line-height: 1.5; */
      /* line-height: 200%; */
    }

    p {
      background-color: #ccc;
      font-size: 16px;
      /* line-height:50px; */
      /* line-height:16*1.5=24px; */
      /* line-height:20*200%=40px; */
    }
  </style>
</head>

<body>
  <p>这是一行文字</p>
</body>

</html>

1.4 响应式

rem是什么？

rem是一个长度单位
px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素，常用于响应式布局

如何实现响应式？

media-query，根据不同的屏幕宽度设置根元素font-size
rem，基于根元素的相对单位

vw/vh
网页视口尺寸

window.screen.height  // 屏幕高度
window.innerHeight // 网页视口高度
document.body.clientHeight // body高度

vh网页视口高度的1/100
vw网页视口宽度的1/100
vmax:vh和vw两者最大值；vmin:vh和vw两者最小值。
rem的弊端：“阶梯”性。

vw/vh

<!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 type="text/css">
    body {
      margin: 0;
      padding: 0;
    }

    #container {
      background-color: red;
      width: 10vw;
      height: 10vh;
    }
  </style>
</head>

<body>
  <p>vw vh测试</p>
  <div id="container"></div>
  <script>
    // window.innerHeight === 100vh
    // window.innerWidth === 100vw
  </script>
</body>

</html>