定义
css即层叠样式表，可以影响一个或一组文档的表现
层叠是什么
- 样式层叠:在一段代码中可以在不同地方多次对同一选择器进行样式声明，最终多个样式声明会作用于相应位置
- 选择器层叠:不同选择器可以对同一元素进行样式声明，例如class属性和标签声明
- 文件层叠:多个文件进行层叠
样式表
每条代码{}里对应的列表即为样式表
css历史版本
- css1 1966年
- css2 1998
- css2.1 使用最广泛的版本
- css3 分模块起草，不停分模块升级
tips:查询浏览器是否支持某个特性，查询caniuse.com网站
css语法
选择器{
属性名:属性值；
/*注释*/
}
- 语法二
@charset "UTF-8";写在第一行
@import url(2.css)
@media(min-width:100px)and(max-width:200px){
语法二
} - css区分大小写
css相关
- 在浏览器中打开开发者工具，选择想看的元素，若该元素的样式表被划掉那么说明该样式表被覆盖或错误，如果有感叹号肯定是语法错误
- charset含义为字符集，字符集：是多个字符的集合，字符编码便是规定了如何编码、存储这些字符对应的二进制序列。Unicode是字符集，utf-8，utf-16是字符编码。utf-8更加节省空间，应用广泛。
- border调试法
- 怀疑某个元素有问题就给该元素加border
- border没出现，说明有两处有问题选择器或语法
- 写在样式表第一行
border：1px soild：red；，若相应位置出现了border那么选择器没写错 - 在相应语法后加border若没出现那么前一句语句错误
- 在写css时要先写border
- 标准制定者w3c，可搜索w3c spec
文档流（normal flow）
Normal flow”是css中定位的一种默认情况，是引导网页中的元素排列和布局的，它默认的方向是从左向右，从上而下。文档流中有两个比较重要的概念：块级元素（block）、内联元素（inline），对应到最具代表性的元素就是<div><span>块级元素宽度默认会充满整个屏幕，具有自适应性，而内联元素默认则是水平排列。
元素种类
在新版HTML5当中是不区分元素种类的，所有元素都可以有css变成块级元素和内联元素或其他。但是浏览器会默认一个样式
inline元素的流动方向
从左到右排列直到排满另起一行
inline元素的宽度高度
由内部内联元素的宽度总和决定的尽量窄，不要往内联元素中加块元素虽然浏览器仍会渲染但没有规则，内联元素不接受width
内联元素不接受height属性，对于行内元素来说，margin-top,margin-bottom对其不起作用，但margin-left，margin-right以及padding对其起作用,padding虽然存在，但是他不占据空间.(红色为span可视高度的绿色为实际).实际上可以通过line-height来间接调节实际内联元素高度，行高=内容区+行间距。这就是内联元素的inline-box模型
inline
block元素的流动方向
从上到下排列，每一个元素占一行，不会出现并排现象
block元素的宽度高度
块级元素宽度能有多宽有多宽尽量宽，默认width:auto，不是100%.可以用width指定
块级元素的高度由内部的文档流元素决定尽量窄，可以由height指定
inline-block元素；流动方向
从左到右水平，但不会跨行流动
inline-block元素宽度高度
宽度和内联元素一致（尽量窄）
高度与块级元素一致且可设置width和height
文档流溢出overflow
可以用css语句
overflow:scroll；出现滚动条 overflow:auto；如果超出出现滚动条
overflow:hidden；直接隐藏溢出部分
overflow:visible;直接显示溢出部分
盒模型
boxs-izing:content-box； 内容盒 width=内容宽度
boxs-izing:border-box；边框盒 width=内容宽度+padding+border宽度
margin合并
.parent{
border:2px soild red;
}
.child{
border:2px soild blue;
margin:30px 0;
}
- 兄弟合并相邻兄弟上下合并：两个孩子类div之间上下间距合并，但是若加入
display：inline-block；你们margin不合并
单位
em:字体像素的倍数
vw——代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
颜色
- 十六进制数:#FF6600
- rbg（255,255,255）
- rbga（255,255,255，1）最后一个数字是透明度
- hsl（360，100%,100%）色相，饱和度，亮度
自动填充背景色
当给body指定一个背景色时，浏览器会给剩余部分也自动变成该颜色
