2021 6月份前端面试 | HTML +CSS

zz
3,419 阅读10分钟

「本文已参与好文召集令活动，点击查看：后端大前端双赛道投稿，2万元奖池等你挑战！」

1.html语义化

意义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意：

  • 尽可能少的使用无语义的标签 div 和 span；
  • 在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
  • 不要使用纯样式标签，如：b、font、u 等，改用 css 设置。
  • 需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用CSS 指定就不用他们），strong 默认样式是加粗（不要用 b），em 是斜体（不用i）；
  • 使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表
  • 头和一般单元格要区分开，表头用 th，单元格用 td；
  • 表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
  • 每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置id 属性，在 lable标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。

2.canvas 相关

常用 api:

  • fillRect(x,y,width,height)实心矩形
  • strokeRect(x,y,width,height)空心矩形
  • fillText( "Hello world" , 200 , 200 );实心文字
  • strokeText( "Hello world" , 200 , 300 )空心文字 新标签兼容低版本
  • ie9 之前版本通过 createElement 创建 html5 新标签
  • 引入 html5shiv.js

3. svg和canvas的区别？

  • canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史
  • canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真
  • canvas需要在js中绘制 ；svg在html绘制
  • canvas支持颜色比svg多
  • canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作

4.html5有哪些新特性?

  • HTML5主要是关于图像，位置，存储，多任务等功能的增加。
  • 拖拽释放(Drag and drop) API
  • 语义化更好的内容标签（header,nav,footer,aside,article,section）
  • 音频、视频API(audio,video)
  • 画布(Canvas) API
  • 地理(Geolocation) API
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 表单控件，calendar、date、time、email、url、search

5.如何处理HTML5新标签的浏览器兼容问题？

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

6.说说 title 和 alt 属性

  • 两个属性都是当鼠标滑动到元素上的时候显示
  • alt 是 img 的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字。
  • title 属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，是对dom元素的一种类似注释说明

7.HTML全局属性(global attribute)有哪些

  • class :为元素设置类标识
  • data-* : 为元素增加自定义属性
  • draggable : 设置元素是否可拖拽
  • id : 元素 id ，文档内唯一
  • lang : 元素内容的的语言
  • style : 行内 css 样式
  • title : 元素相关的建议信息

8.让一个元素水平垂直居中，到底有多少种方案？

水平居中

  • 对于 行内元素 : text-align: center;
  • 对于确定宽度的块级元素： （1）width和margin实现。margin: 0 auto;

（2）绝对定位和margin-left: -width/2, 前提是父元素position: relative

  • 对于宽度未知的块级元素 （1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。

（2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。

（3）绝对定位+transform，translateX可以移动本身元素的50%。

（4）flex布局使用justify-content:center

垂直居中

  1. 利用 line-height 实现居中，这种方法适合纯文字类
  2. 通过设置父容器 相对定位 ，子级设置 绝对定位 ，标签通过margin实现自适应居中
  3. 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
  4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
  5. table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

9.浮动布局的优点？有什么缺点？清除浮动有哪些方式？

浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一 个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好 像浮动元素不存在一样。

优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

清除浮动的方式

  • 添加额外标签
<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>
  • 父级添加overflow属性，或者设置高度
<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>
  • 建立伪类选择器清除浮动
//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>

10.使用display:inline-block会产生什么问题？解决方法？

问题: 两个display：inline-block元素放到一起会产生一段空白。

产生空白的原因 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据 CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被 转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

解决办法

（1）将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

（2）父元素中设置font-size: 0，在子元素上重置正确的font-size

（3）为子元素设置float:left

11.CSS如何进行圣杯布局

圣杯布局如图:

image.png

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.header,
			.footer {
				height: 40px;
				width: 100%;
				background: red;
			}

			.container {
				display: flex;
			}

			.middle {
				flex: 1;
				background: yellow;
			}

			.left {
				width: 200px;
				background: pink;
			}

			.right {
				background: aqua;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div class="header">这里是头部</div>
		<div class="container">
			<div class="left">左边</div>
			<div class="middle">中间部分</div>
			<div class="right">右边</div>
		</div>
		<div class="footer">这里是底部</div>
	</body>
</html>

12.什么是BFC？

W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。

13.触发条件

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下 文：

  • 根元素()
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-headergroup、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table）
  • overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 等等。

14.BFC渲染规则

  1. BFC垂直方向边距重叠
  2. BFC的区域不会与浮动元素的box重叠
  3. BFC是一个独立的容器，外面的元素不会影响里面的元素
  4. 计算BFC高度的时候浮动元素也会参与计算

15.画一个对话框

效果如下

image.png

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			.dialog {
				position: relative;
				margin-top: 50px;
				margin-left: 50px;
				padding-left: 20px;
				width: 300px;
				line-height: 2;
				background: lightblue;
				color: #fff;
			}

			.dialog::before {
				content: '';
				position: absolute;
				border: 8px solid;
				border-color: transparent lightblue transparent transparent;
				left: -16px;
				top: 8px;
			}
		</style>
	</head>
	<body>
		<div class="dialog">这是一个对话框鸭！</div>
	</body>
</html>

16.两个div上下排列，都设margin，有什么现象？

  • 都正取大
  • 一正一负相加

问：为什么会有这种现象？你能解释一下吗 是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加 BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。 出处。

17.说一下你知道的position属性，都有啥特点？

  • static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
  •  relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
  •  absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
  •  fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
  • sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定

18.CSS 怎么画一个大小为父元素宽度一半的正方形？

<!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>
      .outer {
        width: 400px;
        height: 600px;
        background: red;
      }

      .inner {
        width: 50%;
        padding-bottom: 50%;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

19.CSS 的权重和优先级?

权重

从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0

优先级

权重相同，写在后面的覆盖前面的 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

20.css 动画都有哪些？

animation、transition、transform、translate 这几个属性要搞清楚：

  • animation：用于设置动画属性，他是一个简写的属性，包含6个属性
  • transition：用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
  • transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系
  • translate：translate只是transform的一个属性值，即移动，除此之外还有 scale 等

往期文章

avatar
文章
阅读
粉丝