CSS面试题---基础

1、css选择器及优先级

        

        选择器优先级：内联样式>id选择器>类选择器、属性选择器、伪类选择器>标签选择器、微元素选择器

        注意：

                !important优先级最高；

                如果优先级相同，则最后出现的样式生效；

                继承得到的样式优先级最低；

                通用选择器、子选择器和相邻兄弟选择器的权重均为0；

                样式表的优先级：内敛样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式

2、css中可继承与不可继承的属性有哪些

         不可继承的属性：

                a、display

                b、文本属性：vertical-align，text-decoration，text-shadow，white-space，unicode-bidi

                c、盒子模型的属性：width、height、margin、border、padding

                d、背景属性

                f、定位属性

                g、生成内容属性：content，counterr-reset，counter-increment

                h、轮廓样式属性：outline-style，outline-width，outline-color、outline

                i、页面样式属性：size、page-break-before，page-break-after

                j、声音样式属性

        可继承属性：

                a、字体系列属性：font-family，font-weight，font-size，font-style

                b、文本系列属性：text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，color

                c、元素可见性：visibility

                d、列表布局属性：list-style

                f、光标属性：cursor

3、display的属性值及其作用

        

4、display的inline、inline-block和block的区别

        block：块级元素，独占一行

        inline：行内元素

        inline-block：行内块元素

5、行内元素、块级元素

        行内元素：设置宽高无效；可以设置水平方向的margin和padding，不能设置垂直方向的margin和padding；不会自动换行。

        块级元素：可以设置宽高；水平和垂直均可设置margin和padding；可以自动换行；多个块状，默认排列从上到下。

6、隐藏元素的办法

        a、display:none：渲染树不会包含该渲染对象，因此该元素不会再页面中占位置，也不会响应绑定的监听事件，会造成文本的重排

        b、visibility:hidden：元素在页面中仍占据空间，但不会响应绑定的监听事件，不会造成文本的重排

        c、opacity:0：将元素的透明度设置为0，元素在页面中仍占据空间，会响应绑定的监听事件

        d、position:absolute：使用绝对定位将元素从可视区域内移除

        e、z-index:负值：用其他元素遮盖本元素

        f、clip/clip-path：使用元素裁剪来实现，元素在页面中仍占据空间，不会响应监听事件

        g、transform:scale(0,0)：将元素缩放为0，元素在页面仍占据空间，不会响应监听事件

7、link和@import的区别

        都是外部引用css的方式：

                link是xhtml标签，除了加载css外，还可以定义rss等其他事务，@import只能加载css；

                link引用css时，在页面载入时同时加载，@import需要页面完全载入以后加载；

                link无兼容问题，@import低版本的浏览器不兼容；

                link支持使用js控制DOM去修改样式，@import不支持。

8、transition和animation的区别

        transition是过渡属性，强调过渡，需要一个触发事件才执行动画。类似于flash的补帧动画，设置一个开始关键帧，一个结束关键帧。

        animation是动画属性，无需触发事件设定好时间后，就可自行执行，且可以循环一个动画。可以设置多个关键帧来完成动画。

9、伪元素和伪类的区别

        伪元素：在内容前后插入额外的元素或样式，但是这些元素实际上不在文档中生成。它们只在外部可见，在文档中无法找到它们。

p::before {content:"伪元素：";}

        伪类：将特殊的效果加到特定的选择器上，是给已有元素添加类别，不会产生新的元素。

p:hover { color: red; }

10、对盒模型的理解 

        css3中的盒模型分为标准盒模型、怪异盒模型（IE盒模型）。

        盒模型都是由margin、border、padding、content组成的。

        在标准盒模型中，width的宽度指的是content的宽度。

        在怪异盒模型（IE盒模型）中，width的宽度等于content+border+padding。

        可以通过设置box-sizing属性来改变盒模型属性：

                content-box：标准盒模型；

                border-box：怪异盒模型（IE盒模型）

