2021届前端面试知识点（HTML&CSS）

最新推荐文章于 2021-08-25 13:56:32 发布

憨憨阿狗

最新推荐文章于 2021-08-25 13:56:32 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/Dr_BigJoe/article/details/108022941

版权

2021届前端面试知识点（HTML&CSS）

声明：以下为我本人在准备21届秋招笔面试时总结的学习笔记，参考了许多网上大神的文章，供大家学习参考交流，如有版权问题请联系我，侵删。

================================================

1. HTML5新特性

HTML语义化：根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码。
- 新增的语义化标签：<header>、<nav>、<article>、<section>、<aside>、<footer>、<time>等。
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
- 提高用户体验，方便其他设备解析；
- 比<div>标签有更加丰富的含义，方便开发与维护；
- 方便搜索引擎能识别页面结构，有利于SEO(搜索引擎优化)。
增强型表单：html5修改一些新的input输入特性，改善更好的输入控制和验证，如：color，date，datetime，month，week，email。html5新增表单属性，如：placehoder 输入框默认提示文字，required要求输入的内容是否可为空，pattern 描述一个正则表达式验证输入的值，min/max 设置元素最小/最大值，step 为输入域规定合法的数字间隔，height/wdith 用于image类型<input>标签图像高度/宽度，autofocus 规定在页面加载时，域自动获得焦点，multiple 规定<input>元素中可选择多个值。
视频Video和音频audio
Canvas绘图
SVG绘图：SVG指可伸缩矢量图，SVG用于定义用于网络的基于矢量的图形，SVG使用XML格式定义图形，SVG图像在放大或改变尺寸的情况下其图形质量不会有损失，SVG是万维网联盟的标准。
地理定位 geolocation
拖放API：在html5中，拖放是标准的一部分，任何元素都能够拖放。
WebWorker (为JavaScript创造多线程环境)：Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。
WebStorage：使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以键值对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：
- localStorage - 没有时间限制的数据存储；
- sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage。
WebSocket：WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

如何区分HTML5和HTML？ <!DOCTYPE html>

声明位于文档中的最前面的位置，处于标签之前。声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。在 HTML 4.01 中，声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML，因此不要求引用 DTD。HTML 4.01 规定了三种不同的声明，分别是：Strict、Transitional 和 Frameset。

HTML5 中仅规定了一种: ，加上就表示该页面采用了W3C标准，这样做可以增强页面的兼容性，降低对浏览器的依赖性。不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。

2. CSS3新特性

选择器(:last-child，:first-child，:nth-child(n))；
背景和边框(background-size，background-origin；圆角border-radius；阴影box-shadow)；
文本效果(文本阴影:text-shadow；word-break:换行规则)；
2D/3D转换 transform；
过渡效果(transition)/动画(animation)；
变形(transform)：旋转rotate，移动translate，缩放scale，扭曲skew，矩阵matrix；

3. 边界塌陷

兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值。
父子div：如果父级div中没有border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content(文本)中的其中一个，然后按此div 进行margin。

解决方法：

给父元素father添加一个border边框；
给父元素添加一个overflow属性:
- overflow:auto 有可能出现滚动条，影响美观。
- overflow:hidden 可能会带来内容不可见的问题。
给父元素添加一个display: fixed;
给父元素添加一个display: table;
将子元素的margin改为父元素的padding；
给子元素son添加一个兄弟元素属性为content:""; overflow: hidden;

4. CSS中的元素分类、CSS四种引入方式

常见的块级元素有 div、form、table、p、h1～h5、ul 、li、dl、ol、pre 等。

常见的行内元素有span、a、strong、label、input、select、textarea、img、em、br 等。

行内元素会在一条直线上排列(默认宽度只与内容有关)，块级元素各占据一行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或其他行内元素。
行内元素与块级元素属性的不同，主要是盒模型上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

元素有几种方法会转换行块属性？

方法一：最简单的肯定是display：block/inline/inline-block/table等。
方法二：行内元素设置float属性后，此元素的display会赋值为block，且拥有浮动特性，原留白也会消失。
方法三：行内元素设置position属性值为absolute或fixed后，此元素的display也会赋值为block。
注意：方法二和方法三转换为块级元素后，这两种方法不会继承父元素的宽度。

