这是我参与「第四届青训营」笔记创作活动的的第2天
CSS（Cascading Style Sheet 层叠样式表）
1.目前主流浏览器及其内核
成为主流浏览器的条件:在市场上有一定份额，*有自己的内核
浏览器由shell和内核(渲染引擎)构成
shell为外壳、外观部分;
内核更为重要，它决定浏览器的运转快慢，识别代码的路径问题等等。
| 目前的主流浏览器 2021-7-12 | 内核 |
|---|---|
| IE | trident |
| Firefox 火狐 | Gecko |
| Google Chrome 谷歌 | Webkit/blink |
| Safari 冲浪 | Webkit |
| Opera 欧朋 | presto |
2.引入CSS的三种方式
- 行间样式：直接写在属性style里
- 页面级CSS：写在head里的style里
- 外部CSS文件：使用link标签在head里引入css文件中的代码
3.选择器
css的代码精确作用于html部分
(1)id选择器：一一对应
<div id="selector"></div>
#selector {
/*
填写css代码
*/
}
(2)class选择器：多对多
<div class="selector1 selector2"></div>
<div class="selector1"></div>
<div class="selector2"></div>
.selector1 {
/*
填写css代码
*/
}
.selector2 {
/*
填写css代码
*/
}
(3)标签选择器：作用于该标签
div {
/*
填写css代码
*/
}
span {
/*
填写css代码
*/
}
(4)通配符选择器：作用于所有标签
* {
/*
填写css代码
*/
}
(5)属性选择器：作用于有该属性的标签
[id] {
/*
填写css代码
*/
}
[id="test"] {
/*
填写css代码
*/
}
(6)父子选择器/派生选择器
<div>
<span></span>
</div>
<span></span>
div span { // 寻找顺序为自右向左
/*
填写css代码
*/
}
↑结果为div里的span受到css作用
(7)直接子元素选择器
<div>
<span>111</span>
<strong>
<span>222</span>
</strong>
</div>
<span></span>
div > span {
/*
填写css代码
*/
}
↑结果为只有111受到css作用
(8)并列选择器
<div id="id" class="class"></div>
div.class#id { // 但是注意标签要写在最前
/*
填写css代码
*/
}
(9)分组选择器
<div id="id" class="class"></div>
<span></span>
div#id.class,
span {
/*
填写css代码
*/
}
两个标签均被作用
(10)伪类选择器
<div id="id"></div>
#id: hover { // 最常用的一种, 当鼠标移动到范围内时css代码生效
/*
填写css代码
*/
}
(11)伪元素选择器
伪元素存在于每个标签的最前和最后，没有html结构，但可以通过css改变样式
伪元素的初始样式为行级元素，不能改变宽高，所以要先改为块级元素
<div id="id"></div>
#id::before {
content: "内容";
}
#id::after {
content: "内容";
}
选择器优先级（重要）
!important > id > class = 属性 > 标签选择器 > 通配符选择器
选择器 css权重(256进制) !important Infinity(无穷) 行间样式 1000 id 100 class 属性 伪类 10 标签 伪元素 1 通配符 0 <div id="id" class="class"></div>权重相加 1 + 10 div .class { /* 填写css代码 */ } 1 + 100 div #id { /* 填写css代码 */ }两种选择方式都可以将上面的div选择出来，但下面的选择器权重大于上面的选择器，所以下面的优先级更高
4.CSS属性
font（常用）
font-size：用于设置字体大小，作用于字体高度
font-weight：用于设置字体粗细，lighter normal bold bolder / 100 - 900
font-style：用于设置字体样式，italic(斜体)
font-family：用于设置字体
5.标签分类
(1)行级元素/内联元素 display: "inline"
内容决定元素所占位置，不可通过css改变宽高
span strong em a del
(2)块级元素 display: "block"
独占一行，可以通过css改变宽高
div pul li ol from address
(3)行级块元素 display: "inline-block"
内容决定大小，可以改变宽高
img
6.position定位
(1)absolute
脱离原来的位置进行定位，层级发生变化最近的有定位的父级进行定位，如果没有则相对于文档进行定位
(2)relative
保留原来的位置进行定位，相对于自己原来的位置进行定位
margin塌陷问题
子集设置位置时在垂直方向上不相对于父级顶部，而是相对于浏览器顶部
解决方法:
bfc(block format context) 块级格式化上下文
作用：更改渲染规则，几乎可以说是专为解决margin塌陷问题而存在的
将盒子改变为bfc模式的方法：position: absolute; display: inline-block; overflow: hidden; float: left/right;
margin合并问题
两个并列的块在垂直方向上面的margin会合并，可以用bfc规则解决，但需要在其之上加父级，改变了html结构，所以一般不解决此bug。
float浮动元素产生浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc属性的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
清除浮动的方法：
- 在最后加一个p标签，并使用clear清除其左右浮动流
- 使用后面的伪元素清除浮动流，需要注意只有块级元素才可以清除浮动流，而伪元素为行级元素，需要先将其改为块级元素
.class::after {
claer: both;
display: block;
}
