颜色单位

1. RGB(255,255,255)

2. #11 ff ab 十六进制代码 当两位相同时可以简写成3个，比如：#00000

3. input[type="text"]{border: 1px solid red;}<!--属性选择器-->

伪类选择器（一个冒号:）

1. a:link{} <!--链接未访问时的样式-->

2. a:visited{} <!--链接访问过后的样式-->

3. a:hover{} <!--鼠标移入样式-->

4. a:active{} <!--链接点击时样式-->

伪元素选择器(一个冒号: 和 双冒号::都行)

1. a:before{content: "前";}

2. a:after{content: "后";}

并集 组合选择器（任何元素都可以！！）

1. h1,h2,h3,h4,h5{...}

2. .box,p,.Hello{...}    <!--元素、类等等都可以-->

后代选择器：祖元素+空格+后代元素（所有的同类型元素）

1. ul li{}

子级选择器

1. ul>li{}

声明的冲突

1. 一个元素的样式可能有多种来源，当属性相同，值不同时，则出现声明冲突

2. 层叠(机制)去解决声明冲突问题

3. 从左往右进行比较

继承：后代元素会自动拥有祖先的!!某些(文本类的样式会具有继承性)!!CSS样式

1. <div><p></p></div> div{color:red;} p会自动变成红色 

2. 但是p自己设置颜色，颜色会跟随自己设定的

比较特殊性

1. !important > style > id > class\属性\伪类 > 元素(tag)\伪元素 > *(通配符)

 display

block 块级元素 ：可设置宽高 占用所有可用宽度

inline 行内元素 ：不可设置宽高

inline-block: 行内块元素

盒子的组成

margin 外边距

border 边框

padding 内边距

content 内容

边距的设定

四个值： 上 右 下 左

三个值： 上 左右 下

两个值： 左右 上下

一个值：四周 正方形

W3C标准盒模型(设了里面内容的宽/高度，总宽/高度要变)

盒子的总宽/高度=边框*2+内边距*2+内容

IE盒(设定了里面内容的宽/高度，总宽/高度依然不会变)

边框*2+内边距*2+内容=盒子的总宽/高度

垂直方向外边距合并（重叠） 取大值100px

1. {margin-top:50px;}

2. {margin-bottom:100px;}

常规流

在没有CSS干预下，块级元素宽高可以设定，行内元素宽高不可设，且并排显示

3种定位体系 （只能三选一）

1. 常规流

2. 浮动

3. 定位

浮动

子集左浮动 父级右浮动