引入方式：

行内式：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
嵌入式：嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

链接式：将一个.css文件引入到HTML文件中：

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

导入式：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
```
<style type="text/css">
	@import"mystyle.css"; 此处要注意.css文件的路径
</style>　
```

注意： 导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。其他区别见 27。

5. CSS选择器、优先级和继承

CSS选择器：

元素选择器（div, h1, p）
类选择器（.myclassname）单类选择器，多类选择器
id选择器（ # myid）
属性选择器（a[rel = “external”]）
派生选择器：

5.1 后代选择器（li a）

5.2 子元素选择器（ul > li）

5.3 相邻兄弟选择器（h1 + p）
伪类选择器（a: hover, li:nth-child）

CSS优先级： !important > id > class > tag

CSS优先级是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
   1 内联样式表的权值最高       style=""-------------------1000；
　 2 统计选择符中的ID属性个数。    #id    －－－－－－－－－－－－－100
　 3 统计选择符中的CLASS属性个数。 .class  －－－－－－－－－－－－－10
   4 统计选择符中的HTML标签名个数。     p     －－－－－－－－－－－－－-1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

CSS继承：

可继承的样式： font-size，font-family，color, ul，li，dl，dd，dt；
不可继承的样式：border，padding，margin，width，height，background；

6. css水平、垂直居中的写法

水平居中：

行内元素: text-align: center;
块级元素: margin: 0 auto;
position:absolute; left:50%; transform:translateX(-50%)
display:flex; justify-content: center;

垂直居中：

设置line-height 等于height;
父元素设置line-height，子元素设置display: inline-block; vertical-align: middle;
父元素设置display: table;，子元素设置display: table-cell; vertical-align: middle;
position：absolute; top:50%; transform:translateY(-50%);
display:flex; align-items: center;

7. 如何让一个盒子水平垂直居中

//已知宽高
.div1{
    width:400px;
    height:400px;
    position:absolute;
    left:50%;
    top:50% 
    margin:-200px 0 0 -200px;    
}   

//未知宽高
.div1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);   
}

8. CSS隐藏元素的几种方法

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

9. position属性、绝对定位相对定位

Position属性值有：static、fixed、absolute、relative和sticky。一旦给元素加上absolute或float就相当于给元素加上了display:block;

relative: 相对定位，相对于自己本身在正常文档流中的位置进行定位，相对它原来的位置，原来在标准流中的位置继续占有。
absolute: 生成绝对定位，相对于最近一级定位不为static的父元素进行定位。（子绝父相）。
fixed: （老版本IE不支持）对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，生成绝对定位，相对于浏览器窗口或者frame进行定位，跟父元素没关系。不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。
static: 默认值，没有定位，元素出现在正常的文档流中。相当none 没有定位的意思。没有边偏移我们几乎不用。
position:sticky; 是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed)。可以看出这是他们哥几个中最聪明的了，可谓后来居上呀。
```
#box { position: sticky; top: 20px; }
```
在 viewport 视口滚动到元素 top 距离小于 20px 之前，元素为相对定位。之后，元素将固定在与顶部距离 20px 的位置，直到 viewport 视口回滚到阈值以下。

but，我们还是要先了解在使用过程中的一些事项：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。
3、父元素的高度不能低于sticky元素的高度。
4、sticky元素仅在其父元素内生效。

10. 盒模型宽高值计算、box-sizing和负值作用

盒模型的组成，由里向外content, padding, border, margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度；
在标准的盒子模型中，width指content部分的宽度；
box-sizing的使用：

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box。

负值作用：当设置margin-top、margin-left为负数时，元素自身会进行移动，但原先所占的位置依然有效，设置margin-bottom/right为负数，元素并不会向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因为位置也就发生变化了。还要注意的是，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。（也就是为什么负右边距和负下边距，不会使元素偏移，只会后面的文档流跟随移动）。

在文档流中负margin元素的显示结果一句总结：在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

11. 两个行内块元素同行显示时，会出现3px空白间隙，为什么？如何解决？

