（备注：凡是利用圆括号括起来的一般就是注释或者英文解释，用webstorm写程序时一定要注意字符一定要在英文状态下输入！）
1.CSS的格式：
<style type=“text/css">
p{
text-align:center；
color:red;
}
</style>
例如：
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
...
}
</style>
2. 文字属性
格式：font-style:italic(倾斜);
快捷键：
fs:font-style:italic;
fsn:font-style:normal;
3.文字粗细
格式：font-weight:bold;
快捷键：
fw：font-weight:;
fwb：font-weight:bold;
fwbr：font-weight:bolder；
或者取值为100-900整百的值。
4.文字大小
格式：font-size：；
快捷键：
fz30：font-size：30px；
5.文字字体
格式：font-family："楷体"；
ff：font-family：；
常用的字体有："微软雅黑"、"宋体"、"黑体"、"Arial"、"TNR"。
6.文字属性缩写
font: style weight size family;
font：bold italic 10px "楷体"；
style和 weight 可以省略还可以交换位置，
size和family不可以省略也不可以交换位置。
7.文本装饰属性
格式：text-decoration(装饰)：underline;
快捷键：
td：text-decoration:none;
teu:text-decoration:underline;
tdl:text-decoration:line-through(删除线);
tdo:text-decooration:overline;
8.水平对齐
格式：text-align:left;
ta:text-align:left;
tar:text-align:right;
tac:text-align:center;
9.文本缩进
格式：text-indent:2em;
ti2e:text-indent:2em;
10.颜色属性
格式：
color：值；
color：rgb（0，0，0）；（黑色）
color：rgba（255,0,0，0.2）；（浅红色）
color：#ffee00；（黄色）
color：#fe0；（黄色）
11.选择器
标签选择器（直接选中）、ID选择器（#）、类选择器（.）、后代选择器（标签1 （空格）标签2）、子元素选择器（标签1>标签2）、交集选择器（标签1标签2）、并集选择器（标签1，标签2）、兄弟相邻选择器（标签1+标签2）、兄弟通用选择器（标签1~标签2）；
序选择器：1）同级别：标签：first-child、标签：last-child、标签：nth-child(n)、标签：nth-last-child(n)、标签：only-child、标签：nth-of-type(odd)、标签：nth-of-type(even)、nth-child（2n+0）、nth-child（2n+1）、nth-child（3n+1）。
2）同类型：标签：first-of-type、标签：last-of-type、标签：nth-of-type(n)、标签：nth-last-of-type（n)、标签：only-of-type、标签：nth-child(odd)、标签：nth-child(even)。
12.CSS的三大特性
1.继承性
后代可以继承的属性有：color/font-/text-/line
注意点：a标签的文字颜色和下划线不能继承
h标签的文字大小不能继承
2.层叠性
定义：多个选择器选择同一标签又设置相同的属性，也就是CSS处理冲突的能力。
优先级处理：相同时听后面的，近的优先继承性。
id>类>标签>通配符>继承>浏览器默认
优先级之important：
格式：！important；
只能用于直接选中 ，指定哪个优先级更高。
注意点：通配符是直接选中的选择器。
优先级之权重的问题：直接选中的才有效，都含有相同的选择器时，哪个大哪个多听谁的id>=类>=标签>=近的
13.容器级的标签（div.h .ul.ol.dl.li. dt .dd...）和文本级的标签(sapn.p.strong.em....)
css元素的显示模式：
块级元素会独占一行，行内元素不会独占一行。p也是块级元素，还有个行内块级元素（可以设置宽高）。
CSS的显示模式转换：
设置元素的display属性：
display：block/inline/inline-block;
14.背景图片
先设置块元素的宽高：
快捷键:
bgi background-image:url();
15.背景平铺属性
取值：
repeat（默认水平和垂直方向都平铺）
no-repeat（不平铺）
repeat-x：在水平方向平铺
repeat-y：在垂直方向平铺
作用：可以通过背景图片的平铺来降低图片的大小，提升网页的速度。
快捷键：bgr background-repeat：；
16.背景定位属性
作用：控制图片的位置
快捷键：bp background-position：0,0；
取值：水平方向 垂直方向；
方向取值：left，center，right。
具体像素取值：一定要写单位px，能接受负的取值。
注意点：同一标签可设置背景图片和背景颜色，如果颜色和图片同时存在，那么图片会覆盖颜色。
17.背景属性的缩写：
快捷键：
bg+ background：背景颜色 背景图片 平铺方式 关联方式 定位方式；
背景关联方式：attachment（附件、关联）
bga background-attachment：；
取值：scroll(默认值，随着滚动条的滚动而滚动)
fixed（固定，不随滚动条的滚动而滚动）
背景图片和插入图片的区别：
1.背景图片只是一个装饰，不会占用位置，插入图片会占用位置
2.背景图片有定位属性，可以方便的控制图片位置
3.插入图片的语义要强，在企业开发中如果图片想被搜索引擎收录，推荐使用img
18.精灵图
定义：一种图片合成技术
作用：可以减少请求的次数，以及可以降低服务器的处理压力使用，配合北京图片和背景定位来使用。
19.边框属性
定义：环绕在标签宽度和高度周围的线条
连写：
bd+ border：边框的宽度 边框的样式 边框的颜色
bt+ border-top/bottom/right/left：边框的宽度 边框的样式 边框的颜色
border-width/style/color:上 下 左 右；
style取值：solid（固体）、dashed（虚线）、dotted（点缀）、double（加倍）
border-top-width/style/color：;
20.内边距属性：
定义：
边框和内容之间的距离
非连写：
padding-top/right/bottom/left：；
连写
padding:上 下 左 右
取值省略规律：
上右下=左右一致
上右=上下一致，左右一致，
上=上下左右一致
20.外边距属性
定义：标签语标签之间的距离就是外边距
格式：
margin-top/right/bottom/left:;
连写：
margin:上 下 左 右
取值省略规律：
上右下=左右一致
上右=上下一致，左右一致，
上=上下左右一致
回车键Enter也会当做空格span分段会有距离，但此距离不是外边距。
注意点：给标签设置了内边距（padding）和外边距（margin）以及边框（border）时候，标签战友的宽度和高度会发生变化，设置了padding后，padding也会有背景颜色，但是margin不会有颜色，可以设置一个box-sizing：boxder-box（内容的宽度）；这样就能是内容添加了内边距（padding）和外边距（margin）以及边框（border）时候内容的宽高就不会发生变化了。
21.CSS盒子模型
定义：这只是一个形象的比喻，HTML中所有的标签都是盒子。
在HTML中所有的标签都可以设置，以下假设一个几个手机盒子都装着手机：
宽度/高度==指定可以存放内容的区域
内边距==填充物
边框==手机盒子自身
外边距==盒子和盒子之间的间隙
22.盒子模型的宽度和高度
1.内容的宽度和高度：通过width/height属性设置的宽/高度
2.元素的宽度和高度：宽度就是左右内边距+左右边框+width，高度就是上下边框+上下内边距+height
3.元素的宽度和高度：宽度就是左右内边距+左右边框+width+左右外边距，高度就是上下边框+上下内边距+height+上下外边距
23.盒子的box-sizing属性
取值：border-box（内容的宽高）
content-box：（元素的宽高）
默认取值：border-box：content-box；
需要控制嵌套关系盒子的距离一般首先考虑padding，其次再去考虑margin，margin本质上用来控制兄弟之间的间隙的
嵌套关系的盒子中可以利用 margin：0 auto；让里面的盒子在外面的盒子中水平居中
margin;0 auto;只对水平方向有效，对垂直方向无效，但是可以设置他距离上下顶部/底部有一定的距离，如：margin：150px auto;(要设置边框border，不然外面盒子会被一起顶下来)
盒子居中和内容居中的区别：
margin;0 auto;让盒子自身水平居中
text-align：center；设置盒子汇总存储的文字/图片居中
24.清空默认的边距：
使用通配符设置：
*{
margin：0；
padding：0；
}
企业开发中一般使用一下网址中的代码来清空默认的边距：
yui css reset
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css（复制链接打开即可）
25.行高和字号
行高：指的是每行内容的高度
盒子高：指的是元素的高度
1.一行文字在盒子内垂直居中，可设置这行文字的行高等于盒子的高度
2.通过padding来设置文字居中
26.还原字体和字号
1.盒子中存储是文字，一般是以盒子左边的内边距为基准。右边的字体不够排版会挤到下一行，所以右边的有误差。
2.顶部的内边距是边框到行高顶部的距离。
27.文章界面
1.清空所有的边距
2.从外至内、从上至下的编写网页。
28.网页的布局方式
指的就是浏览器对网页中的元素进行排版的
1.标准流（文档流/普通流）的排版方式
浏览器默认的排版方式就是标准流
CSS把元素分为三类：块级元素/行内元素/行内块级元素
两种排版方式：
垂直排版：如果元素为块级元素，就会垂直排版
水平排版：如果元素是行内元素/行内块级元素，那么就会水平排版
2.浮动流排版方式
2.1浮动流是一种“半脱离标准流”的排版方式
2.2浮动流只有一种水平排版方式，只能设置某个元素左对齐或者右对齐、
注意点：浮动流中没有居中对齐，也就是没有center这个取值，而且在浮动流不可以使用margin：0 auto；
特点：块级/行内/行内块级都可以使用水平排版，都可以设置宽高；
浮动流和行内块级元素很像
3.定位流（后面再讲）
29.浮动元素的脱标
定义：脱离标准流
当某个元素浮动后，看上去像从标准流删除了一样，前元素脱标后，后元素没有浮动，那么前面的元素会盖掉后面一元素。
浮动元素排序规则：先浮动的元素显示在前面，后浮动的元素会显示在后面；不同方向上的浮动元素，左浮动找左浮动，右浮动找右浮动；浮动元素浮动之后的位置，由浮动元素浮动之前在标准流的位置来确定。
30.浮动元素的贴靠现象
1.如果父元素的宽度能显示所有的浮动元素，那么浮动元素会并排显示
2.如果父元素的宽度不能显示所有的浮动元素，那么就会从最后一个开始往前贴靠
3.如果贴靠了前面所有的浮动元素之后都不能显示，最终会贴靠到父元素的左边或者右边
31.浮动元素的字围现象
浮动元素不会挡住没有浮动元素中的汉字，没有浮动的文字会自动给浮动的元素让位置，这就是浮动元素的字围现象
32.浮动流和标准流使用的场景
垂直方向使用标准流，水平方向使用浮动流。
复杂界面如何入手
1.从上至下布局
2.从外之内布局
3.水平方向可以先划分为一左一右再对左边或者右边进行布局，局部的垂直方向可以划分为一上一下，再对上面或者下面进行布局
33.浮动元素的高度问题
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
比如div的这个块级元素没有自身高度，标准流中它的内容可以撑起div的高度，但是在浮动流中的内容是不能撑起div的高度的
34.清除浮动的方式
1.给前面的父元素设置一个高度（企业开发中能不写就不写，所以这个用的很少）
2.给后面的盒子添加一个clear属性
clear属性的取值：
none：默认值：左浮动找左浮动，右浮动找右浮动
left：不要找前面的左浮动
right：不要找后面的右浮动
both：都不要找
3.隔墙法
3.1外墙法:在两个盒子中间添加一个额外额块级元素，并且给这个额外的块级元素设置clear：both;属性，
3.2内墙法：在第一个盒子中的所有子元素最后添加一个块级元素，给这个块级元素设置clear：both；属性
特点：外墙法设置之后不能撑起第一个盒子的高度，内墙法可以撑起第一个盒子的高度，企业开发中也很少用到隔墙法
4.使用伪选择器来清楚浮动
伪元素选择器：
定义：给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
格式：
标签名称：：before{
属性名称：值
}
标签名称：：after {
属性名称：值
}
清除的格式：
.box1：：after{
content：" 空格"；（设置添加的子元素的内容为空）
display：black；（设置为块级元素）
height：0；（设置高度为零）
visibility：hidden；(设置子元素隐藏，防止内容溢出)
clear：both；（设置clear：both属性）
}
.box1{
*zoom：1；(兼容IE6)
}
5.裁剪法
.box1{
overflow：hidden
}
5.1将超出标签范围的内容给裁减掉
5.2清除浮动
5.3可以设置margin-top之后，外面的盒子不被顶下来
35定位流的分类
1.相对定位
2.绝对定位
3固定定位
4.静态定位
1.1相对定位
定义：相对定位就是相对于自己以前在标准流中的位置来移动
注意点：
1.1.1不脱离标准流，会继续在标准流中占用一份空间
1.1.2同一个方向上的定位属性只能使用一个
1.1.3由于不脱离标准流，所以在相对定位中是区分块级/行内/行内块级元素的
2.相对定位应用的场景
用于对元素进行微调；配合绝对定位来使用
position：relative；（相对的/亲属）相对定位
position：absolute；（绝对的/完全的）绝对定位
3.绝对定位
定义:绝对定位就是相对于body来定位
3.1绝对定位注意点：
3.1.1绝对定位的元素是脱离标准流的
3.1.2绝对定位的元素是不区分块级/行内/行内块级元素
3.2绝对定位参考点的规律
3.2.1默认情况下所有的绝对定位的元素，无论有没有祖元素，都会以body来定位
3.2..2如果一个绝对定位的元素有祖元素，并且祖元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖元素作为参考点
3.2.2.1只要是这个绝对定位元素的祖元素都可以
3.2.2.2指的定位流是指绝对定位/相对定位/固定定位，静态定位不行
3.3如果一个绝对定位的元素有祖元素，并且这个祖元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖元素作为参考点
36.绝对定位的注意点
1.如果一个绝对定位的元素是以body作为参考点，那么其实就是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度
2.一个绝对定位的原色会忽略祖元素的padding
37.相对定位的弊端和绝对定位的弊端
相对定位的弊端：不脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面
绝对定位的弊端：默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化
这时候就一般就会子绝父相，也就是子元素用绝对定位，父元素用相对定位。
38.绝对定位的水平居中
1.设置绝对元素的left：50%；
2.然后设置绝对定位元素的margin-left：-元素宽度的一半px；
3.如果是盒子的话再设置一个top：10px；（此px值可以适当使用开发者工具进行调整）
