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之间的一半(很多布局用得到)
- flex-direction:决定主轴方向
- 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在交叉轴上的对齐方式
- align-items:决定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
- 右移、下移容器的百分之50%,再
水平居中的方式
- 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>
上图中div的
z-index
均为整数的时候div(a)的z-index
虽然比div(B)大,但是div(A)和div(a)是在一个堆叠上下文,而div(B)和div(b)是在一个堆叠上下文,这两个堆叠上下文是通过父级也就是div(A)和div(B)的z-index
来决定层叠顺序的。
上图将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
30. 屏幕里面内容未占满的时候footer固定在屏幕可视区域的底部。占满的时候显示在网页的最底端
- 方式一
<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>