筱竹的博客(前端学习)

Appearance

On this page

前端基础面试题

包含：HTML、CSS 面试题

1、为什么一个网页中只允许有一个 h1 标签？

答案：h1 代表大标题，一个网页中只能有一个大标题，不能拥有多个带标题（就跟一篇文章一样，一篇文章都是一个大标题，不会有多个大标题）

2、CSS 标准盒模型包含哪些？

答案：标准盒模型 border, padding, content（内容）, margin

3、如何用纯 CSS 创建一个三角形？

css
#box {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

4、清除浮动有哪些方式？

答案：

  • 给父元素 div 定义 height
  • 在元素结尾处加空 div 标签 clear:both
  • 父元素 div 定义伪类:after :before 和 zoom
  • 父元素 div 定义 overflow:hidden

5、说一说你对语义化的理解

答案：

  • 用正确的标签做正确的事情！
  • HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  • 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
  • 有利于 SEO优化;
  • 使阅读源代码的人对网站更容易将网站分块儿，便于阅读维护理解;

6、简述一下 src 与 href 的区别

答案：

  • src用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

  • <script src ="js.js"></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部

  • href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

  • <link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式

7、css3 有哪些新特性？

  • 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
  • 弹性盒模型 display: flex;
  • 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
  • 圆角 border-radius: 5px;
  • 渐变 background:linear-gradient(red, green, blue);
  • 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
  • 转换
    • 旋转 transform: rotate(20deg);
    • 倾斜 transform: skew(150deg, -10deg);
    • 位移 transform: translate(20px, 20px);
    • 缩放 transform: scale(.5);
  • 平滑过渡 transition: all .3s ease-in .1s;
  • 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

8、如何垂直居中一个浮动元素？

答案：

css
/**方法一：已知元素的高宽**/

#div1 {
  background-color: #6699ff;
  width: 200px;
  height: 200px;
  position: absolute; //父元素需要相对定位
  top: 50%;
  left: 50%;
  margin-top: -100px; //自身一半的height，width
  margin-left: -100px;
}

/**方法二:**/

#div1 {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  margin: auto;
  position: absolute; //父元素需要相对定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

9、什么是 css sprite（精灵图）是什么？,有什么优点？

答案：

  • 概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
  • 优点：
    • 减少HTTP请求数，极大地提高页面加载速度
    • 增加图片信息重复度，提高压缩比，减少图片大小
    • 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

10、为什么要初始化 CSS 样式?

答案：

为了保证各个浏览器显示一致（代码兼容性），我们需要做一些初始化样式操作。

11、什么是bootstrap？为什么要使用bootstrap？

答案：

什么是bootstrap？

  • Bootstrap是基于 HTML、CSS、JAVASCRIPT 的开源框架，它简洁、直观、强悍、灵活，使得 Web开发更加快捷，
  • 用于开发响应式布局、移动设备优先的 WEB项目。

为什么使用 Bootstrap？

  • 跨设备
  • 跨浏览器（chrome，IE9以上，Firefox，Safari，Opera...）
  • 响应式布局
  • 具有实用性强的组件

12、display 有哪些值？并说明它们的作用

答案：

  • block 转换成块状元素。
  • inline 转换成行内元素。
  • none 设置元素不可见。
  • inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
  • ……

13、css 有哪些属性可以继承？

答案：

1、字体系列属性

font-family：字体系列

font-weight：字体的粗细

font-size：字体的大小

font-style：字体的风格

2、文本系列属性

text-align：文本水平对齐

line-height：行高

color：文本颜色

3、元素可见性：

visibility：控制元素显示隐藏

……

14、定位的值有哪几种？区别是什么？

答案：

  • static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
  • relative（相对定位）：生成相对定位的元素，通过 top,bottom,left,right 的设置相对于其正常（原先本身）位置进行定位。可通过 z-index 进行层次分级。
  • absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过 z-index 进行层次分级。
  • fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过 z-index 进行层次分级。

15、在 Less 中如何表示（声明）变量？

答案：

需要使用@符号声明变量, 并使用冒号:来分配变量中的特定值。还必须在变量的值之后添加分号;

less
@color: #800080;

div {
  color: @color;
}

16、请列举几种隐藏元素的方法

答案：

  • visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
  • display: none；元素会变得不可见，并且不会再占用文档的空间。
  • position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的 left 负值定位，使元素定位在可见区域之外。
  • opacity: 0；一个 CSS3 属性，设置 0 可以使一个元素完全透明，制作出和 visibility 一样的效果。

17、行内元素有哪些？块级元素有哪些？

答案：

行内元素：<a>、<span>、<img>、<input>、<button>等

块级元素：<div>、<p>、<form>、<ul>、<li>、<table>等

18、块级元素和行内元素的区别？

答案：

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。

  • 块级元素可以设置 width,height 属性
  • 行内元素设置 width,height 属性无效，它的长度高度主要根据内容决定
  • 块级元素即使设置了宽度,仍然是独占一行
  • 块级元素可以设置 margin 和 padding 属性
  • 行内元素的 margin 和 padding 属性,水平方向的 padding-left,padding-right,margin-left,margin- right 都产生边距效果,但竖直方向的 padding-top,padding-bottom,margin-top,margin-bottom 却不会产生边距效果
  • 块级元素对应于 display:block
  • 行内元素对应于 display:inline

19、<img>的 title 和 alt 有什么区别?

答案：

  • alt 是图片加载失败时，显示在网页上的替代文字；
  • title 是鼠标放上面时显示的文字。
  • alt 是 img 必要的属性，而 title 不是。

20、 margin 和 padding 分别适合什么场景使用？

答案：

  • 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin
  • 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding

22、flex 布局优缺点？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。

优点：容易上手，根据 flex 规则很容易达到某个布局效果。

缺点：浏览器兼容性比较差，只能兼容到 ie9 及以上。

23、Less 是什么？为什么要使 Less？

​ Less 是 CSS 预处理器。less 是一种特殊的语法，用于编译成 CSS，Less 将 CSS 赋予了动态语言的特性，如变量，继承，运算等。

  • 减少重复写代码，开发更快
  • 完全兼容 CSS 代码
  • 结构清晰，便于扩展（嵌套功能）
  • 可以方便地屏蔽浏览器私有语法差异（函数功能）