HTML、CSS面试题（1）

李__
122 阅读6分钟

HTML

1. 如何理解语义化

HTML语义化是指在编写HTML时，选择合适的标签来表达页面的内容和结构，其具有以下优点：

  • 提高可读性和可维护性：可使其他开发人员更容易理解代码结构和意图
  • 去掉或样式丢失的时候能让页面呈现清晰的结构
  • 优化SEO：搜索引擎可以通过语义化的HTML更好的理解内容，从而有助于提高搜索排名 常见的语义化标签
  • header：定义文档或节的页眉
  • nav：定义导航链接部分
  • main：定义文档的主要内容
  • article：定义独立的内容区域
  • section：定义文档中的节（一个主题）
  • aside：定义与页面内容稍有关系的内容，如侧边栏
  • footer：定义文档或节的页脚

2. 常用的H5事件

  • onblur：失去焦点
  • onchange：元素改变
  • onclick：单机鼠标
  • ondrop：被拖动元素正在被拖放
  • onended：媒体抵达结尾
  • onerror：元素加载期间发生错误
  • onfocus：获得焦点
  • oninput：用户输入
  • onkeydown：按下按键（未松开就触发）
  • onkeyup：松开按键
  • onmousedown：按下鼠标按钮
  • onmousemove：鼠标移动
  • onmouseout：鼠标移出元素
  • onmouseovoer：鼠标移至元素上
  • onmouseup：松开鼠标

3. 块级元素和行内元素

  • 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form
  • 行内元素：a、span、b、img、strong、input、select、lable、em、button、textarea、selecting

CSS

4. 盒模型

  • 盒子模型可以用来对元素进行布局，包括内边距(padding)、外边距(margin)、边框(border)、实际内容(content)这几个部分。
  • 盒模型分为W3C标准的盒子模型(标准盒模型)和IE标准的盒子模型(怪异盒模型)，两者的区别为width的计算方式不同。标准盒模型大小 = content + border + padding + margin，怪异盒模型大小 = width(content + border + padding) + margin。
  • 可通过设置box-sizing属性改变盒模型的解析模式，默认是content-box(标准盒模型)，可修改为border-box(怪异盒模型)

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>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>
  • 使用margin:auto(只实现水平居中可不设置position)
<!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>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }
    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>

</html>
  • 使用display:flex
<!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>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: flex;
      /* 垂直居中 */
      align-items: center;
      /* 水平居中 */
      justify-content: center;
    }
    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>
  • 使用transform
<!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>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      /* 第一个参数和left结合实现水平居中，第二个参数和top结合实现垂直居中 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>

6. 双飞翼和圣杯布局

  • 共同点：
  1. 两者均为三栏布局，两边宽度固定，中间自适应宽度
  2. 中间栏最先渲染，即中间栏的html元素在最前面
  3. 均采用float属性实现各栏的并排显示
  • 区别
  1. 圣杯布局为中间栏设置左右padding，然后利用position：relative配合left和right属性实现
  2. 双飞翼布局利用margin-left和margin-right实现，其利用了margin的纵向重叠问题
<!-- 双飞翼布局 -->
<!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>
    .col {
      float: left;
    }
    .left {
      width: 190px;
      background: #a0a0a0;
      margin-left: -100%;
    }
    .right {
      width: 190px;
      background: #e0e0e0;
      margin-left: -190px;
    }
    .main {
      width: 100%;
    }
    .center {
      background: #c0c0c0;
      margin-left: 190px;
      margin-right: 190px;
    }
  </style>
</head>
<body>
  <div class="col main">
    <div class="center">
      this is main
    </div>
  </div>
  <div class="col left">
    this is left
  </div>
  <div class="col right">
    this is right
  </div>
</body>
</html>

<!-- 圣杯布局 -->
<!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>
    .col {
      float: left;
    }
    .main {
      padding-left: 190px;
      padding-right: 190px;
    }
    .left {
      width: 190px;
      background: #a0a0a0;
      position: relative;
      margin-left: -100%;
      left: -190px;
    }
    .right {
      width: 190px;
      background: #e0e0e0;
      margin-left: -190px;
      position: relative;
      right: -190px;
    }
    .center {
      background: #c0c0c0;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="col center">
      this is main
    </div>
    <div class="col left">
      this is left
    </div>
    <div class="col right">
      this is right
    </div>
  </div>
</body>
</html>

7. margin负值问题

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

8. css选择器

  • id选择器：#id
  • 类选择器：.class
  • 标签选择器：div、h1、p等
  • 相邻选择器：h1 + p
  • 子选择器：ul > li
  • 后代选择器：li a

9. 常用伪类

  • :link：选择所有未访问过的链接。
  • :visited：选择所有已访问过的链接。
  • :hover：当鼠标悬停在元素上时应用样式。
  • :active：当元素被激活（通常是指点击时）时应用样式。
  • :focus：当元素获得焦点时应用样式，通常用于表单元素。
  • :checked：选择所有被选中的复选框或单选按钮。
  • :disabled：选择所有禁用的表单元素。
  • :enabled：选择所有启用的表单元素。
  • :required：选择所有带有 required 属性的表单元素。
  • :optional：选择所有没有 required 属性的表单元素。
  • :valid：选择所有值有效的表单元素。
  • :invalid：选择所有值无效的表单元素。
  • :in-range：选择值在指定范围内的表单元素。
  • :out-of-range：选择值不在指定范围内的表单元素。
  • :read-only：选择所有只读的表单元素。
  • :read-write：选择所有可读写的表单元素。
  • :first-child：选择作为其父元素的第一个子元素的元素。
  • :last-child：选择作为其父元素的最后一个子元素的元素。
  • :nth-child(n)：选择作为其父元素的第 n 个子元素的元素。
  • :nth-last-child(n)：选择作为其父元素的倒数第 n 个子元素的元素。
  • :first-of-type：选择作为其父元素的第一种类型的元素。
  • :last-of-type：选择作为其父元素的最后一种类型的元素。
  • :nth-of-type(n)：选择作为其父元素的第 n 种类型的元素。
  • :nth-last-of-type(n)：选择作为其父元素的倒数第 n 种类型的元素。
  • :only-child：选择作为其父元素唯一子元素的元素。
  • :only-of-type：选择作为其父元素唯一一种类型的元素。
  • :empty：选择没有子元素（包括文本节点）的元素。
  • :not(selector)：选择不符合指定选择器的元素。
  • :target：选择当前活动的锚点（即 URL 中的 # 后面的部分）。
  • :root：选择文档的根元素（通常是 <html>）。
  • :lang(language)：选择具有指定语言的元素。
  • ::before：在元素内容之前插入生成的内容
  • ::after：在元素内容之后插入生成的内容
  • ::first-letter：选择元素的第一个字母
  • ::first-line：选择元素的第一行
  • ::selection：选择用户选中的文本
  • ::placeholder：选择输入框的占位符文本

10. flex布局常用属性

  • flex-direction：主轴方向
  • justify-content：主轴对齐方式
  • align-items：交叉轴对齐方式
  • flex-wrap：是否换行
  • align-self：子元素交叉轴对齐方式

HTML、CSS面试题（2）

avatar
文章
阅读
粉丝