您的位置:首页 > Web前端 > CSS

Css3 常见技术面试题(一)

2020-04-22 00:54 501 查看

Css3常见技术面试题

  • 3 ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用
  • 4 Css优化、提高性能的方法
  • 5 CSS的实现方式有几种?那种CSS实现方式优势更突出?相对其他实现方式而言其优点有哪些?
  • 6 全屏滚动的原理以及用到的css属性
  • 7 style标签写在body后与body前有什么区别
  • 8 Css3新特性
  • 1 标准的CSS盒子模型与IE的盒子模型有什么不同?

    标准的css盒子模型宽高就是内容区宽高;
    低端IE css盒子模型宽高 内容+内边距+边框。

    2 link和@import的区别

    2.1 从属关系

    link是HTML提供的标签;
    @import是css的语法规则,只能加载在style标签内和css文件中使用。

    2.2 加载顺序

    link在页面加载时同时加载,而@import在页面加载完成后加载。

    2.3 兼容性

    @import只能用于ie5以上,link不受兼容影响

    2.4 DOM可控性

    Link支持js控制dom改变样式,而@import不支持

    2.5 注意

    不推荐使用@import,原因如下:
    1、影响浏览器的并行下载。
    2、多个@import的使用会使浏览器下载紊乱。

    3 ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名组成);
    ::befor是css3中伪元素的新语法,让插入的内容在其他内容之前,
    :after是css1的语法,兼容性好,让插入的内容在其他内容之后。

    4 Css优化、提高性能的方法

    1、尽量将样式写在单独的css文件中,在head元素中引入,好处有以下几点:
    (1)内容和样式分离,易于管理和维护
    (2)减少页面体积
    (3)css文件可以被缓存、重用、维护成本降低

    2、尽量不使用@import(影响css文件加载速度)

    3、避免使用复杂的选择器,层级越少越好
    建议选择器的嵌套最好不要超过三层,例如.header .logo .text{},
    可以减少css文件大小、提高加载性能、浏览器解析时也会更加高效。

    4、精简页面的样式文件,去掉不用的样式

    5、利用CSS继承减少代码量

    6、慎重使用高性能属性:浮动、定位;

    5 CSS的实现方式有几种?那种CSS实现方式优势更突出?相对其他实现方式而言其优点有哪些?

    三种:内联 内嵌 外联。
    外联优势更突出,原因如下:
    使用外联样式使内容和样式分离,易于管理和维护,减少页面体积,css文件可以被缓存、重用、维护成本低。

    6 全屏滚动的原理以及用到的css属性

    有点类似于轮播,整体的元素一直排列下去,
    假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,剩下的可以通过transform进行y轴定位
    overflow:hidden;transition:all 1000ms ease

    7 style标签写在body后与body前有什么区别

    写在body前有利于浏览器逐步渲染
    写在body后会导致浏览器停止渲染,并等到样式表解析完成后重新渲染

    8 Css3新特性

    颜色:新增RGBA、HSLA模式
    文字阴影 text-shadow
    边框:圆角border-radius 边框阴影border-shadow 图片边框border-image
    盒子模型:box-sizing
    背景:background-size设置背景图片的尺寸,background-origin设置背景图片的原点,background-clip设置背景图片的裁剪区域
    渐变:linear-gradient、radial-gradient
    过渡:transition可实现动画
    自定义动画
    多媒体查询、多栏布局
    2D转换:transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
    3D转换
    在CSS3中唯一引入的伪元素是::selection

    • 点赞 2
    • 收藏
    • 分享
    • 文章举报
    薛阳- 发布了37 篇原创文章 · 获赞 100 · 访问量 1万+ 私信 关注
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: