一、
1、文档流，页面的默认排列方式。
2、块元素，默认独占一行
3、行内元素，默认在一行内显示 ，行内元素默认不以设置宽高。
4、替换元素：元素的内容由标签的属性来设置，标签其实是一个占位符
默认导入的资源是作为行内元素，如：<img src=""> <a href=''></a>
5、行内块元素，可以设置宽和高的行内元素
6、display: list-item; 是一个特殊的块元素（仅仅是多了一个列表的块）
7、非替换元素： 元素的内容由用户直接提供或者来自文档自身，一般为双标签
二、样式表
1、内联样式表： 写在标签的 style 属性中，仅应用于当前标签中
如：<p style="color: orange; backgruond: green;">whete are you now </p>
2、内部样式表：写在<style></style>标签中
如:
<style>
p{
width: 200px;
height: 200px;
color: red;
background: lightgreen;
}
</style>3、外部样式表，用<link rel="stylesheet" href="a.css">
外部样式表，可以让所有引入这个样式表的html 页面复用样式声明
4、样式表优先级：就近原则，离标签最近的样式表优先级最高，
从而得：内联样式表优先级最高，内部与外部样式表按写入先后排会先级。
三、选择器
1、元素选择器 p{ color: red;}
2、id 选择器 #IDname{ color: skyblue;} id 是独一无二的，只能指向一个元素，
3、class 选择器 .className{color: lightgreen;} 元素的类属性可以有多个值，以空格隔开
4、后代选择器 ul li{ color: orange;} 即元素选择器前指明父元素
5、通配符选择器 *{ font-size: 16px;} 指明所有元素的字体大小为16px, 优先级最低
6、子元互选择器 ul > li{ background-color: orange;}
7、相邻兄弟选择器 p + a{ color: red;}
8、全部兄弟选择器 #a ~ a{color: #abcdef}
9、属性选择器： *[id]{ background: #1296db;} 选中所有有 id 属性的元素
10、根据属性的名和值来先元素 li[ class="green"]{background: yellow;}
11、选择 class 属性中包括指定单词的元素
p[class ~= “green”]{ color: blue;}h
12、选择以 'au' 开头的类样式的元素
li[class ^= 'au']{ color: orange;}
13、选择以 'jpg' 结尾的类样式的元素
img[ src $='jpg']{width=100px;}
14、选择属性值中包括指定字母 ‘e’的元素
li[ class *= "e"]{ color: cyan;}
四、伪类选择器
1、第一个li
ul li:first-child{ color: lightcyan;}
2、最后一个 li
ul li:last-child{ color: gray;}
3、第 n 个子元素,n 要为具体的值，且n >=1 的整数
ul li:nth-child(n){color: pink;}
4、 只有唯一的子元素
p:only-child{ font-size: 22px;}
