一、CSS选择器有哪些？谈谈它们的优先级
优先级
行内样式(1000)>id选择器(100)>class选择器(10)>标签选择器(1)/伪类
组合方式
后代选择器：父代 后代{属性名：属性值}
子代选择器：父代>子代{属性名：属性值}
群组选择器：#name1, .name2, #name div {属性名，属性值}
伪类选择器：name:伪类
伪元素选择器：
:first-letter 选择每个元素的首字母
:first-line 选择每个元素的首行
:before 在每个元素的内容之前插入内容
:after 在每个元素的内容之后插入内容
:lang(it) 选择带有以'it'开头的lang属性值的每个元素
通用选择器：*{属性名：属性值}
相邻选择器：div+p，紧跟在div后的所有p
二、CSS样式有哪些特性？哪些样式能被继承，哪些不能被继承
三大特性：样式表的层叠性、样式表的继承性、优先级
层叠性：
样式的覆盖
1-当多个样式作用于同一个（同一类）标签时，样式发生冲突
2-只有最后的代码会起效（后面的代码会层叠覆盖前面的代码）
继承性：
前提是包含嵌套关系
可继承：
文字系列属性：
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
文本系列属性：
text-indent：文本缩进
text-align：文本水平
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
元素可见性：visibility
表格布局属性：
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
列表属性：
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
引用：quotes：设置嵌套引用的引号类型
光标：cursor：箭头可以变成需要的形状
特殊：
h1-h6不能继承文字大小
a标签不能继承文字颜色
无继承：
display
文本属性：vertical-align、text-decoration
盒子模型属性：宽高|内外边距|边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!import
0 1 10 100 1000以上
1-继承的权重为0
2-权重会叠加
三、简单描述px em rem的区别，除此之外，你还用过哪些度量单位？
px
像素。相对长度单位。是相对于显示器屏幕分辨率而言的。
em
相对长度单位。相当于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸(font-size).
rem
root em。只基于HTML根元素的字体大小
【font-size默认为16px】
四、介绍一下CSS盒子模型
所有HTML元素都可以看做是盒子。
每个盒子都有边界、边框、填充、内容；每个属性都包括四个部分：上下左右。
盒子模型可以分为两种：
W3C标准的盒子模型：标准盒模型
width和heigth指的是content的大小
IE标准的盒子模型：怪异盒模型
width和heigth指的是content+border+padding的大小
【注】为了保证所有浏览器使用的是同一标准，需要在页面的顶部加上DOCTYPE声明
盒模型属性
块级元素display:block
即使设置了宽度，还是独占一行
可以设置margin和padding
块级元素可以包含行内元素和块级元素，但行内元素不能包含块级元素
行内元素display:inline
宽高设置对行内无效
水平方向的padding-left|right和margin-left|right都会产生边距效果
垂直方向的padding-top|bottom和margin-top|bottm不会产生边距效果
行内块盒子display:inline-block
既可以设置宽高，又以行内形式显示
可变元素
根据上下文语境觉得转为块级元素还是行内元素
<button> //按钮
<del> // 定义文档中已被删除的文本
<iframe> //创建包含另外一个文档的内联框架（即行内框架）
<ins> //标签定义已经被插入文档中的文本
<map> //客户端图像映射（即热区） 6
<object> //object对象
<script> //客户端脚本
五、谈谈你对BFC的理解
BFC即Block Formatting Contexts（块级格式化上下文），具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
满足下面任一条件即可触发BFC特性
body根元素
浮动：float除none以外的值
绝对定位元素：position(absolute fixed)
display为inline-block table-cells flex
overflow除visible以外的值(hidden auto scroll)
六、常用清除浮动的方式（至少2种），各自有什么特点
清除浮动主要是为了解决，父元素因为子元素浮动引起的内部高度为0的问题
参考链接
清除浮动的最常用的四种方法，以及优缺点_h_qingyi的博客-CSDN博客_清除浮动
CSS的浮动及清除浮动的5种方法_web前端开发-CSDN博客
关于overflow:auto | hidden清除浮动的一些问题_zamamiro的博客-CSDN博客
省流：
最常用的是给父元素设定width，然后overflow:hidden|auto，但不能再使用position
最推荐的是伪类::after+zoom
.box{zoom:1}
.box::after{content:"",display:block;height:0;clear:both;visibility:hidden;}
此外还有一种 在子元素的最后额外再加一个元素如div如br 然后把它clear:both（不推荐）
七、页面导入样式时，使用link和@import有什么区别
link
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
@import
<style>
@import url(style.css);
</style>
页面导入样式时，使用link和@import有什么区别？_luuu7的博客-CSDN博客
省流：
1、link除了可以加载css外，还可以做其他的例如RSS，定义rel连接属性等，@import只能加载css；
2、link会在页面加载时就加载，@import等到页面全部被加载完再被加载；
3、@import只有在IE5以上的版本才能使用
4、js控制dom改变样式时只能使用link，因为@import不是dom可以控制的。
八、如何清除img标签底部的留白
由于img元素默认为inline元素，而inline元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离，一般是4px像素。
最常用的解决办法：display:block
img 图像底部留白的原因以及解决方法 - 黑夜丶vn - 博客园
九、实现三个DIV等分排在一起
display:inline|block|flex|none|table-cell
<div class='table-cell></div>
css 实现三个 div 等分排在一行_且听风吟的博客-CSDN博客_css一行三个
十、编写 JS 方法，把两个数组合并，并删除第二个元素
slice(),splice(),split(),substring(),substr()使用方法和区别_前端技术的学习整理-CSDN博客_slice splice
数组五种查询条件方法(find、findindex、indexOf、lastindexOf 、includes)_gs981600308的博客-CSDN博客_数组查找方法
concat().splice(1,1)
[..., ...].splice(1,1)
var arr = location.search.search.substring(1).split('&');
URLSearchParams
location.search
var searchParams = new URLSearchParams(location.search);
searchParams.get('cat')
searchParams.get('ev')
3890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
