这篇文章主要是对CSS基础知识的一个概括，后续会慢慢补充其他知识
CSS介绍
- CSS：Cascading Style Sheets 层叠样式表
层叠指什么（分为三类）
- 样式层叠：可以多次对同一选择器进行样式声明
- 选择器层叠：可以用不同选择器对同一元素进行样式声明
- 文件层叠：可以用多个文件进行层叠
CSS语法
-
语法1：样式语法
选择器 { 属性名: 属性值; /*注释*/ } -
语法2：@语法
1三个常用的语法 2注意事项: @charset必须放在第一行, 前两个@语句必须以分号[;]结尾 3@charset "UTF-8"; 4@import url(2.css); 5@media (min-width: 100px) and (max-width: 200px) { 6 语法一 7}
Border调试法
写CSS的过程中可能会遇到很多问题，这个时候可以使用Border调试法进行调试
【步骤】
① 怀疑某个元素样式有问题
② 给这个元素加上border
③ border没出现：说明选择器错了或者语法错了
④ border出现：看看其他样式代码是否书写正确
⑤ bug解决删掉border
文档流（元素在文档中的排列）
【文档流动方向】
inline 元素从左到右，到达最右边才会换行，且换行会使元素中断
block 元素从上到下，每一个都另起一行
inline-block 也是从左到右
【元素宽度】
inline 宽度为内部inline元素的和，不能用width指定
block 默认自动计算宽度，可用width指定，默认宽度为auto，不是100%
注意：宽度最好别写100%
inline-block 结合前两者特点，可用width
【元素高度】
inline 高度由line-height间接确定（与字体有关，字体不一致可能高度不一样），跟height无关
block 高度由内部文档流元素决定，可以设height
inline-block跟block类似，可以设置height
overflow溢出：内容大于容器
当内容的宽度或高度大于容器时会溢出
可以用overflow来设置是否显示滚动条
auto是灵活设置
scroll是永远显示
hidden是直接隐藏溢出部分
visible是直接显示溢出部分（默认）
overflow可以分为overflow-x和overflow-y（不建议使用）
脱离文档流
【两种方式】
float
position：absolute/fixed
两种盒模型
分别是
content-box内容盒：内容就是盒子的边界
border-box边框盒：边框才是盒子的边界
公式
content-box ：width = 内容宽度
border-box ：width = 内容宽度+padding+border
那个好用：border-box
margin合并：只在上下方向存在，左右不存在
哪些情况会合并
父子margin合并
兄弟margin合并
如何阻止合并
父子合并可以用给父元素添加padding/border或者给父元素添加：overflow：hidden
兄弟合并符合预期，可以用inline-block消除
CSS样式
1.内联样式(行内样式)
特点：将CSS样式定义在HTML开始标记中
语法：<div style="样式声明1；样式声明2"></div>
2.内部样式
在网页的头元素中增加一对<style>标记
语法：
<head>
<style>
/*注释*/
选择器 {
属性名: 属性值;
}
...
</style>
</head>
3.外部样式
在网页中引入样式表文件
<head>
<link rel="stylesheet" href="**.css">
</head>
选择器(主要讲伪类选择器)
作用：匹配元素不同的状态的选择器
语法：
所有的伪类都是以：作为开始
选择器：伪类选择器{样式声明}
1.连接伪类
:link 匹配元素尚未访问的状态
:visited 匹配元素访问过的状态
2.动态伪类
:hover 匹配鼠标悬停在元素上时的状态
:active 匹配元素被激活时的状态（超链接，文本框，密码框点击的时候）
:focus 匹配元素获取焦点时的状态（文本框和密码框）
3.选择器的优先级
权值：标识当前选择器的重要程度，权值越大优先级越高。
元素选择器：1
类选择器：10
伪类选择器：10
ID选择择器：100
内联样式：1000
选择器的权值加到一起，大的优先
权值相同，以后定义的为主
光标
改变鼠标悬停在元素上时，鼠标的状态
属性：cursor
取值：
1.default: 默认
2.pointer: 小手
3.crosshair: +
4.text: I
5.wait: 等待
6.help: 帮助