以下内容为 css 基础篇（1）

1. 如何解决 a 标点击后 hover 事件失效的问题？

改变 a 标签 CSS 属性的排列顺序：
（爱恨原则）link -> visited -> hover -> active

a:link：未访问的样式
a:visited：已经访问的样式
a:hover：鼠标移上去时的样式
a:active：鼠标按下的样式

按照这样书写：
可以解决 a:link 样式被 a:visited 样式覆盖问题。
在 CSS 中，如果对于相同元素针对不同条件的定义，适宜将最一般的条件放在最上面，依次向下，保证最下面的是最特殊的条件（可以理解为样式覆盖）。

这样，浏览器显示元素的时候，才会从特殊到一般、逐级向上验证条件。

举例说明：

我想让未访问链接颜色为蓝色，悬浮链接为绿色，已访问链接为红色：

第一种情况：我定义的顺序是a:visited-红色、a:hover-绿色、a:link:蓝色，这时会发现：把鼠标放到未访问过的蓝色链接上时，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿。

第二种情况：我把 CSS 定义顺序调整为：a:link、a:visited、a:hover，这时，无论你鼠标经过的链接有没有被访问过，它都会变成绿色啦。

这是因为，一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性。

在第一种情况下，a:link 离它最近，所以它优先满足同时拥有【a:link，a:hover】中的 a:link，而放弃 a:hover 的重复定义（hover 样式被 link 给覆盖了）。
在第二种情况，无论链接有没有被访问过，它首先要检查是否符合 a:hover 的标准（即是否有鼠标经过它），满足，则变成绿色，不满足，则继续向上查找，一直找到满足条件的定义为止。

奇淫技巧--记住正确排序：（l v h a ）==》LV好啊（取的首字母)

2. 响应式布局

从目前了解的情况，pc 和 h5 使用一套响应式的代码的场景比较少了，大多是 pc,h5 各自维护一套代码。

1.使用CSS3媒体查询@media 查询

@media screen and (max-width:980px ) {
 body{
 background-color: red;
 }
}

2.flex布局

弹性盒布局模型是css3规范中提出的一种新的布局方式。

目的：提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间

优势：这种布局模式已被主流浏览器所支持，可以在web应用开发中使用。

3. Flex 布局

Flex（Flexible Box）布局称为 "弹性布局"，可以为网页的布局提供最大的灵活性，取代了往常的浮动（float）布局，并且任何一个容器都可以设置 Flex 布局。
注：设置 Flex 布局后，子元素的 Float 布局将失效

3-1 Flex 中的四大概念

容器：如果给一个标签添加 display:flex;，那么这个标签就是一个容器
项目：在容器中的直接子元素叫项目（一定是直接子元素）
主轴：项目的默认排序方向就是主轴（默认横向排列，一个容器可以有多根主轴）
交叉轴：和主轴垂直的那个轴，就是交叉轴

图1

图2

3-2 容器的属性

Flex-direction --属性决定主轴的方向
Flex-wrap -- 属性决定项目排不下时如何换行
Flex-flow -- flex-direction 和 flex-wrap 的简写形式
justify-content -- 水平对齐
align-items -- 垂直对齐
align-content -- 决定了多根主轴的对齐方式

1.Flex-direction（属性决定主轴的方向）

row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上端
column-reverse：主轴为垂直方向，起点在下端

2.Flex-wrap(属性决定项目排不下时如何换行)

norwrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

3.Flex-flow（属性是 flex-direction 和 flex-wrap 的简写形式）

flex-flow: flex-direction || flex-wrap;

4.justify-content(沿着主轴的方向--一般是水平对齐)

flex-start；（默认值），项目左对齐
flex-end：项目右对齐
center: 居中对齐
space-between：项目两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等

5.align-items(属性决定项目在交叉轴上如何对齐--一般是垂直对齐)

flex-start 从上而下
flex-end 从下到上
center 挤在一起居中显示
stretch 拉伸（设置拉伸这个属性的时候，不能给子元素设置高度,基线对齐） 注:必须给当前的容器设置高度才会起作用

6.align-content（属性决定了多根主轴的对齐方式）

stretch（默认值）：轴线占满整个交叉轴
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分
space-around：每根轴线两侧的间隔都相等

