前端开发面试题(HTML、CSS)

1. 一个 200 * 200 的`div`在不同分辨率屏幕下左右居中，用`css`实现：

方法一

<!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>
      .box {
        
        
        width: 200px;
        height: 200px;
        background: red;
        /* 利用绝对定位 */
        /* 看父元素，也就是看最近一级父元素是否设定了定位，如果没有就往上找，如果一直都没有，那么就会以浏览器的可视窗口作为参照进行偏移 */
        position: absolute;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></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>Document</title>
    <style>
      .box {
        
        
        width: 200px;
        height: 200px;
        background: red;
        /* 利用绝对定位 */
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

2. 写一个左中右布局占满屏幕，其中左、右两块固定宽 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>Document</title>
    <style>
      * {
      
      
        padding: 0;
        margin: 0;
      }
      .main > div {
      
      
        float: left;
      }
      .container {
      
      
        width: 100%;
      }
      .left,
      .right {
      
      
        width: 200px;
      }
      .left {
      
      
        background: red;
        margin-left: -100%;
      }
      .right {
      
      
        background: yellow;
        margin-left: -200px;
      }
      .center {
      
      
        background: blue;
        /* 显示文字 */
        margin-left: 200px;
        margin-right: 200px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <!-- 要先加载 中  -->
      <div class="container">
        <div class="center">中</div>
      </div>
      <div class="left">左</div>
      <div class="right">右</div>
    </div>
  </body>
</html>

在这里插入图片描述

3. 简述清除浮动的几种方法：

清除浮动

给浮动元素的同级下添加一个盒子，加入clear:both

缺点：多了一个div盒子

<!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>
      * {
          
          
        padding: 0;
        margin: 0;
      }
      .main {
          
          
        border: 5px solid red;
      }
      .dv1 {
          
          
        width: 100px;
        height: 100px;
        background: orange;
        float: left;
      }
      .dv2 {
          
          
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
      }
      .dv3 {
          
          
        width: 100px;
        height: 100px;
        background: green;
        float: left;
      }
      .clear {
          
          
        /* 清除浮动 */
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="dv1"></div>
      <div class="dv2"></div>
      <div class="dv3"></div>
      <div class="clear"></div>
    </div>
  </body>
</html>

在这里插入图片描述

给浮动的父元素加入：overflow:hidden

<!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>
      * {
          
          
        padding: 0;
        margin: 0;
      }
      .main {
          
          
        border: 5px solid red;
        /* 清除浮动 */
        overflow: hidden;
      }
      .dv1 {
          
          
        width: 100px;
        height: 100px;
        background: orange;
        float: left;
      }
      .dv2 {
          
          
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
      }
      .dv3 {
          
          
        width: 100px;
        height: 100px;
        background: green;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="dv1"></div>
      <div class="dv2"></div>
      <div class="dv3"></div>
    </div>
  </body>
</html>

在这里插入图片描述

最常用的一个方式（给浮动的父级元素使用::after {content: "";clear:both;display: table;}

<!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>
      * {
          
          
        padding: 0;
        margin: 0;
      }
      .main {
          
          
        border: 5px solid red;
      }
      /* 清除浮动 */
      .main::after {
          
          
        content: "";
        clear: both;
        display: table;
      }
      .dv1 {
          
          
        width: 100px;
        height: 100px;
        background: orange;
        float: left;
      }
      .dv2 {
          
          
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
      }
      .dv3 {
          
          
        width: 100px;
        height: 100px;
        background: green;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="dv1"></div>
      <div class="dv2"></div>
      <div class="dv3"></div>
    </div>
  </body>
</html>

在这里插入图片描述

4. 行内元素有哪些？块级元素有哪些？

行内元素
- 特点：
  - 相邻行内元素在一行上，一行可以显示多个
  - 高、宽直接设置是无效的
  - 默认宽度就是它本身内容的宽度
  - 行内元素只能容纳文本或者其他行内元素
  - display属性为inline
- a、b、span、input、…
块级元素
- 特点：
  - 每个块级元素都从新的一行开始，并且其后的元素也另起一行
  - 元素的高度、宽度、行高以及顶和底边距都可设置
  - 可以容纳内联元素和其他块元素
  - display属性为block
- div、ul、li、p、h1、dl、…
空
- 特点：
  - 没有内容的 HTML 内容被称为空元素
- br、hr、…

5. 画图解释一下`CSS`的盒子模型。

margin：外边距
border：边框
padding：内边距

6. `CSS`选择符有哪些？哪些属性可以继承？优先级算法如何计算？

CSS选择符有哪些？
- id选择器：#
- class选择器：.
- 标签选择器：div、p
- 相邻选择器：ul + div
- 子类选择器：ul>li
- 后代选择器：ul li
- 通配符选择器：*
- 属性选择器：a[href='xxx']
- 伪类选择器：a:after、a:hover
哪些属性可以继承？
- color文字颜色
- font-size字体大小
优先级算法如何计算？
- !important > style内联样式 > id选择器 > class选择器 > 标签选择器 > 通配选择器

7. `CSS3` 新增伪类举例

举例：
- p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
- p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
- p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
- p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
- p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
- :after在元素之前添加内容,也可以用来做清除浮动。
- :before在元素之后添加内容
- :disabled控制表单控件的禁用状态。
- :checked单选框或复选框被选中。

8. flex布局的应用场景

第一种：

<!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>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
      }
      .left {
        background: red;
        /* flex: 放大属性 缩小属性 项目的长度; */
        flex: 0 0 100px;
      }
      .right {
        background: blue;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">左</div>
      <div class="right">右</div>
    </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>Document</title>
    <style>
      * {
      
      
        padding: 0;
        margin: 0;
      }
      .container {
      
      
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      header {
      
      
        background: red;
      }
      section {
      
      
        background: blue;
        flex: 1;
        display: flex;
      }
      footer {
      
      
        background: yellow;
      }
      .left,
      .right {
      
      
        background: green;
        flex: 0 0 200px;
      }
      .center {
      
      
        background: hotpink;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>头部</header>
      <section>
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">右</div>
      </section>
      <footer>底部</footer>
    </div>
  </body>
</html>

在这里插入图片描述

9. 常见浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？解决方法是什么，常用hack的技巧？

常见浏览器的内核：

浏览器	浏览器内核
IE	Trident 内核
Chrome（谷歌）	Webkit 内核
Opera	Presto 内核
Firefox（火狐）	Gecko 内核

经常遇到的浏览器的兼容性有哪些？

浏览器默认内外间距不一致问题

* {
        
        
	padding: 0;
	margin: 0;
}

浏览器默认图片有间距

<!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>
      * {
          
          
        padding: 0;
        margin: 0;
      }
      /* 使用float属性为img布局 */
      img {
          
          
        width: 200px;
        height: 200px;
        float: left;
      }
    </style>
  </head>
  <body>
    <img src="./bootstrap/图像形状/01.webp" alt="" />
    <img src="./bootstrap/图像形状/01.webp" alt="" />
    <img src="./bootstrap/图像形状/01.webp" alt="" />
  </body>
</html>

在这里插入图片描述

10. `html5`有哪些新特性？如何处理`HTML5`新标签的浏览器兼容问题？

html5有什么新特性
- 用于绘画的canvas元素
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如article、footer、header、nav、section
- 新的表单控件，比如calendar、date、time、email、url、search
如何处理HTML5新标签的浏览器兼容问题
- <header></header>
- <footer></footer>
- ie低级版本浏览器是不支持的
- 方案一
  - 使用javascript新增元素的方法解决
  - document.createElement('header')
  - document.createElement('footer')
  - 由于创建出来的元素是内联元素，所以需要转换成块级，高度和宽度才会生效
    - header,footer{display:block;}
- 方案二
  - 使用封装好的插件html5shiv.js解决兼容性问题
```

```

11. 分别写出以下几个`HTML`标签：文字加粗、下标、居中、字体

加粗：<strong>加粗</strong>
下标：<sub>下标</sub>
上标：<sup>上标</sup>
居中：<center>居中</center>

字体：<font>字体</font>

<!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>
  </head>
  <body>
    <strong>加粗</strong>
    <sub>下标</sub>
    <sup>上标</sup>
    <!-- 官方不推荐使用 center font -->
    <center>居中</center>
    <font>字体</font>
  </body>
</html>

在这里插入图片描述

12. `Doctype`作用？你知道多少种`Doctype`文档类型？

Doctype作用
- Doctype它必须位于文档最前面，处于html标签之前。就是告诉浏览器使用的是哪种html或者xhtml
你知道多少种Doctype文档类型
- 严格版本
- 过滤版本
- 基于框架html版本

前端开发面试题(HTML、CSS)

前端开发面试题(HTML、CSS)

1. 一个 200 * 200 的div在不同分辨率屏幕下左右居中，用css实现：

2. 写一个左中右布局占满屏幕，其中左、右两块固定宽 200，中间自适应宽，要求先加载中间块，请写出结构及样式：

3. 简述清除浮动的几种方法：

4. 行内元素有哪些？块级元素有哪些？

5. 画图解释一下CSS的盒子模型。

6. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？

7. CSS3 新增伪类举例

8. flex布局的应用场景

9. 常见浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？解决方法是什么，常用hack的技巧？

10. html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？

11. 分别写出以下几个HTML标签：文字加粗、下标、居中、字体

12. Doctype作用？你知道多少种Doctype文档类型？

猜你喜欢

1. 一个 200 * 200 的`div`在不同分辨率屏幕下左右居中，用`css`实现：

5. 画图解释一下`CSS`的盒子模型。

6. `CSS`选择符有哪些？哪些属性可以继承？优先级算法如何计算？

7. `CSS3` 新增伪类举例

10. `html5`有哪些新特性？如何处理`HTML5`新标签的浏览器兼容问题？

11. 分别写出以下几个`HTML`标签：文字加粗、下标、居中、字体

12. `Doctype`作用？你知道多少种`Doctype`文档类型？