选择器类型
标签选择器
id选择器
类选择器
*通配选择器
交集选择器 #p.span
并集选择器 #p,#q
子代元素选择器 div>span
后代元素选择器 div span
兄弟元素选择器 #q~s
紧邻元素选择器 #q+span
伪类选择器（详细见下）
属性选择器 title(详细见下)
伪类选择器
a:visited{} 浏览过
a:link{} 未浏览过
a:hover{} 鼠标移入
a:active{} 点击 先移入后点击
p::selection{} 鼠标选取
p:before {content:“我会出现在最前面”;color:red} 在…之前
p:after{}在…之后
p:first-letter{} 第一个字母或字
p:first-line{}第一行
p:first-child{}第一个标签必须是p标签
p:last-child{}最后一个标签必须是p标签
p:nth-child(3){}第三个必须是p标签
p:first-of-type{}第一个p标签
p:last-of-type{}最后一个p标签
span:not(#q){}除了#q的span标签 否定伪类
p:nth-of-type(odd){}奇数
p:nth-of-type(even){}偶数
属性选择器title （鼠标移入时会出现）
p[title]{}所有 具有title的p标签
p[title=hello]{} 属性title为hello的p标签
p[title^=h]{} title属性 以h开头的p标签
p[title$=o]{} title属性 以o结尾的p标签
p[title*=l]{} title属性值 包含l的p标签
style样式
在标签内部写style是嵌入式 或 行内式；（不建议使用）
在头部中添加style标签通过选择器改变标签样式 内部样式；（建议使用）
在头部添加link标签引入一个css文件，叫做外链式；（外链式 html重复使用，简洁，强烈建议使用）
不同选择器的优先级
!important >嵌入式=1000>id=100>类和伪类=10>标签=1>通配=0>继承（背景、表格等不能被继承）
同级别的选择器以最后的为准
交集选择器 是各个选择器相加求和 但是不会超过上一级别的优先级
并集选择器之间互不影响
rgb a颜色
rgb(255,0,0) 红色 rgb(255,255,0) 黄色 rgb(255,255,255) 白色 光的三原色 0-255
rgb(0,0,0) 黑色
0% - 100%
rgba(255,0,0,0.5) 半透明 rgba(255,0,0,0) 白 rgba(255,0,0,1) 黑
文字 和 文本
文字 16px 有1px的边框 14*14
font-weight:none normal 普通 bold加粗 100-500一样 500-600 会变粗 电脑没有那么多字体
font-family: 楷体 微软雅黑 字体
font-family:vani,宋体 有的识别中文有的识别英文
设置字体综合写法：
font:bold italic 30px 宋体 第三个必须是字体大小
line-hieght 行高
font:bold italic 30px/36px 宋体
font:bold italic 30px/1 宋体 font-hieght:1
文字之间的距离叫行间距 30-16行高减去文字大小除2再乘以2 14
行高=行间距+文字大小
text-indent:32px; 2个字符 文本样式 首行缩进 一般不建议这样写，浏览器和手机字体不同
text-indent:1em em会继承父元素的字体大小
text-indent:1rem rem会继承body的字体大小
font-size:2rem
text-align:left 默认 right center justify左右都对齐 文本对齐方式
text-transform:none不变形 uppercase 大写 lowercase 全小写 capitalize 首字母大写 文本变形
text-decoration:none overline 上划线 underline 下划线 line-through 中划线 穿过 文本装饰
word-spacing:10px 单词之间的距离 有无空格 空格的大小
div标签
1、可以设置宽和高
2、默认独占一整行，是一个块元素
3、 是一个 盒子模型
4、border-width,border-color ,border-style: none 默认 solid 实线 dashed 虚线 dotted 点状线 double 双实线 当border-width 为一个值时四个边一样，两个值时上下 左右 ，三个值时 上 左右 下 ，四个值 上右下左。。。同理border-color border-style
5、border:1px solid green 可以单独设置一个边，也可以同时设置四个边的样式
6、padding可以单独设置一个内边距，也可同时设置四个内边距
7、盒子的可见区域=内容区+内边距+边框 ！！！有两边
8、兄弟元素垂直外边距相邻是取最大值
9、父子元素垂直外边距重叠，则子元素的外边距会设置给父元素 ，，给父元素设置一个上边框
内联元素
1、不能设置宽和高，大小由自身的内容决定
2、不会独占一整行
3、可以设置边框，但是垂直方向的边框不会影响页面布局
4、可以设置内边距，但是垂直方向的内边距不会影响页面布局
5、水平方向相邻外边距不会重叠而是求和
块元素（p li ）、内联元素（span a s u）、行内块元素
display
display 显示block 可以将元素变成块元素
inline 将元素变成内联元素或行元素显示
inline-block 行内块元素
none 不显示元素，而且元素在网页中不会占有位置
visibility
visible 显示 默认值显示元素
hidden 隐藏 默认值不显示元素，但是会在页面中占有位置
overflow
overflow:溢出部分会在父元素以外显示
visible
hidden 不显示溢出部分，而且不会在页面中占位置
scroll 会为父元素添加水平和垂直两个方向的滚动条无论是否溢出
auto 会根据需求自动添加滚动条
float浮动 清除浮动
文档流 float 层
1、当元素开启浮动以后，会立即脱离文档流，它会尽量的向左上或右上浮动
2、它下面的元素会立即向上移动
3、遇到父元素的边框会停止浮动，或者遇到其他浮动 的元素也会停止浮动
4、当浮动的元素上面是一个块元素，则会停止浮动
5、浮动的元素比较讲究，它不会超过它上面的兄弟元素，最多一边齐
解决高度塌陷：
1、直接设置父元素的高度，但是父元素不会随着子元素的变化而变化，不推荐
2、可以设置父 元素的浮动，可以解决高度塌陷的问题，但会丢失宽带，而且会影响页面布局
3、通过overflow设置一个非visible(hidden)的值，可以解决高度塌陷，谨慎使用
4、 清除浮动 clear:left right both清除的是影响最大的
.q:after{content:’’;display:block;clear:both;} content为内联元素变为块元素