3-3 项目属性

项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

（1）order（属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0）

（2）flex-grow（属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大）

（3）flex-shrink（属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小）

（4）flex-basis(属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小,也可以设置 xx px,项目将占据固定空间)

（5）flex（属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选）

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

（6）align-self（属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch）

4.使元素消失的方法

visibility:hidden 该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display:none 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
z-index=-1 把元素遮盖起来，并且不会改变页面布局，可以理解被其它元素压在下面了
opacity：0, 该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如 click 事件也能触发 ，常用于设置图片透明度为 0 ，然后加个点击事件，点击上传文件
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外；
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
< div hidden="hidden" > HTML5 属性,效果和 display:none;相同，但这个属性用于记录一个元素的状态；
height: 0 ; 将元素高度设为 0 ，并消除边框；
filter: blur(0) ; CSS3 属性，括号内的数值越大，图像高斯模糊的程度越大，到达一定程度可使图像消

奇淫技巧：隐藏透明区域外，缩放压住高度0

rgba 和 opacity 透明有何不同:

rgba()只作用于元素自身的颜色或背景色，对元素的内容没有影响。
opacity 在作用于元素自身的颜色或背景色的同时，也作用于元素内的内容的透明度。

5. css 盒模型

css 中，有两种盒模型，通过 box-sizing 切换：

当设置为 content-box 时，属于标准盒模型，在设置宽度和高度时，只包含 content，不包含 padding 和 border；
而设为 border-box 时，属于 IE 盒模型，设置宽度和高度时，包含 content、padding 和 border。

标准（W3C）盒子模型：width = 内容宽度（content） + border + padding + margin
低版本IE盒子模型： width = 内容宽度（content + border + padding）+ margin

6. 选择器怎么解析的

样式系统从关键选择器开始，从右向左依次查找，如果出现未匹配的情况会放弃规则，否则会左移直至匹配完成。
因此在写样式时，应尽量选择 ID 选择器或 class 选择器作为关键选择器，并且减少样式的层级，降低消耗。

7. 选择器

7-1 选择器分类

id 选择器(#myid)
类选择器(.myclass)
标签选择器(div, h1,p)
通配符选择器(*)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
属性选择器(a[rel="external"])
伪类选择器(:link, :visited, :active , :hover, :before, :after)

7-2 选择器优先级

选择器类别	说明	权重	权值
!important	强制使用此样式	权重最高	权值最高
行内样式	style = ""	（1.0.0.0）	1000
id 选择器	#id	（0.1.0.0）	100
类选择器	.id	（0.0.1.0）	10
元素选择器	div	（0.0.0.1）	1

通配符 > 继承 > 浏览器默认

7-3 css3 新增的伪类

:first-child 匹配父元素中第一个子元素
E:first-child 它表示：只要 E 元素是它的父级的第一个子元素，就选中。它需要同时满足两个条件，一个是第一个子元素，另一个是这个子元素刚好是E。
以下 2 中解读都是错误的:
- 误解一：认为 E:first-child 选中 E 元素的第一个子元素。
- 误解二：认为 E:first-child 选中 E 元素的父元素的第一个 E 元素。
:last-child 匹配父元素中最后一个子元素
:nth-child(n) 匹配父元素中第 n 个子元素（n 可以是一个数字，一个关键字，或者一个公式）
- 参数 n 时选中所有行
- 参数为 n+i 时表示从第 i 行开始下面的都被选中，如 n+3，从第 3 行开始下面全部选中
- 参数为-n+i 时表示选中前 i 个元素，如-n+6 表示选中前 6 个
- 2n 表示 2 的倍数行被选中，选中偶数行
- 2n+1 表示选中奇数行
- 3n 表示每个 3 行选中一次
- odd 表示奇数，even 表示偶数
:nth-last-child(n) 匹配倒数第 n 个同级兄弟元素
:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素
:root 根元素
:not(selector)

7-4 选择器如何工作的

从右向左依次查询

8. 伪类和伪元素的区别

两者都是描述不在文本流中的东西。

其中伪类用单冒号表示，当元素处于某种状态时，为该元素添加样式，如 a 标签的 hover；
伪元素用双冒号表示，为了兼容老浏览器，有时候也会用单冒号表示，作用是创建不在文本流中的元素，并为其添加样式，如 ::before，在指定元素前添加元素。

9. BFC

BFC 指的是格式化上下文

9-1 当一个元素形成 BFC 后:

其内部元素的布局不会影响外部元素
外部元素的布局不会影响内部元素。

9-2 如何形成 BFC

根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
表格类元素
overflow 除了 visible 以外的值 (hidden、auto、scroll)【最常用】

9-3 BFC 的原理/BFC 的布局规则

BFC 内部的子元素，在垂直方向，边距会发生重叠。
BFC 在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
BFC 区域不与旁边的 float box 区域重叠。（可以用来清除浮动带来的影响）。
计算 BFC 的高度时，浮动的子元素也参与计算。

9-4 BFC 的应用

解决 margin 重叠
当父元素和子元素发生 margin 重叠时，解决办法：给子元素或父元素创建 BFC
BFC 区域不与 float 区域重叠
清除浮动

10. 定位

10-1 基本含义

相对定位，将元素的 position 设为 relative，元素相对于自身 content box 定位，仍占据原来位置空间；
绝对定位，将元素的 position 设为 absolute，元素相对于第一个 position 不为 static 的祖先元素的 padding box 定位，元素不占据原来位置空间；
固定定位，将元素的 position 设为 fixed，元素相对于浏览器窗口顶部定位，不占据原来位置空间

10-2 水平居中

通用方案：

行内元素：父元素是块级元素，给父元素设置 text-align:center，父元素不是块级元素，先将父元素设置为块级元素，再给父元素设置 text-align:center
图片：给图片设置 clear:both; display:block; margin:auto;

详细方案：

方案一：
1. 宽度定，需要谁居中，就给谁设置 margin:0 auto;
2. 宽度不定，默认子元素宽度与父元素宽度一样，给子元素设置 display:inline-block;或 display:inline,将其转换成行内块级元素/行内元素，给父元素设置 text-align:center
方案二：使用定位属性
1. 子元素设置绝对定位，父元素设置相对定位，left: 50%; margin-left: 50px(子元素的宽度的一半--宽度定),或者 transform: translateX(-50%)(宽度不定)
方案三：使用 flexbox 布局实现（宽度定不定都行）
1. 父元素设置 display: flex; justify-content: center;

10-3 垂直居中

单行的行内元素：设置 行高=父元素的高
多行的行内元素：父元素设置 display:table-cell; vertical-align:middle（行级、块级、图片都通杀）
块级元素：
1. 方案一：子元素设置绝对定位，父元素设置相对定位，子元素设置：top:50%并且 margin-top: 子元素高度的一半(高度定)，或者transform:translateY(-50%);(高度不定)
2. 方案二：flex 布局，给父元素设置 display:flex; align-items:center;（行级、块级、图片都通杀）

10-4 水平垂直居中

已知高度和宽度的元素

方案一：子元素设置绝对定位，父元素设置相对定位，子元素设置 left:0; right:0; top:0; bottom:0; margin:auto
方案二：子元素设置绝对定位，父元素设置相对定位，子元素设置 top:50%;left:50%(左上角垂直居中)，margin-top:-子元素高的一半,margin-left:-子元素宽的一半

未知高度和宽度的元素

方案一：（定位属性）子元素设置绝对定位，父元素设置相对定位，子元素设置 top:50%;left:50%(左上角垂直居中)，transform:translate(-50%,-50%)(根据自身定位实现偏移)
方案二：（flex 布局）父元素定义 display:flex; justify-content:center; align-items:center;

10-4 浮动

清除浮动的方法：

父级盒子定义高度（height）;
最后一个浮动元素后面加一个 div 空标签，并且添加样式 clear: both;
包含浮动元素的父级标签添加样式 overflow 为 hidden/both;
父级 div 定义 zoom;

最好的方法：

clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;

那么,clear:both;到底起了什么作用？？？

clear 是 CSS 中的定位属性，规定元素的哪一侧不允许其他元素浮动。那么 clear:both 就是规定在左右两侧均不允许元素浮动。
clear 属性只能在块级元素上其作用，这就是清除浮动样式中 display:block 的作用。
另外 visibility: hidden; height: 0; 只要 content 的值为空, 写不写都无所谓。

11. 布局

11-1 两侧定宽，中间自适应

浮动 左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
绝对定位 左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和 right 都为 300px，即可。中间的宽度会自适应。
flexbox布局 将左中右所在的容器设置为 display: flex，设置两侧的宽度后，然后让中间的 flex = 1，即可。
表格布局 设置整个容器的宽度为 100%，设置三个部分均为表格(display:table-cell)，然后左边的单元格为 300px，右边的单元格为 300px，即可。中间的单元格会自适应。
网格布局grid 设置容器为网格布局，宽度为 100%，设置网格为三列，并设置每列的宽度，即可。

12. margin 重叠

margin 重叠的规则

当两个 margin 都是正值的时候，取两者的最大值；
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；
当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加,即取和的绝对值

margin 重叠主要有四种情况的解决：

相邻兄弟元素 margin-bottom 和 margin-top 重叠。可以将其中一个设为 BFC；
父子元素 margin-top 重叠。可以给父元素添加 border-top | padding-top 来分隔父子元素，也可将父元素设为 BFC；
父元素高度 auto，父子元素 margin-bottom 重叠，在第二种情况的解决方案上，还可以给父元素设置 height、min-height、max-height；
无内容元素自身 margin-top 与 margin-bottom 重叠。可以给元素设置 border | padding | height

13. 用 css 画三角形

.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomato transparent transparent transparent;  //3边透明，一边不透明
}