这个造成原因是浏览器会把两个块元素中间的换行符解析出来。

解决方法：

父元素设置：font-size: 0; 子元素单独设置字体大小：font-size: 16px;
直接将两个行内块写在一行上。

行内块元素和行内元素的区别？

行内块元素就是将块元素以行的形式展示出来，同时保留了块元素可以设置的css属性。

12. CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

display ：指定 HTML 元素盒子类型。display: flex; 设置为弹性盒子。
flex-direction：决定主轴的方向(即项目的排列方向)。row|row-reverse|column|column-reverse 。
justify-content：定义了项目在主轴上的对齐方式。flex-start|flex-end|center|space- between|space-around 。
align-items：定义项目在副轴上如何对齐。flex-start|flex-end|center|baseline|stretch 。
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行。默认情况下，项目都排列在一条线上。定义如果一条轴线上排不下，如何换行。nowarp|warp|warp-reverse 。
align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。flex-start|flex-end|center|space-between|space-around|stretch 。
flex-flow：是flex-direction和flex-warp属性的简写形式，默认值为row nowarp;
order：设置弹性盒子的子元素排列顺序。
align-self：在弹性子元素上使用。覆盖容器的 align-items 属性。
flex：设置弹性盒子的子元素如何分配空间。

13. flex: 1表示什么？

flex 是 flex-grow、flex-shrink、flex-basis 的缩写。flex 的默认值是以上三个属性值的组合，flex 的默认值是 0 1 auto。

当 flex 取值为 none，则计算值为 0 0 auto；
当 flex 取值为 auto，则计算值为 1 1 auto；

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;        /* 定义弹性盒子元素的扩展比率 */
    flex-shrink: 1;      /* 定义弹性盒子元素的收缩比率 */
    flex-basis: 0%;      /* 定义弹性盒子元素的默认基准值 */
}

14. CSS实现不换行/文本超出隐藏显示省略号

单行文本不换行多余文本显示省略号：

div{
   width:200px;
   white-space:nowrap;   /* 规定段落中的文本不进行换行 */
   overflow:hidden;
   text-overflow:ellipsis;    /* 超出文本显示省略号 */
}

多行文本超出隐藏多余文本显示省略号：

div{
    display:-webkit-box; /* autoprefixer: off */
    overflow:hidden;
    text-overflow:ellipsis; 
    -webkit-box-orient:vertical; /* autoprefixer: on */   /* 从上向下垂直排列子元素 */
    -webkit-line-clamp:2;   /* 限制在一个块元素显示的文本的行数 */
}

15. 解释下浮动和它的工作原理？清除浮动的方法？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素。
与浮动元素同级的非浮动元素（内联元素）会跟随其后。
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

最常见的是父元素没有设置高度，而里面的子元素都设置浮动之后就会脱离文档流，释放空间，于是父元素的高度没有别的元素撑起来，父元素高度就变为0，因为子元素浮动后是不占据父元素的位置空间的。这个现象就是浮动导致的父元素高度塌陷，此时需要清除浮动。

清除浮动的几种方法：

在浮动元素后边加上一个div，设置 clear:both;
```
<div style="clear:both;"></div>
```

使用after伪元素：想让谁清除浮动就给谁加一个 class=“clearfix”

/* 伪元素默认为行元素：*/
.clearfix::after{
    content:" ";
    display:block;
    /* block的clear才会生效 */
    clear:both;   
}

给父元素设置 overflow: hidden; 或者 overflow: auto。原理是overflow: hidden; 这句会触发BFC，而BFC中有一条规则是渲染页面时浮动的元素也参与运算，所以此时父元素就有了高度。
父级元素与子元素同时浮动。
手动给父元素添加高度（不推荐，因为往往父元素高度不能定死）。

伪类与伪元素的区别：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如:hover和:active等，通常伪类使用单冒号。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以称其为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式，虽然用户可以看到这些文本，但是这些文本实际不在文档树中。比如::before和::after等，CSS3规范中的要求使用双冒号(::)表示伪元素。

16. 伪类 a:link / a:hover / a:visited / a:active

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

17. 响应式布局与自适应布局

响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

