css（cascadding style sheet）层叠样式表，用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。
格式：属性加名称（key：value）
加入方式：行内样式、内嵌样式、链接样式、导入样式
行内样式：直接对html的标记使用style属性，然后将css代码直接写在其中
内嵌样式：将css写在<head></head>之间并用<style></style>标记声明
链接样式：将html和css分离成2个或多个文件，通过链接嵌入
<link href="a.css" type="text/css" rel="stylesheet">
导入样式：在html文件初始化时，会被导入到html文件内，作为文件的一部分，类似内嵌式的效果。
<style>
@import url(a.css)
@import url("a.css")兼容性最好
@import a.css
@import "a.css"
@import 'a.css'
</style>
链接样式和行内样式使用最多。
优先级：行内样式>内嵌样式>导入样式>链接样式
导入和link的区别：link是用到的时候才加载，导入是提前加载，在使用上link>导入
选择器：标记选择器、类别选择器、id选择器
标记选择器：一个html页面由很多不同的标记组成，而css标记选择器就是声明那些标签采用哪种不同的css样式（页面所有标记都会产生变化）；名字是标记名
类别选择器：名称可以又用户自己定义，符合css规范（可以在html页面重复调用）；用.后加类名，用class=类名调用才生效（用得最多）
id选择器：方法和类别相同，但只能在html中调用一次；#+id名称，id名只能用一次（js中用）
声明方式：
集体声明：如果某些选择器的风格是完全相同或者不分相同可以使用
嵌套声明：继承（子继承父的属性，如果有冲突，将先按照子属性显示）
全局声明：*{}
组合声明：标签选择器加组合选择器；p.txt:只有p调用了class=txt才会被调用（优先级高于类别选择器）
盒子模型
IE6、7、8版本、盒子模型向外收缩，其他浏览器盒子模型向外扩张
兼容性：IE5、6、7、8（7、8看IE内核）盒子向内收缩；实际宽度=width+margin
其他浏览器：实际宽度：width+padding+border+margin
内容：包含两个属性，width宽度，height高度（只兼容块级元素，和标记本身有width和height属性的标记）
border有三个属性：
color：设计方法和文字设计方法一样
width：可以设为thin、medium、<length>、其中<length>表示具体的数值，medium默认值为2px
style：可以设为none、hidden、dashed（虚线）、dotted（点线）、soild（实线）、double（双线）、groove、ridge、inset、outset其中none和hidden都不显示border，后面四个不常用因为兼容性不好
实例：三角：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 0;
height: 0;
border-bottom: solid 10px #fff;
border-top: solid 10px #fff;
border-left: solid 10px #00f;
border-right: solid 10px #fff;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
margin和padding是控制距离的属性
margin：如果两个元素都有margin，大多数浏览器之间会有重叠部分。比如相邻的元素a和b，a的margin-right：20px，b的margin-left：20px，ab之间的间距不会是40px
margin和padding优先使用right和buttom
如果设置距离，可以选择padding或者margin，优先使用margin
