前端面试-核心八股文系列(css篇)

326 阅读4分钟

1、CSS选择器及其优先级

!important > 内联(1000) > id选择器(100) > 类选择器(10) > 标签,伪元素选择器(1) > 兄弟等选择器(0)

2、隐藏元素的方法有哪些

display: none、visibility: hidden、opacity: 0、position: absolute、z-index: 负值、transform: scale(0,0)

3、link和@import的区别

-- link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。 -- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。 -- link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。 -- link支持使用Javascript控制DOM去改变样式;而@import不支持。

4、对盒模型的理解

CSS3中的盒模型有以下两种:标准盒子模型、IE盒子模型(也叫怪异盒模型)

-- 标准盒模型的width和height属性的范围只包含了content

-- IE盒模型的width和height属性的范围包含了border、padding和content

可以通过修改元素的box-sizing属性来改变元素的盒模型: -- box-sizing: content-box表示标准盒模型(默认值) -- box-sizing: border-box表示IE盒模型(怪异盒模型)

5、li 与 li 之间有看不见的空白间隔是什么原因引起的?如何解决

浏览器会把inline内联元素间的空白字符(空格、换行、Tab等)渲染成一个空格。为了美观,通常是一个

  • 放在一行,这导致
  • 换行后产生换行字符,它变成一个空格,占用了一个字符的宽度。

    1、将

      内的字符尺寸直接设为0,即font-size:0

      2、将所有

    • 写在同一行

      3、为

    • 设置float:left

      4、消除

        的字符间隔letter-spacing:-8px

        6、为什么css图片之间有间隙?怎么解决?

        图片和行内块元素默认底线会和父级盒子的基线对齐,因此就会产生白色缝隙。

        1、转换为display:block

        2、font-size:0

        3、用vertical-align:middle | top| bottom等,让图片不和基线对齐

        7、什么是物理像素,逻辑像素和像素密度

        物理像素就是真实的像素,逻辑像素就是和物理像素对应的成倍大小的开发像素,像素密度就是一个区间内的像素的数量

        8、CSS预处理器/后处理器是什么?

        预处理器,如:less,sass,stylus,用来预编译sass或者less,增加了css代码的复用性。层级,mixin, 变量,循环, 函数等对编写以及开发UI组件都极为方便。

        后处理器, 如: postCss,通常是在完成的样式表中根据css规范处理css,让其更加有效。目前最常做的是给css属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。

        9、常见的CSS布局单位和基准

        1、px:像素,屏幕所能显示的最小的区域

        2、%:百分比,基于父级

        3、em和rem:em基于父元素,rem基于根元素,

        4、vw/vh:相对于视窗的宽度和高度

        10、项目中自适应解决方案(重点)

        目前两种大概分了:一种是rem还有一种是viewport(能清新说出自己观点即可)

        rem应该都比较熟悉了,根据根元素去控制大小,他是将设计稿除以100,等分为7.5份来实现移动端不同屏幕尺寸适配的原理,是viewport的一个过渡方案,最开始是为了解决和native的1px的问题,dpr设备和iframe会有问题。

        viewport的话就是单纯的去缩放屏幕,但是问题就是首先是兼容性问题不好其次是争议比较大的字体是否要跟着变大的问题。

        什么是1px问题

        在一些 Retina屏幕 的机型上,移动端页面的 1px 会变得很粗,呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号,他们之间是有一个关系。

        11、对BFC的理解

        BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。

        创建BFC的条件: -- 根元素:body; -- 元素设置浮动:float 除 none 以外的值; -- 元素设置绝对定位:position (absolute、fixed); -- display 值为:inline-block、table-cell、table-caption、flex等; -- overflow 值为:hidden、auto、scroll;

        12、实现一个三角形

        利用边框进行实现

        div {
            width: 0;
            height: 0;
            border-top: 50px solid red;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
        }
        

        13、画0.5px的线或者是小于12px的字体

        1、使用scale()

        2、viewport(0.5px线)

        3、css属性(12px字体)