bootstrap制作出来的网页是响应式的，URL不会随着用户使用设备的屏幕宽度变化而变化，始终都是同一个URL，是网页中的代码根据屏幕不同宽度来实现如何布局的，bootstrap是响应式的、移动优先的框架。响应式框架的基本原理就是将一行（row）拆分为12个网格（grid），这样我们就可以基于网格进行各种形态的布局设计，断点是bootstrap响应式网格系统中的核心组成部分，从屏幕的宽度由小到大的顺序依次是xs（＜576px）、sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）这5个断点组成，因为是移动优先，所以在超小宽度的屏幕xs这个断点上默认无需指定，一般把md这个断点前的屏幕宽度视为手机屏幕，大于md的视为平板和电脑屏幕。

18. 自适应布局的时候用rem，rem为什么可以实现自适应布局？在不同的手机端表现是什么？

rem（font size of the root element）是CSS3新增的一个相对单位，是指相对于根元素的字体大小的单位。em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

使用rem之前，先要设置header里面的meta标签、以及在header写上<script>标签：

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
    </script>
</head>

如下写法，btn的宽度为 10 * 6 = 60px，btn的高度为 10 * 3 = 30px（前提是html根元素设置的font-size为10px）。

html{
    font-size:10px;
}
.btn {
    width: 6rem;
    height: 3rem;   
}

这时有两种方案，这样就会根据不同手机端的屏幕尺寸来变化，从而展示出设计师期望展示的各个组件的尺寸。

我们可以像淘宝一样，通过使用js去控制根元素中html的font-size的大小，进而改变按钮的大小。
也可以使用css媒体查询 @media 去设置页面中根元素的font-size属性。

19. 1px,1em,1rem,1vh含义

px: 像素，相对于屏幕分辨率而言，px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，更适用于响应式布局。em是相对于父元素，rem是相对于根元素。

em：em是相对于其父元素设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道它父元素的大小，元素的width/height/padding/margin用em的话是相对于该元素的font-size。

rem：rem相对于页面根元素<html>元素，通常做法是给html元素设置一个字体大小，然后其他元素的大小就是相对于根元素的大小。

vw/vh：全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相对于屏幕宽度和高度的1%，处理宽度的时候%单位更合适，高度vh更合适。

20. BFC（Block Formatting Context）是什么？应用？

BFC 就是 “块级格式上下文” 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Block-level Box 如何布局，并且这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。 BFC特性（功能）：1.使 BFC 内部浮动元素不会到处乱跑；2.和浮动元素产生边界。

BFC触发条件：

float: left / right，不是none
position: absolute / fixed
overflow: auto / scroll / hidden，不是visible
<html> 根元素
display: inline-block / table-caption / table-cell / flex

应用场景：

解决margin叠加的问题
用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
用于清除浮动，计算BFC高度。计算BFC高度时，浮动元素也参与计算。

21. HTML页面加载完成后，会触发那个事件？onready还是 onload？onready和onload的区别？

1.onready比onload先执行。

2.onready在dom元素结构完成之后就会执行，而onload是在页面所有元素加载完成后执行。

3.onload只执行最后一个而onready有多少执行多少。

22. css动画特性可以用js实现，为什么还要用css实现？

1. 不占用JS主线程；

2. 可以利用硬件加速；

3. 浏览器可对动画做优化（元素不可见时不动画，减少对FPS的影响）。

23. 两个子盒子分别放到父盒子的最左和最右，怎么做？

<body>
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
    </div>
</body>

两个子盒子分别左float右float，父盒子设置 overflow: hidden;

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            background-color: gray;
            overflow: hidden;
        }
        .son1{
            background-color: #84a42b;
            width: 200px;
            height: 200px;
            float: left;
        }
        .son2{
            background-color: #336699;
            width: 200px;
            height: 200px;
            float: right;
        }
    </style>
</head>