奇淫技巧--记住透明边框的数量：3点一线 (总共 4 条线，有 3 条变成点了，即变透明了，另外一条边还是线，即不透明)

14. 实现单行和多行文本溢出添加省略号

单行溢出：

p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行溢出：

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;  //3行溢出

15. 常见单位

px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值
rem：相对单位，可理解为”root em”, 相对根节点 html 的字体大小来计算，CSS3 新加属性，chrome/firefox/IE9+支持
vw：viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%
vh：viewpoint height，视窗高度，1vh 等于视窗高度的 1%
vmin：vw 和 vh 中较小的那个
vmax：vw 和 vh 中较大的那个
%:百分比

16. CSS 有哪些属性可以继承？

字体系列属性：如 font，font-family，font-size，font-weight，font-style
文本系列属性：如 color，text-indent(文本缩进)，text-align(文本水平对齐)，line-height，word-spacing(字间隔)
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表属性：list-style-type、list-style-image、list-style-position

17. CSS3 有哪些新特性？

选择器（E:last-child 匹配父元素的最后一个子元素E。）;
圆角（border-raduis）;
多列布局（multi-column layout）;
阴影（shadow）和反射（reflect）;
文字特效（text-shadow）;
文字渲染（text-decoration）;
线性渐变（gradient）;
旋转（rotate）/缩放（scale）/倾斜（skew）/移动（translate）;
媒体查询（@media）;
RGBA 和透明度 ;
@font-face 属性;
多背景图 ;
盒子大小;

奇淫技巧：媒体查询盒模型，旋转圆角变（渐变）阴影

18. 为什么要初始化 CSS 样式？

因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的 CSS 初始化，会造成相同页面在不同浏览器的显示存在差异。

19.CSS 优化、提高性能的方法有哪些？

多个 css 可合并，并尽量减少 http 请求
属性值为 0 时，不加单位（margin: 0）
将 css 文件放在页面最上面（CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。如果放在下面，当html结构渲染完以后，解析css，又会重新渲染一次，导致页面闪动）
避免后代选择符，避免链式选择符过长
使用紧凑的语法（margin: 8px 6px 7px 5px; ）
使用语义化命名，便于维护（属于优化）
尽量少的使用!impotrant，可以选择其他选择器
遵守盒子模型规则

奇淫技巧：合并简写缩短链，语义遵守盒模型

20. 回流（重排）和重绘区别？

回流（重排），reflow:当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建；

重绘（repaint）:当 render tree 中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。

注意：每个页面至少需要引发一次重排+重绘，而且重排（回流）一定会引发重绘。

触发重排（回流）的条件：

增加或者删除可见的 dom 元素；
元素的位置发生了改变；
元素的尺寸发生了改变，例如边距，宽高等几何属性改变；
内容改变，例如图片大小，字体大小改变等；
页面渲染初始化；
浏览器窗口尺寸改变，例如 resize 事件发生时等；

