Fork me on GitHub

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硬件加速,可以让transformopacityfilters这些动画不会引起回流重绘;
  • 避免使用 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)的上面

总结:

  1. 当Z-index的值设置为auto时,不建立新的堆叠上下文,当前堆叠上下文中生成的div的堆叠级别与其父项的框相同。
  2. 当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;
}

image

image

26. CSS 画扇形

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

image

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>

image

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新特性

  1. 伪类和伪元素选择器:

    :first-child, :last-child, :nth-child(1), :link, :visited, :hover, :active
    ::before, ::after, :first-letter, :first-line, ::selection

  2. 背景、边框和颜色透明度:

    background-size, background-origin, border-radius
    box-shadow, border-image
    rgba

  3. 文字效果:

    text-shadow, word-wrap

  4. 2D 转换和 3D 转换:

    transform, translate(), rotate(), scale(), skew(), matrix()
    rotateX(), rotateY(), perspective

  5. 动画、过渡:animation, transition

  6. 多列:column-count, column-gap, column-rule

  7. 用户界面: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>
posted @ 2021-09-07 20:56  zerozhupan  阅读(122)  评论(0)    收藏  举报