红色部分为常用或者重点部分
CSS：
1.美化网页 2.布局，定位样式语法：
<head>
<style type="text/css">
选择器（修饰对象）：
1.标签选择器（标签{属性：属性值}），
2.ID选择器（#menu{属性：属性值}），
3.类选择器(.类名{属性：属性值}) 。
对象的属性1：属性值1；
对象的属性2：属性值2；
4.后代选择器
}
</style>
</head>
ul>li*4 加tap键自动生成多个
标签选择器
内部样式
外部样式<link href="网址" rel=stylesheet type="text/css">
line-heght垂直居中
text-align水平居中
opacity透明度
border: 1px solid blue;
letter-spacing字距
text-decoration:underline下划线
text-decoration:none;去掉下划线或中间线
text-indent首行缩进
overflow隐藏
white-space: nowrap(不换行)
text-overflow:ellipsis;(省略号显示)
text-align="justify"(文本两端不留空白)
background-image背景图
background-repeat背景重复方式
background-position背景位置坐标（可用像素和百分比表示）
list-style-列表风格
float:left水平摆放
超链接样式的四种状态
1.未访问的状态：（a:link）
2.已访问的状态：（a:visited）
3.鼠标移上的状态：（a:hover）
4.灵活选定状态：（a:active）
"Box Model"规定了:元素框处理元素的内容（element content）,
(padding)内边距（填充），（margin）外边距（边界）,(border)边框。
1. margin-top,margin-right,margin-bottom,
margin: 100px 0px 0px 100px;(上，右，下，左)
margin: 100px 0px;（上下，左右）
margin:0 auto(居中显示)
body和html之间有外边距
/*变态盒模型*/ box-sizing: border-box;
2.border:color,width,style,top,right,bottom,left
border:20px red solid; (宽度，颜色，样式)
3.padding:top,right,bottom,left
4.border-radius为元素添加圆角边框
20px/70px 前者为X轴，后者为Y轴。
5.box-shadow添加周边阴影效果
box-shadow:x,y,blur-ridius(模糊半径),(阴影扩展) 颜色
6.outline(轮廓)：width,style,color(不占空间)
float:浮动
清除float带来的影响用1.clear(不常用)：right,left,both.none。
清除float: .clearfix:after
content:""
display:table;
clear:both;
</body>
标准流模式：
块级盒子从上往下
行级盒子从左向右
<!--水平盒子设外间距margin，距离是两个盒子之间的距离和
垂直盒子设外间距margin，距离是两个盒子之间的较大的距离（最大值）
{（水平）行级元素的左右外边距=两者或者多者之和
（垂直）块级元素的左右外边距=两者或者多者之中的最大值}
盒子内还有一个盒子，如果要在两个盒子外面加margin，要在盒子里加padding或者border，才可生效。
解决方式
1、为父盒子添加 overflow：hidden
2、为父盒子添加padding
3、为父盒子添加border
margin:10px 20px 30px (上 左右 下)
margin:10px 20px 30px 40px(上右下左)
定位机制：
position: 1.static
2.相对定位（relation）参照物是自己,仍占据原来的空间不会被其他元素占用。
3.(父子)绝对定位（absolute）参照物是html（可以说是最近的已经定了位的父元素），如果所有的父元素
都没有使用定位，则以body为坐标进行定位。并且元素占用的空间会被其他元素占用。
4.fixed
transition:
负边距：垂直居中 ：position:absolute top/left:50% margin-left/top:-100px 原来的盒子是200px
负边距会增加元素的宽度
1.选择器：
*通配选择器
E标签选择器
E#id ID选择器
E.class类选择器
E F包含选择器，后代选择器
E[foo]属性选择器：
E[att^="val"]选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素。
E>F子包含选择器
E+F相邻兄弟选择器
并集选择器
结构伪类选择器：
nth-child:匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高
是body，即E可以是body的子元素该选择符允许使用一个乘法因子(n)
来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符
可以写成：E:nth-child(2n).
E:nth-last-child(n):
匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1)
E:nth-of-type(n):
匹配同类型中的第n个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E
UI状态伪类选择器：
E：enabled
E：disabled
E:checked
2.属性前缀:
Chorme:Safari;-webkit-
Opera:-o-
IE：-ms-
FireFax：-moz-
3.长度单位:
Em：元素字号挂钩 默认下1em=16px
Rem：与文档的根元素挂钩，文本缩进
px： 父元素 12px=0.75em,10px=0.625em
%
4.变形效果:
transform：指定使用何种变形功能。
translate 水平，垂直两个方向上的平移元素
scale 水平，垂直两个方向上的缩放元素
rotate：旋转元素 单位deg
skew 倾斜
transform-orign:指定变形的起点。方位
5.过渡效果:
transition：属性 时间 缓动 延迟
property:指定过渡使用的属性
duration:完成过渡的时间
timing-function 指定过渡函数 ease
delay 指定过渡开始出现延迟的时间
6.动画效果:
@keyframes:定义一个动画
animation:应用动画：
name:名称
duration：持续时间
timing-function：速度曲线
delay：延迟
interation-count:动画播放次数 infinite 无限次播放
direction 是否逆向播放 alternate 逆向循环播放
fill-mode:规定对象动画时间之外的状态
play-state：
running： 运动
paused： 暂停
2308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