使用弹性盒子，父盒子设置display: flex; justify-content: space-between;

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .father{
            background-color: grey;
            display: flex;
            justify-content: space-between;
        }
        .son1{
            background-color: #84a42b;
            width: 200px;
            height: 200px;
        }
        .son2{
            background-color: #336699;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

3.父子盒子都设置position: absolute; 两个子盒子分别设置距离左右的距离。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            position: absolute;
            background-color: grey;
            width: 100%;
        }
        .son1{
            position: absolute;
            background-color: #84a42b;
            width: 200px;
            height: 200px;
            left: 0;
        }
        .son2{
            position: absolute;
            background-color: #336699;
            width: 200px;
            height: 200px;
            right: 0;
        }
    </style>
</head>

24. 圣杯布局

圣杯布局的要求：

三栏布局中，中间的页面优先加载。
header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

实现流程：

首先中、左、右三个div，中div要写在其他两个的上面，因为代码是从上往下加载，想要优先加载中间页面，就要写在最上面。
其次中左右三个div外面要套一个父div，用于清除浮动和设置 padding: 0 100px; （其中100px是左右div的宽度，padding的第二个值要等于左右div的宽度），中间部分因为要自动填充整个区域，所以设置为 width: 100%。
左div设置 margin-left: -100%; 右div设置 margin-left: -100px; 让三个div显示在同一行并且顺序正确（左中右）。
左div设置 position: relative; left: -100px; 右div设置 position: relative; right: -100px; 让左右两个div向两边移动，不要占据中间div的空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: gray;
        }
        .footer{
            background-color: gray;
        }
        .center,.left,.right{
            float: left;
        }
        /*.clearfix::after{*/
        /*    content: "";*/
        /*    display: block;*/
        /*    clear: both;*/
        /*}*/
        .container{
            padding: 0 100px;
            overflow: hidden;
        }
        .left{
            background-color: cornflowerblue;
            width: 100px;
            height: 500px;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }
        .right{
            background-color: chocolate;
            width: 100px;
            height: 500px;
            margin-left: -100px;
            position: relative;
            right: -100px;
        }
        .center{
            background-color: darkseagreen;
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="clearfix container">
        <div class="center">中间区域</div>
        <div class="left">左区域</div>
        <div class="right">右区域</div>
    </div>
    <div class="footer">底部</div>
</body>
</html>

25. 双飞翼布局

双飞翼布局和圣杯布局功能相同，只是在实现方法上不同。

实现思路：

对中左右div设置浮动进行排序（左中右），设置负外边距让左中右元素处于同一行，左div设置 margin-left: -100%; ，右div设置 margin-left: -100px; 。
用一个父div套在中div的外面，在父div上设置 width: 100%; float: left; 。
中div设置 margin: 0 100px; （100px = 左右div的宽度）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: gray;
        }
        .footer{
            background-color: gray;
            clear: both;
        }
        .container{
            width: 100%;
            float: left;
        }
        .left{
            background-color: cornflowerblue;
            width: 100px;
            height: 500px;
            float: left;
            margin-left: -100%;
        }
        .right{
            background-color: chocolate;
            width: 100px;
            height: 500px;
            float: left;
            margin-left: -100px;
        }
        .center{
            background-color: darkseagreen;
            height: 500px;
            margin: 0 100px;
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="container">
        <div class="center">中间区域</div>
    </div>
    <div class="left">左区域</div>
    <div class="right">右区域</div>
    <div class="footer">底部</div>
</body>
</html>

26. 瀑布流布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            column-count: 3;   /* 设置一行显示3列 */
            column-gap: 0;   /* 规定列间的间隔 单位像素 */
        }
        .item{
            break-inside: avoid;  /* 元素内部避免进行分页的分页行为 */
            padding: 2px;
        }
        .item img{
            display: block;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">
            <img src="https://picsum.photos/360/460?random=15">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=16">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=17">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=18">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=19">
        </div>

    </div>
</body>
</html>

27. CSS中transition和animate有何区别？

Transition 过渡：

Transition的翻译是过渡，从字面理解其实也是动画的一种，只是它关注的点相对比较简单。对于指定的属性在发生变化的时候，浏览器自动按照指定的时间进行自然的过渡。transition的属性有以下4个：

transition-property：需要过渡的属性，不是每个属性都能过渡的。
transition-duration：指定从一个属性到另一个属性过渡所要花费的时间。默认值为0，为0时，表示变化是瞬时的，看不到过渡效果。
transiton-timing-function：就是过渡的动画类型。可用的类型有liner（匀速）、ease-in(减速)、ease-out（加速）ease-in-out（先加速再减速）、cubic-bezier：三次贝塞尔曲线，可以定制。
transition-delay：指定检测到过渡行为之后延迟一定时间后才开始进行执行。

写法分开合起来写都可以：

transition: height 1s; //通常用法，属性和时间

//过渡时间、延迟时间、属性、类型
transition: 1s 1s height ease;

//或者分开写
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;  /*属性分开写*/

transition所有的运行都需要条件进行触发。比如:hover、:focus、:checked或者js操作css样式的变更等等。以上造成的transiton的优点就是简单易用，方便，但有局限性：

transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

/* transition */
.item{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
}
.item:hover{
    width:300px;
}

Animation 动画：

CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。要实现animation动画，就需要定义动画类型，并且在样式中调用。animation在调用的时候，也有很多属性：

animation-name：动画名称，也就是@keyframes定义的动画。
animation-duration：指定一个周期需要的时间。
animation-timing-function ：速度曲线，和transition-timing-function一样，可用的类型有liner（匀速）、ease-in(减速)、ease-out（加速）ease-in-out（先加速再减速）、cubic-bezier：三次贝塞尔曲线，可以定制。
animation-delay：延迟时间。
animation-iteration-count：播放的次数、默认1。
animation-direction：默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放。
animation-state：默认为running，播放，paused，暂停。
animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。

/* animate */
@keyframes mymove  /* 动画关键帧定义 */
{
    from {left:0;}
    to {left:200px;}
}
.item{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 5s infinite;  /* 元素中调用 */
}

transition和animate区别：

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
transition是css中检测指定属性变化进行自动补间动画的属性，一般是用来过渡的，没有时间轴的概念，通过事件触发(一次)，没有中间状态(只有开始和结束)。
animate是先指定好动画过程中的关键帧属性，进行动画的属性，有时间轴的概念(帧可控)，可以重复触发和有中间状态。
过渡的开销比动画小，前者用于交互比较多，后者用于活动页多。

28. link和@import的区别？

两者都是外部引用CSS的方式，link链接式，@import导入式，两者存在一定的区别：

1. 从属关系区别：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2. 加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3. 兼容性区别：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
　4. DOM可控性区别：可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

29. 前端常见的布局方式

静态布局：最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景。
弹性布局：弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是，使用em或rem单位（lem=16px，1rem=10px）进行相对布局，相对使用百分比更加方便、灵活，相应同时支持浏览器的字体大小调整和缩放的等正常显示。
自适应布局：自适应布局分别为不同屏幕不同分辨率定义布局，即是创建多个静态页面，每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
流式布局(又名百分比布局 %)：使用%百分比定义宽度，高度大都是用px来固定住，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”）。圣杯布局和双飞翼布局都是流式布局。
响应式布局：通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

30. 三栏布局的实现及优缺点

布局方案	实现	优点	缺点
Float布局	左右中三列，左列左浮动，右列右浮动，中间列设置左右margin	比较简单，兼容性也比较好	浮动元素脱离文档流，使用的时候只需要注意一定要清除浮动。
Position布局	左中右三列（无顺序），根据定位属性去直接设置各个子元素位置		元素脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，有效性和可使用性比较差
Table布局	左中右三列，父元素display: table;子元素display: table-cell;居中子元素不设宽度
Flex布局	左中右三列，父元素display: flex;两侧元素设宽；居中子元素flex: 1;		存在IE上兼容性问题，只能支持到IE9以上
Grid布局	左中右三列，父元素display: grid;利用网格实现		兼容性不好，IE10+上支持，而且也仅支持部分属性

31. flex实现三栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .flex-box{
        display: flex;
        height:600px;
        width:100%;
    }
    .item1,.item3{
        width: 200px;
        background-color: gray;
    }
    .item2{
        flex:1 1 auto;
        background:green;
    }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="item1">
            左
        </div>
        <div class="item2">
            中
        </div>
        <div class="item3">
            右
        </div>
    </div>
</body>
</html>