大前端面试题:CSS相关问题

最新推荐文章于 2022-07-26 01:37:37 发布

菜鸟guo

最新推荐文章于 2022-07-26 01:37:37 发布

阅读量270

点赞数 3

分类专栏：知识点文章标签： html5 css css3 javascript

本文链接：https://blog.csdn.net/Mrxcguo/article/details/103949787

版权

知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

介绍一下标准的css的盒子模型？低版本IE的盒子模型有什么不同

标准模型由四部分组成：

  内容区域: 可以放置元素的区域如文本,图像等，一般设置宽高指的是这个内容的宽高
  内边距的区域：内容与边框之间的距离
  边框区域: 边框
  外边框区域：由外边框限制，用空白区域扩展边框区域，开分开相邻的元素

模型区分：

标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border;

CSS选择器有哪些？哪些属性可以继承？

    id选择器(#myid)
    类选择器(.myclassName)
    标签选择器(div,h1,p)
    子代选择器(ul>li)
    后代选择器(li a)
    通配符选择器(*)
    属性选择器(a[rel="external"])
    伪类选择器(a:hover,li:nth-child)

可继承的样式： font-size font-family color
不可继承的样式： border padding margin height width

css优先级如何计算?

优先级就近原则，同权重情况下样式定义最近这位准
载入样式以最后载入的定位为准

优先级为：

同权重： 内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)
!important >id >class >tag
!important 比内联优先级高

display有哪些值？说明他们的作用

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示
none 元素不显示，并从文档流中移除
inline 行内元素，默认宽度为内容宽度，不可设置宽高，同行显示
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示
list-item 像块类型元素一样，可以设置宽高，同行显示
table 此元素会作为会计表格来显示
inherit 规定应该从父元素继承display属性的值

position的值releave和absolute定位远点是？

absolute 生成绝对定位元素，相对与值部位static的第一个父元素进行定位
fixed 生成绝对的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常出现的流中
inherit 规定从父元素继承position属性的值

margin和padding分别适合什么场景使用？

margin是用来隔开元素与元素的间距；
padding是用来隔开元素与内容的间隔。
margin是用来布局分开元素，使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容与元素之间有一段间距

什么是伪类，什么是伪元素，他们的区别？

伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
伪类使用的一个冒号，为元素使用两个冒号
伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等

用纯CSS创建一个三角形的原理是什么？
首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

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

1)避免过度约束
2)避免后代选择符
3)避免链式选择符
4)使用紧凑的语法
5)避免不必要的命名空间
6)避免不必要的重复
7)最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
8)避免！important，可以选择其他选择器
9)尽可能的精简规则，你可以合并不同类里的重复规则

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

1.png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2.jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3.gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4.webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。