1、display各值的区别
1.inline
inline 内联元素，不可以设置宽高
在考虑inline的时候，我们就需要考虑inline元素到底是行内可替换元素还是行内不可替换元素。
替换元素(replaced element)：所谓替换元素就是浏览器根据元素的标签和属性，来决定元素具体显示什么内容。比如说：img标签的src属性的值用来读取图片信息并且显示出来。又比如说，input标签的type属性决定是显示输入框还是单选按钮。html中的img、input、textarea、object、video、embed都是替换元素。
非替换元素(non-replaced element): 是指内容包含在文档里的元素。比如p、span等等。
对于inline的行内替换元素，主要考虑一下img、input、textarea
看一下代码：
// css
.bg {
/* 内联元素可替换 padding任何值都有效 */
padding: 10px 10px;
/* 内联元素可替换 margin任何值都有效 */
margin: 10px 10px;
}
//html
<img class="bg" src="./assets/test.png" alt="">
<input class="bg" type="text">
<textarea name="" id="" cols="30" rows="10" class="bg"></textarea>
所以可以总结出：可替换的元素，padding、margin设置任何值都是有效的
对于inline的行内非替换元素，主要考虑一下span
// css
.abg {
display: inline;
/* 内联元素非替换 padding任何值都有效 */
padding: 10px 10px;
/* 内联元素非替换 margin上下无效 */
margin: 10px 10px;
background-color: red;
}
//html
<span class="abg">我是span标签行内元素的不可替换的代表</span>
所以可以总结出：非替换的元素，padding设置任何值都是有效的、margin上下无效, padding 本身生效，但是没有把父级元素撑开
2.inline-block
inline-block 行内元素，可以设置宽高，一行显示，盒宽度默认为内容宽度，设置 margin 和 padding 都生效
3.block
block 块级元素，可以设置宽高，也可以设置padding和margin；自动换行，多个块状元素，默认从上到下显示
2、优先级
| 选择器 | 格式 | 优先级权重 |
|---|---|---|
| 强制 | !important | 10000 |
| id选择器 | #id | 1000 |
| 类选择器 | .classname | 100 |
| 属性选择器 | a[ref = "eeee"] | 100 |
| 伪类选择器 | a:hover | 100 |
| 标签选择器 | div | 10 |
| 伪元素选择器 | div:after | 10 |
| 相邻兄弟元素选择器 | h1+p | 0 |
| 子选择器 | div>a | 0 |
| 后代选择器 | div a | 0 |
| 通配符 | * | 0 |
不同级别：!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器
按照样式表的来源： 内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
3、隐藏元素
| display:none | visibility:hidden | opacity:0 | z-index | transform:scale(0,0) |
|---|---|---|---|---|
| 控制元素隐藏 | 控制元素隐藏 | 控制元素隐藏 | z轴方向 | 设置元素的缩放 |
| 不占据位置 | 占据位置 | 占据位置 | 占据位置 | |
| 不会被子继承 | 会被子继承，设置visibility：visible可以显示子元素 | 会被子继承，但是不能设置opacity：1让子元素重新显示 | ||
| 不会触发元素绑定的事件 | 不会触发元素绑定的事件 | 会触发元素绑定的事件 | 不会触发绑定的事件 | |
| transtions无效 | transtions 无效 | transtions有效 | ||
| 回流和重绘 | 重绘 | 不会重绘 | ||
| 不会渲染 | 会渲染 | 会渲染 |
4、link和@import的区别
- 代码
<link rel="stylesheet" href="style.css">
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
-
兼容性
link是基于xhtml的，除了可以加载css还可以加载别的类型的文件；@import只能加载css文件
-
加载
link引入css文件，是页面载入的时候同步加载的；@import是在页面完全载入以后进行加载
-
优先级
link 高于@import
-
支持性
link支持使用JS控制DOM去修改样式；@import不支持
5、伪类与伪元素的区别
1.伪类与伪元素的区别在于：有没有创建一个文档树之外的元素(或者说操作的对象是否存在于原来的dom结构中)
2.伪类是在已有的DOM元素下操作
3.伪元素是创建一些不在DOM树存在的元素
定义的伪类有：
定义的伪元素有：
4.css3对伪类和伪元素的定义更加清晰，css3中伪元素的使用必须使用::
5.任何常规选择器可以在任何位置使用伪类
6.一个选择器只能使用一个伪元素，并且伪元素必须放到选择器之后
6、transition和animation的区别
- 代码展示
<style>
.transtion {
width: 100px;
height: 100px;
background-color: pink;
/* 属性 时间 速度 延迟 */
transition: width 1s ease-in-out 0s, background-color 1s ease-in-out 0s;
}
.transtion:hover {
width: 200px;
background-color: red;
}
</style>
<style>
.animation {
width: 100px;
height: 100px;
background-color: plum;
/* 动画名称 时间 速度 延迟 循环次数 */
animation: first 1s ease-in-out 0s infinite;
}
.animation:hover {
/* 鼠标移动动画停止 */
animation-play-state: paused;
}
@keyframes first {
0% {
width: 150px;
}
50% {
width: 200px;
background-color: chartreuse;
}
100% {
width: 300px;
background-color: cadetblue;
}
}
</style>
-
属性
transtion:过渡属性 animation:动画属性
-
状态
transtion : 只有2种状态，开始状态和结束状态 animation：可以定义不同的状态，有帧的概念
-
触发方式
transtion : 需要一些事件（比如鼠标移到上面、点击、焦点） animation：除了可以完成以上，还可以自己触发
-
实现范围
transtion : 不是所有的css属性都可以实现transtion animation：几乎所有的css属性都可以实现animation
-
执行次数
transtion : 只执行一次 animation：可以设置循环的次数
-
实现
transtion :借助事件或者js才可以实现 animation：必须借助@keyframe才可以实现
