日常来点面试题2021.2.21

今天看看CSS相关的内容。

问题：

1. CSS有哪些基本选择器？它们的权重如何表示？
2. CSS的引入方式有哪些？link和@import的区别是什么？
3. 浮动元素引起的问题与解决方法？
4. position的值分别相对于哪个位置定位？
5. CSS选择器都有哪些？
6. CSS哪些样式可以继承？哪些不可以？
7. 什么是CSS Sprite？
8. 如何居中一个div？
9. display的值与作用？
10. 如何使用盒模型实现三栏布局？（左右200px，中间自适应）

回答：

1. 基本选择器分三类，类选择器，id选择器，标签选择器。选择器的权重分为四个等级，可以用0.0.0.0表示这四个等级。!important关键字优先级最高，内联样式优先级可以看成1.0.0.0，id选择器可以看成0.1.0.0，类，属性，伪类选择器可以看成0.0.1.0，元素，伪元素选择器可以看成0.0.0.1，通配符没有优先级贡献。当选择器混合使用时，层级权重可以递增，比如同时使用id和类选择器可以写成0.1.1.0。
2. 引入方式有三种，行内style属性，HTML内style标签，link引入外部css文件。@import方式只能加载CSS，link方式也可以加载如RSS等其他事务。link引用的CSS在页面加载时同步加载，使用@import加载的CSS需要等到网页完全载入后再加载，属于异步加载。link是XHTML标签，无兼容问题，@import是在CSS2.1中提出的，不支持低版本浏览器。link的标签是DOM元素，可以使用JavaScript控制，@import是一种方法，JavaScript不可控制。
3. 父元素的高度无法被撑开，影响与父元素同级的元素，与元素同级的非浮动元素会被遮盖，如果一个元素浮动，则该元素之前的元素也需要浮动，否则会影响显示结构。解决办法是为父元素设定固定高度，父元素设置overflow: hidden;即可清楚浮动，让父元素高度被撑开，使用clear: both;也可以清除元素浮动。也可以使用通用类clearfix：.clearfix:after{content: ''; display: 'block; clear: both;}
4. relative表示相对定位，相对于自己本身所在正常文档流中的位置进行定位，absolute表示绝对定位，相对于最近的根元素进行定位。fixed表示固定定位，相对于浏览器视口或frame进行定位。static为默认值，没有定位，出现在正常文档流中。sticky是粘性定位，用于做吸顶效果。
5. id选择器，类选择器，标签选择器，相邻选择器（+），子选择器（>），级联选择器（ ），通配符选择器（*），属性选择器（[]），伪类选择器（:hover等），伪元素选择器（::before）
6. font-size，color等可以继承，border，padding，margin，width，height等不可以继承。
7. 雪碧图，把网页中的一些图片整合到一张图片文件中，再利用background-image，background-position等CSS设置进行定位，显示出图片，这样可以减少网络请求量。
8. 一般情况使用margin: 0 auto即可（块级元素），如果是行内元素，可以对父级元素使用text-align: center。
9. block为块级元素，none为不显示，inline为行内元素，inline-block为默认宽度为内容宽度，可以设置宽高同行显示，list-item是指像块类型元素一样显示，并添加样式列表标记。还有flex为flex布局。
10. 核心点：设定三个float为left，左右盒子宽度200px，中间盒子宽度100%，其他css稍微写点美化一下就好了。