11、为什么有时候用translate来改变位置而不是改变定位

        translate是transform属性的一个值，改变transform或opacity不会触发浏览器重新布局或重绘，只会触发复合。而改变绝对定位会触发重新布局，进而触发重绘和复合。使用translate会更高效，可以缩短平滑动画绘制时间。translate改变位置时，元素依然会占据原始空间，绝对定位不会

12、li和li之间有看不见的空白间隔是什么原因引起的？如何解决

        浏览器会把inline内联元素间的空白字符（空格、换行、tab等）渲染成一个空格。为了美观，通常是一个li放在一行，这导致li换行后产生的换行字符，会变成一个空格，占用一个字符的宽度。

        解决办法：

          a、为所有的li设置float:left，有些情况是不能设置浮动的

          b、将所有的li写在同一行，不美观

          c、给ul设置font-size:0，ul内其余字符还需重新设置大小，且safiri浏览器问题依旧存在

          d、给ul设置letter-spacing:-8px，给li设置letter-spacing:normal

13、css3的新特性

        新增各种css选择器，圆角，多列布局，阴影和反射，文字特效，文字渲染，线性渐变，旋转，缩放，定位，倾斜，动画，多背景

14、对css精灵图的理解

        优点：减少http请求，提高了页面的性能，能减少图片的字节

        缺点：测量背景位置时不好测量，维护图片也麻烦

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

        以iphoneXS为例，当以px为单位书写css时，其宽度为414px*896px，也就是说当赋予一个div的宽度为414px时，这个div就会填满手机的宽度；

        用尺子测量这部手机的物理像素为1242*2688，1242/414=3，也就是说，在单边上，一个逻辑像素=三个物理像素，就说这个屏幕的像素密度为3，也就是常说的3倍屏。

        对于图片来说，若想不失真，1个图片像素至少要对应1个物理像素，假如原始图片是500*300，那么在3倍屏上，就要放一个1500*900的图片才能不失真。

16、margin和padding的使用场景

        在border外侧添加空白，且空白处不需要背景（色）时，使用margin；

        在border内侧添加空白，且空白处需要背景（色）时，使用padding。

17、对line-height的理解

        line-height指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线的距离；

        如果一个标签没有定义height属性，那么其最终表现的高度由line-height决定；

        把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。

18、css的预处理器/后处理器时什么？为什么使用他们

        预处理器：如less、sass等，用来预编译，增加了css的复用性、层级性、变量、循环等，让css更加的简洁，增加适应性以及可读性，可维护性等。

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

        使用原因：结构清晰，易于拓展；可以很方便的屏蔽浏览器私有语法的差异；可以轻松实现多重继承；完美的兼容了css，可用于老项目中。

19、display:inlie-block什么时候回显示间隙

        有空格的时候会有间隙，可以删除空格解决；

        margin正值时，可以使用margin负值解决；

        使用font-size时，可以通过设置font-size:0、letter-spacing、word-spacing解决。

20、单行、多行文本溢出隐藏

        单行文本：

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

        多行文本： 

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

21、判断元素是否到达可视区域

         window.innerHeight是浏览器可视区域的高度；

        document.body.scrollTop/document.documentElement.scrollTop是浏览器滚动过的距离；

        offsetTop是元素顶部距离文档顶部的高度（包括滚动条的高度）；

        内容到达显示区域：offsetTop < window.innerHeight + document.body.scrollTop

22、z-index在什么情况下会失效

        z-index通常用在有两个重叠的标签，在一定情况下，一个标签显示在另一个标签上的情况。z-index值越大，就越在上层。z-index元素的position需要时absolute、relative、fixed。

        失效的情况：

            父元素position:relative时，子元素z-index失效。将父元素改为absolute或static；

            元素没有设置position属性；

            元素在设置z-index时还设置了float。去除float，改为display:inline-block。