奇淫技巧：回流理解为流动，流动自然会引起布局的变动；重绘可以理解为表层绘画，那么只是外观的改变。

21.border:none 与 border:0 的区别？

首先是性能差异：

{border：0;}: 把 border 设置为 0 像素，虽然在页面上看不到，但是按 border默认值理解，浏览器依然对 border-width/border-color 进行了渲染，即已经占用内存值；
{border：none；}被理解为 border-style:none。boder:0;比 border:none多渲染了一个border-width:0,也就是为什么 border:none 的性能要比 border:0高；

兼容性差异：

{border:none;}当 border 为“none”时似乎对 IE6/7 无效,边框依然存在,当 border 为“0”时，所有浏览器都一致把边框隐藏。

21. BFC、IFC、GFC、FFC 是什么？

Block formatting context(BFC)--块级格式化上下文；
Inline formatting context(IFC)--内联格式化上下文；
Grid formatting context(GFC)--网格布局格式化上下文；
Flex formatting context(FFC)--自适应格式化上下文

22. CSS 属性 overflow 属性定义溢出元素内容区的内容会如何处理?

scroll: 一定会出滚动条；
auto: 子元素内容大于父元素时出现滚动条；
visible: 溢出的内容出现在父元素之外；
hidden: 溢出隐藏；

23. style 标签写在 body 前后的区别？

一般情况下，页面加载时自上而下的。
将 style 标签至于 body 之前，为的是先加载样式。若是写在 body 标签之后，由于浏览器以逐行方式对 html 文档进行解析，当解析到写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（页面闪烁）。

24.垂直百分比是相对于容器高吗？

一般来说，子元素的百分比单位都是以父元素为依据。
但是 margin 和 padding 例外。元素的 height 是相对于容器的高度，但是元素的 margin 和 padding 是相对于容器的宽度。

25.clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 区别

网页可见区域高：document.body.clientHeight
网页正文全文高：document.body.scrollHeight
网页可见区域高（包括边线的高）：document.body.offsetHeight
网页被卷去的高：document.body.scrollTop
屏幕分辨率高：window.screen.height

每个 HTML 元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这 5 个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。

通过阅读它们的文档总结出规律如下：

clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中：

(1)clientHeight：

包括padding但不包括border、水平滚动条、margin的元素的高度。对于 inline的元素这个属性一直是 0，单位 px，只读元素。

(2)offsetHeight：

包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是 0，单位 px，只读元素。

接下来讨论出现有滚动条时的情况：

当本元素的子元素比本元素高且overflow=scroll时，本元素会 scroll，这时：

(3)scrollHeight:

因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight包括当前不可见部分的元素的高度。
可见部分的高度其实就是 clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论 scrollHeight 才有意义，在没有滚动条时 scrollHeight==clientHeight 恒成立。单位 px，只读元素。

(4)scrollTop:

在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位 px，可读可设置。。

(5)offsetTop:

当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位 px，只读元素。

26. 在一个未知宽度的父元素内如何创建一个等边正方形

1. 利用 padding

<html>
    <head>
        <meta charset="utf-8" />
        <title>新标签页</title>
    </head>
    <script></script>

    <body>
        <div class="content">
            <div class="son">包裹内容</div>
        </div>
    </body>
        <style>
        .content {
            /* width: 100px;
            height: 100px; */
        }
        .son {
            width: 10%;
            padding-bottom: 10%; /* padding百分比相对父元素宽度计算 */
            height: 0;
            border: 1px solid red;
        }
    </style>
</html>

效果如下：

效果图

2.padding-bottom+:after+absolute

<html>
    <head>
        <meta charset="utf-8" />
        <title>新标签页</title>
    </head>
    <body>
        <div class="content">
            <div class="son">包裹内容</div>
        </div>
    </body>
    <style>
        .content {
            width: 10%;
            background: #ccc;
        }

        .content:after {
            content: '';
            display: block;
            padding-bottom: 100%;
        }

        .son {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <script></script>
</html>

效果如下：

27. css动画

属性	含义
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性
transition（过渡）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	translate只是transform的一个属性值，即移动。

前端知识体系(6)-css篇