CSS面试常见知识点整理

CSS

1. 说一下盒模型

css中的盒模型包括标准盒模型和IE盒模型（怪异盒模型）。

标准盒模型：平常设置的width就只是content的宽度，盒子的宽度包括content+padding+border；
IE盒模型：平常设置的宽度width是整个盒子的宽度；

可以使用box-sizing来设置盒模型：

box-sizing：content-box （标准盒模型）
box-sizing：border-box （IE盒模型）

2. link标签和@import的区别

link属于html标签，@import是css提供的；
页面被加载的时候，link会同时加载；@import引用的css会在页面加载完毕后加载；
因为link属于html标签，因此没有兼容性的问题；@import只有IE5以上才能识别；
link方式的样式权重高于@import

3. Flex布局

- flex container 上的属性

main主轴：
- flex-direction：决定主轴方向
  - row（默认值）：从左到右
  - row-reverse：从右到左
  - column：从上到下
  - column-reverse：从下到上
- flex-wrap：决定flex container 是单行还是多行
  - nowrap（默认）：单行显示（item过多会拥挤变形）
  - wrap：多行（item过多会换行显示）
- justify-content：决定flex item在主轴上的对齐方式
  - flex-start（默认值）：开始位置对齐
  - flex-end：最末位置对齐
  - center：居中对齐
  - space-between：两端与开始、结束位置对齐；flex item之间等距离对齐
  - space-evenly： flex item之间等距离对齐，平均分布
  - space-around：左侧、右侧靠近边缘，距离是item之间的一半（很多布局用得到）
cross交叉轴：
- align-items：决定flex item在交叉轴上的对齐方式
  - flex-start：与cross start对齐（一般情况下就是贴着上面对齐）
  - flex-end：与cross end对齐
  - center：居中对齐（一般就是垂直居中）
  - baseline：与基准线对齐（div内部有文字，则文字底部为基准线，以第一行为准）
  - stretch：当flex item在交叉轴方向的size为auto时，自动拉伸填充flex container
- align-content：与justify-content类似，决定了多行flex-item在交叉轴上的对齐方式

- flex items上的属性：

flex： flex-grow || flex-shrink || flex-basis 的缩写
flex-grow： flex容器有剩余空间就会长大（值为1时，item会自动长成合适的大小）
flex-shrink：缩小
flex-basis：设置flex items在主轴方向上的base size
- auto：默认，宽设置了多少就是多少

4.BFC

在页面布局的时候，会出现一些问题，例如：元素高度塌陷、元素间距奇怪等问题。原因是元素之间相互影响、导致意料之外的情况。如何解决？---->BFC

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC的触发条件：

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex grid、inline-grid
position的值为absolute或fixed

BFC应用场景：

防止margin重叠

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠。

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

清除浮动
- 给父元素加上overflow:hidden

5. 水平垂直居中的方法

垂直居中的方式

高度确定：
- 文本： line-height=父元素高度
- 行内块元素：display:inline-block; vertical-align:middle
高度不确定：
- 右移、下移容器的百分之50%，再transform(-50%, -50%)
- 相对定位(子绝父相)，上下左右都为0，然后margin: auto
- flex布局：display:flex; align-items: center

水平居中的方式

flex布局：display:flex; justify-content: center
margin: 0 auto

6. inline、inline-block、block的区别

inline: 行内元素，设置宽高无效；margin在竖直方向上无效；padding在竖直水平方向上都有效；前后没有换行符
inline-block：行内块元素，能设置宽高；margin和padding在水平竖直方向上都有效；前后无换行符
block：能设置宽高；margin和padding在水平竖直方向上都有效；前后有换行符

img 是可替换元素。

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
例如 `<iframe>` 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

典型的可替换元素有：
  <iframe>
  <video>
  <embed>
  <img>

有些元素仅在特定情况下被作为可替换元素处理，例如：
  <input> "image" 类型的 <input> 元素就像 <img> 一样可替换
  <option>
  <audio>
  <canvas>
  <object>
  <applet>（已废弃）
  CSS 的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。

7. visibility=hidden、opacity=0、display：none

