css编写位置
1.内联样式
只能控制当前标签样式，样式不复用。
2.内部样式
写在html页面内部，单独放在<style>标签中。
这种写法，样式可以复用，代发结构清晰。
没有实现结构与样式的完全分离，多个html页面无法复用样式。
3.外部样式
写在单独的css文件中，然后在html文件中的<head>标签中引用。
样式可以复用，结构清晰，可以触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
样式优先级
important > 内联样式 > id选择器 > class选择器 > 元素选择器 > * >继承样式
选择器
1.后代选择器
2.子代选择器
3.兄弟选择器（div+p div～p）
4.属性选择器 (选择属性值符合一定要求的元素)
[title]{}
[title=‘test’]
[title$=’t’]
[title^=’t’]
[title*=’e’]
5.伪类选择器
伪类很像类，但不是类，是元素特殊状态的一种描述。
例如 a:link a:visited a:hover a:actived
后面是所有元素都有这两个伪类
6.动态伪类
a:link
a:visited
a:hover
a:actived
Input:focus (只有表单元素能用)
7.结构伪类
First-child p:first-child
nth-child(n)
nth-child(2n) even
nth-child(2n+1) odd
如果选择前三个 -n+3 an+b
8.否定伪类
:not(.test){}
9.Ui伪类
Input:checked{}选中的单选和复选按钮
Input:disableld{}
Input:enabled{}
10.目标伪类
:target{} 选中锚点指定的元素
11.语言伪类
Div:lang(en){}
12.伪元素选择器（很像元素，但不是元素，是元素中的一些特殊位置）
P:first-letter
P:last-line
P:selection 选中p中被鼠标选中的颜色
Input:placeholder选中的是input中的提示文字
P::before {content:’¥’} 选中的是p元素最开始的位置，随后创建一个子元素
P::after {content:’.00’} 选中的是p元素最后的位置，随后创建一个子元素
Css的三大特性
层叠性
继承性
优先级
权重比较（a,b,c）
a:id 选择器的个数
b:类 伪类 属性选择器的个数
c:元素 伪元素 选择器的个数
Margin
块元素，行内块元素的四个方向的margin都可以设置，行内元素左右的margin可以设置，上下margin设置无效。
如果给一个块元素设置margin:0 auto;则该块元素水平居中。
margin塌陷
第一个子元素的margin-top 最后一个子元素的margin-bottom会设置给元素。
解决方案：给父元素设置padding或者border或者设置overflow:hidden.
Css长度单位 （必须设置单位，否则设置无效）
1.px 像素
2.em 相对父元素或祖先元素的font-size的倍数。
3.rem 相对根字体大小，html标签就是根。
4.% 相对父元素计算的。
块元素
在页面中独占一行，不会与任何元素共占一行，从上到下排列。
默认宽度撑满父元素
默认高度由内容撑开
可以通过css设置宽和高
行内元素
在页面中不独占一行，从左到右排列，一行容纳不下的换到下一行。
默认宽度和高度都是由内容撑开。
无法通过css设置宽和高。
行内块元素
默认宽度和高度都是由内容撑开。
可以通过css设置宽和高。
样式继承
可以继承:字体 字体样式 颜色等
不能继承：内外边距 宽高 边框 背景 溢出方式
能继承的都是不影响布局的，就是都是和盒子没有关系的。
布局小技巧
1、行内元素和行内块元素可以被父元素当做文本处理的。
例如 text-align line-height text-indent等能直接用在行内和行内块元素上。
2、如何让子元素在父元素水平居中
若子元素为块元素，给父元素加上：margin：0 auto;
若子元素为行内元素、行内块元素，给父元素加上：text-align:center;
3、如何让子元素在父元素垂直居中
若子元素为块元素，给子元素设置margin-top
若子元素为行内元素，行内块元素:
让父元素height = line-height，每个子元素加上vertical-align:middle
若想绝对垂直居中，父元素font-size设置为0.
元素浮动后的特点
1、脱离文档流
2、不管浮动前是什么元素，浮动后默认宽与高都是被内容撑开的，而且可以设置宽高。
3、不会独占一行，可以与其他元素共占一行。
4、不会margin合并，也不会margin塌陷，能够完美设置四个方向的margin和padding。
5、不会像行内块一样当做文本处理（没有行内块的空白问题）
