文本
text-decoration 文本修饰
line-through 删除线
overline 上划线
underline 下划线
none 没有修饰
text-algin 文本对齐方式
Left center right
text-indent 首行缩进
white-space：nowrap 不换行（wrap 换行）
word-spacing 单词间距
letter-spacing 字母间距
direction 文字排列方向 右到左
边框
.1 border-color:边框的颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
.2 border-width:边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
3 border-style:边框的样式
border-top-style
border-right-style
border-bottom-style
border-left-style
取值：solid：实线 dashed：虚线 dotted：点线
背景
background-color 背景颜色
background-image 背景图片 （添加路径 url（））
background-repeat 背景图片平铺方式
no-repeat（不平铺）
repeat（平铺）
repeat-x （水平平铺）
repeat-y （纵向平铺）
background-postion 背景定位
关键字
x：left center right
y：top center bottom
数值
x：10px/20% （像素大小/百分比）
y：10px/20%
文字
color 字体颜色
font-size 文字大小
font-family 字体
font-weight 字体加粗与否
bold 加粗
normal 正常
font-style 字体倾斜
italic 倾斜
nomral 正常
line-height 行高
字体语法：
font：font-style font-weight font-size/line-height font-family；
元素与元素之间的嵌套
1.行内元素
代表标签：a,span,b,u,i,s,strong,em,ins,del
特点：
² 一行里面可以显示多个
² 无法设置宽高
² 大小由内容来决定
缺点：
² 不能设置宽高
² 属性：display: inline
2.块级元素
代表标签：p,h1-h6,div,ul,li,ol,li,dl,dt,dd
特点：
² 独占一行
² 可以设置宽高
² 默认宽度一整行
缺点：
² 独占一行。
² 属性： display:block
3.行内块级元素
代表标签：img,input
特点：
² 可以设置宽高
² 一行内可显示多个
² 属性：display:inline-block
R 元素之间显示方式切换：修改display属性！
比如：想设置块级元素在同一行显示，可以设置display: inline。
² 行内块元素与行内块元素之间有间隙，为了让他们之间紧挨着，可是给他们都添加浮动：float：left
4.元素之间的嵌套
标签之间是不能够随意嵌套的。
如果一定要嵌套，要满足下面几条：
行内元素只能包含行内元素
块级元素可以包含所有的行内元素和部分块级元素。
p标签，h标签都不能包含块级元素
优先级
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
伪类
a:link 给a标签设置没有被访问过的样式
a:visited 给a标签设置被访问过的样式
a:hover 给a标签设置鼠标悬停时的样式
a:active 给a标签设置被点击的样式
padding
作用：设置盒子的内容与边框之间的距离。
取值：
padding: 40px;给上右下左所有的内边距都设置了40像素的距离
padding: 40px 80px;给上下内边距设置了40像素，下左右边距设置了80像素
padding: 40px 60px 80px;给上边距设置了40像素，左右设置60像素，下设置80像素
padding: 40px 60px 80px 100px;以顺时针方向进行设置，依次为上右下左
padding-top padding-right padding-bottom padding-lef
小属性层叠大属性，不要把小属性写在大属性上面，会被大属性层叠
小盒子的宽度会继承自大盒子，但是小盒子的高度不会继承自大盒子！
margin
margin 外边距
margin:30px(上下左右);
margin:30px(上下) 60px(左右);
margin:10px(上) 30px(左右) 60px(下);
margin:10px(上) 30px(右) 60px(下) 80px(左);
margin-top
margin-right
margin-bottom
margin-left
margin在元素的边框以外，并且margin不会显示元素的背景
同级元素之间的距离用margin，父元素和子元素之间的距离用padding
margin: 0 auto; 让容器水平居中 必须有width，有明确的width
margin设置为负数：
如果margin-left设置为负数，那么将盒子会向左移动。
如果margin-right设置为负数，那么盒子会向右移动。
float(浮动 left/right/none):
1.使内嵌元素支持宽高
2.使块元素在一行显示
3.不设置宽度的时候,宽度由内容
4.脱离文档流
浮动原理:
使元素脱离文档流,然后按照指定的方向去移动，直到碰到父级的边界，或者另外一个浮动元素停止
文档流:文档流是文档中可显示对象在排列时所占用的位置。
清浮动的方法：
1.给同为父元素设置 float
2.给父元素设置display：inline-block；
3.给父元素设置overflow不为visible（默认值） 一般设为auto；
4给父元素加个样式（加入clear）{ :after{content:"";display:block; clear:both;} 目前最流行的方法；}
overflow的值
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
clear 元素的某个方向上不能有浮动元素（left、right、both、none）
定位（position）
position:relative; 相对定位(只加相对定位元素不会有任何变化)
1.不脱离文档流(元素移走元素的初始位置，还会被保留)
2.根据自己的原始位置来计算left(right)和top(bottom)值
3.提升层级
position:absolute; 绝对定位
1. 脱离文档流
2.提升层级
3.根据自己有定位的父级来计算坐标,如果父级没有定位就会一层一层的向外去找.所有的父级都没 有定位,就根据document来计算
4.使内嵌元素支持宽高
5.绝对定位之后不设置宽度，宽度有内容撑开
！！！！元素定位之后，默认情况下，后边的层级高于前边的元素
z-index 层级
1.数值越大层级越高
2.层级只在定位元素上起效果
3.层级最好只在同级元素之间做比较
document 是html的父级