opacity=0 : 透明度为0，在页面上占据位置，绑定的事件有效
visibility=hidden：在页面上占据位置，但是绑定的事件无效
display：none ：在页面上不占据位置，绑定的事件也无效 （元素消失）

8. 双边距重叠问题

多个相邻普通流的块元素垂直方向margin会重叠：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

9. position的属性

fixed：固定定位；相对于浏览器窗口，及时窗口滚动也不会移动；脱离文档流，不占据空间；会和其他元素重叠；
relative：相对定位；相对于自己原来的位置；不脱离文档流，仍然占据位置；会和其它元素重叠；
absolute：绝对定位；相对于最近的已定位的父元素，如果没有的话，就相对于html；脱离文档流，不占据空间；会和其他元素重叠；
sticky：粘性定位；先按照普通文档流定位，然后相对于该元素在流中的BFC和最近的块级祖先元素定位，然后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位；
static：默认定位；
inherit：规定从父元素继承position属性的值；

10. 清除浮动

加一个<div class="{clear:both}" />
父元素overflow:hidden

添加一个伪元素

.clearFloat:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearFloat {
    *zoom: 1 /* ie6清除浮动方式， *只有ie6-ie7执行，其他浏览器不执行*/
}

11. css选择器

选择器按优先级先后排列：!important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符 *

important 声明 1,0,0,0
ID 选择器 0,1,0,0
类选择器 0,0,1,0
伪类选择器 0,0,1,0
属性选择器 0,0,1,0
标签选择器 0,0,0,1
伪元素选择器 0,0,0,1
通配符选择器 0,0,0,0

12. 文本溢出

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

13. 什么是回流和重绘？如何减少回流和重绘？

回流：对dom的修改引起了dom尺寸的变化，浏览器需要重新计算元素的几何属性，重新构建dom树。
重绘：浏览器将修改的部分绘制到页面上。

引起回流的原因：

删除或者添加可见的dom元素；
元素位置、大小发生变化；
浏览器窗口尺寸发生变化；
页面一开始渲染的时候（无法避免）；
获取一些特定的属性，例如：offsetTop、offsetWidth、scrollTop、clientTop等；

引起重绘的原因：颜色、文本方向、阴影等样式的修改。

如何减少回流和重绘？

如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)；
避免设置多项内联样式；
应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)；
避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算；
对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响；
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘；
避免使用 CSS 的 JavaScript 表达式；

在使用 JavaScript 动态插入多个节点时, 可以使用DocumentFragment。创建后一次插入.，就能避免多次的渲染性能。

14. z-index 是干什么用的？默认值是什么？z-index: auto 与 z-index: 0 的区别

参考链接：搞懂Z-index的所有细节

z-index 属性设置元素的堆叠顺序，且只在属性position: relative/absolute/fixed 的时候才生效。
z-index: auto 是默认值，与z-index: 0是有区别的：
z-index: 0 会创建一个新的堆叠上下文，而 z-index: auto 不会创建新的堆叠上下文

举例：考虑如下这种情况

<div class="A">
  <div class="a"></div>
</div>
<div class="B">
  <div class="b"></div>
</div>

z-index1

上图中div的z-index均为整数的时候div(a)的z-index虽然比div(B)大，但是div(A)和div(a)是在一个堆叠上下文，而div(B)和div(b)是在一个堆叠上下文，这两个堆叠上下文是通过父级也就是div(A)和div(B)的z-index来决定层叠顺序的。

z-index1

上图将div(A)的z-index设置为auto，这时候因为z-index: auto 不会创建新的堆叠上下文，因而div(a)的z-index比div(B)大，所以div(a)会在div(B)的上面

总结：

当Z-index的值设置为auto时,不建立新的堆叠上下文,当前堆叠上下文中生成的div的堆叠级别与其父项的框相同。
当Z-index的值设置为一个整数时,该整数是当前堆叠上下文中生成的div的堆栈级别。该框还建立了其堆栈级别的本地堆叠上下文。这意味着后代的z-index不与此元素之外的元素的z-index进行比较。

15. vw 和 vh 的概念

vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。

vw:1vw 等于视口宽度的1%
vh:1vh 等于视口高度的1%
vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

16. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧

（1）png24位的图片在iE6浏览器上出现背景
解决方案：做成PNG8，也可以引用一段脚本处理。

（2）浏览器默认的margin和padding不同
解决方案：加一个全局的*{margin:0;padding:0;}来统一。

（3）IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或
margin-right，margin值会加倍。

#box{float:left;width:10px;margin:00010px;}

这种情况之下IE会产生20px的距离
解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

（4）渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用"\9"这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9;/*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

（5）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义
属性；Firefox下，只能使用getAttribute()获取自定义属性
解决方法：统一通过getAttribute()获取自定义属性。

（6）IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有
pageX、pageY属性，但是没有x、y属性。
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

（7）Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方法：

  1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是，在chrome
  更新到27版本之后就不可以用了。

  2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
  收缩的是整个span的大小，这时候，必须要将span转换成块元素，可以使用display：block/inline-block/...；

（8）超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了
解决方法：改变CSS属性的排列顺序L-V-H-A

（9）怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模
式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。

17. 简单介绍使用图片 base64 编码的优点和缺点

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的
url属性。

使用base64的优点是：

（1）减少一个图片的HTTP请求

使用base64的缺点是：

（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体
积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。

（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要
差很多。

（3）兼容性的问题，ie8以前的浏览器不支持。

一般一些网站的小图标可以使用base64图片来引入。

18. 如果需要手动写动画，你认为最小时间间隔是多久，为什么

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms

19. 阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background-position的组合进行背景定位。
利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面的性能；CSSSprites能减少图片的字节。

优点：
  减少HTTP请求数，极大地提高页面加载速度
  增加图片信息重复度，提高压缩比，减少图片大小
  更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：
  图片合并麻烦
  维护麻烦，修改一个图片可能需要重新布局整个图片，样式

20. 关于伪类LVHA的解释

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；
当链接未访问过时：
（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪
类后面声明；
（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），
必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。
当链接访问过时，情况基本同上，只不过需要将:link换成:visited。
这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，
也就不存在覆盖的问题。

21. css提高性能、优化的方法有哪些？

加载性能：
（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。
（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top 0 bottom 0;但margin-bottom:bot
tom;margin-left:left;执行的效率更高。
（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到
左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹
配它们了）。
（3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过
三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.**，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清
楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏
览器在下载web fonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。

22. css中不同属性设置为百分比%时对应的计算基准

公式：当前元素某CSS属性值 = 基准 * 对应的百分比
元素的 position 为 relative 和 absolute 时，top和bottom、left和right基准分别为包含块的 height、width
元素的 position 为 fixed 时，top和bottom、left和right基准分别为初始包含块（也就是视口）的 height、width，移动设备较为复杂，基准为 Layout viewport 的 height、width
元素的 height 和 width 设置为百分比时，基准分别为包含块的 height 和 width
元素的 margin 和 padding 设置为百分比时，基准为包含块的 width（易错）
元素的 border-width，不支持百分比
元素的 text-indent，基准为包含块的 width
元素的 border-radius，基准为分别为自身的height、width
元素的 background-size，基准为分别为自身的height、width
元素的 translateX、translateY，基准为分别为自身的height、width
元素的 line-height，基准为自身的 font-size
元素的 font-size，基准为父元素字体

22. css动画

https://juejin.cn/post/6844903615920898056#heading-2

23. 画一条0.5px的线

使用缩放transform

transform: scale(1, 0.5); /*第一个参数对应宽度，第二个参数对应高度*/

使用meta viewport的方式（只在移动端上看得到效果）

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

24. 实现隔行变色

/* 方法一 */
li:nth-child(odd) {background:#ff0000;}
li:nth-child(even) {background:#0000ff;}

/* 方法二 */
li:nth-of-type(odd) { background:#00ccff;} /* 奇数行 */
li:nth-of-type(even) { background:#ffcc00;} /* 偶数行 */

注意：nth-child() 和 nth-of-type() 的区别

nth-child() 就是根据元素的个数来计算的
nth-of-type() 是根据类型来计算的，也就是 li:nth-of-type(2) 表示的是第 2 个 li 标签

25. CSS 画三角形

.triangle {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: lightsalmon lightcoral skyblue lightgreen;
}

26. CSS 画扇形

.fan-shaped {
    height: 0;
    width: 0;
    border: 100px solid transparent;
    border-radius: 50%;
    border-left-color: lightsalmon;
}
/*先画一个三角形，然后用border-radius: 50%;*/

27. css画正方体

.cube {
  font-size: 4em;
  /* 相对于父元素的大小，父元素是16px，这里是64px */
  width: 2em;
  /* 32px */
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  /* 相对于父元素的64px的大小，也就是128px */
  height: 2em;
  background: rgba(255, 99, 71, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  line-height: 2em;
}

.front {
  transform: translateZ(1em);
}

.bottom {
  transform: rotateX(90deg) translateZ(-1em);
}

.top {
  transform: rotateX(90deg) translateZ(1em);
}

.left {
  transform: rotateY(-90deg) translateZ(1em);
}

.right {
  transform: rotateY(-90deg) translateZ(-1em);
}

.back {
  transform: translateZ(-1em);
}

<h3>正方体</h3>
<div class="cube">
    <div class="side front">1</div>
    <div class="side back">6</div>
    <div class="side right">4</div>
    <div class="side left">3</div>
    <div class="side top">5</div>
    <div class="side bottom">2</div>
</div>

28. 圣杯布局

HTML代码如下：

<div class="div">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">main</div>
</div>

方法一：通过定位的方式，中间一列通过 margin: auto 实现自适应

CSS样式：

.left {
  width: 200px;
  height: 100%;
  background-color: red;
  position: absolute;
  left: 0;
}
.right {
  width: 200px;
  height: 100%;
  background-color: red;
  position: absolute;
  right: 0;
}
.main {
  height: 100%;
  background-color: green;
  position: absolute;
  left: 200px;
  right: 200px;
  margin: auto; /* 这个千万不能少 */
}

方法二：flex布局
CSS样式：

html, body {
  height: 100%;
}
.div {
  height: 100%; /* 想要实现高度百分百必须让父元素都有高度 */
  display: flex;
}
.left  {
  flex: 0 0 200px;
  order: 1; /* order定义显示的顺序 */
  background-color: red;
}
.right{
  flex: 0 0 200px;
  order: 3;
  background-color: red;
}
.main{
  flex: auto;
  order: 2;
  background-color: green;
}

方法三：左右浮动布局，这种布局方式，必须先写浮动部分，最后再写中间部分，否则右浮动块会掉到下一行。
CSS样式：

html, body{
  height: 100%;
}
.div{
  height: 100%;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background-color: red;
}
.right {
  float: right;
  width: 200px;
  height: 100%;
  background-color: red;
}
.main{
  height: 100%;
  background-color: green;
}

29. css3新特性

伪类和伪元素选择器：

:first-child, :last-child, :nth-child(1), :link, :visited, :hover, :active
::before, ::after, :first-letter, :first-line, ::selection
背景、边框和颜色透明度：

background-size, background-origin, border-radius
box-shadow, border-image
rgba
文字效果：

text-shadow, word-wrap
2D 转换和 3D 转换：

transform, translate(), rotate(), scale(), skew(), matrix()
rotateX(), rotateY(), perspective
动画、过渡：animation, transition
多列：column-count, column-gap, column-rule
用户界面：resize, box-sizing, outline-offset

方式一

<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .page {
        box-sizing: border-box;
        min-height: 100%;
        padding-bottom: 300px;
        background-color: gray;
        /* height: 2000px; */
    }

    footer {
        height: 300px;
        margin-top: -300px;
        background-color: #ccc;
</style>

<div class="page">
    主要页面
</div>
<footer>底部</footer>

方式二

<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        min-height: 100%;
    }

    .page {
        background-color: gray;
        /* height: 2000px; */
    }

    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 300px;
        width: 100%;
        background-color: #ccc;
</style>

<div class="container">
    <div class="page">
        主要页面
    </div>
    <footer>底部</footer>
</div>

posted @ 2021-09-07 20:56 zerozhupan 阅读(122) 评论(0) 收藏举报

刷新页面返回顶部

zerozhupan