css（Cascading Style Sheets）：层叠样式表
css相关的属性：
color:设置字体的颜色。
font-size:设置字体的大小。
background:设置背景颜色。
width:设置宽；
height:设置高
与字体相关的属性：
font-size（字体的大小）: 继承性
可能指：
xx-small，
x-small，
small，
medium（默认值），
large，
x-large，
xx-large smaller（把font-size 设置为比父元素更小的尺寸）
larger（把font-size 设置为比父元素更大的尺寸）
length（把font-size 设置为一个固定的值。如12px）
%（把 把font-size 设置为基于父元素的一个百分比值）
font-weight（字体的粗细）:
可以设置具体的数值，是整百的数100-900
可以设置一些关键字：
bold:加粗
normal:正常
bolder: 定义更粗的字符。
lighter: 定义更细的字符。
font-family（字体的类型）
font-style（字体的样式）:
normal: 默认值。浏览器显示一个标准的字体样式。
italic: 斜体
oblique: 倾斜
字体的连写形式：
font : font-style font-weight font-size/line-height font-family;
注意：font-style与font-weight:是可选属性
与颜色相关的属性：
color:属性的取值可以是：
1.0具体的颜色的英文单词 yellow,pink,red。
2.0使用十六进制颜色表示法： #000000=>#000
#003300=>#030
3.0rgb表示法： rgb(100,100,100);
4.0rgba表示法：（四个参数 最后一个参数表示透明度）
5.0inherit 从父元素继承颜色
6.0HSL(H,S,L) H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0-360S：Saturation(饱和度)。取值为：0.0% -100.0% L：Lightness(亮度)。取值为：0.0% -100.0%
7.0HSLA A：Alpha透明度。取值0~1之间。
选择器
1、标签选择器
结构：
标签名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
}
效果：会将所有的这类标签都加上相同的属性。
2、类选择器
.类名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
}
效果：会将所有拥有这个类名的那些标签都加上相同的属性
3、id选择器
id名（选择器） {
属性名1：属性值1;
属性名2：属性值2;
}
效果：会将所有拥有这个id名的标签加上相同的属性
4、id选择器与类选择器之间区别
类名：相当于是人的姓名。（可以重复） 一个类名可以设置给多个标签，一个标签可以有多个类名
id名：相当于是身份证号码。（必须唯一）
特点：只能给一个标签设置这个id名 一个标签只能有一个id名。
5、id与类名命名的规则：
命名的取值范围只能是：0-9,a-z,A-Z,_,-并且不能以数字开头。 id一般用驼峰命名规则，类名一般用-z连字符命名规则。
6、通配符
* {
属性名1：属性值;
}
作用：会将页面上所有的标签都设置这个属性。会去页面上一个一个的遍历页面的标签，然后给他们进行设置（效率低）
7、并集选择器(有逗号)
p, .zm {
属性名1：属性值;
}
8、交集选择器（标签和类名时，标签在前）
p.zm { 属性名1：属性值; }
9、后代选择器
.father p { 属性名1：属性值; }
10、子代选择器 作用：找到一个标签的直接子元素来设置样式。
.father>p
css样式的三种类型
嵌套样式: head中的title下面、作用范围当前样式所处的页面
行内样式：标签中通过style来设置、作用范围只能作用在当前标签之中，出了这个标签就没有作用
外联样式： 在其它文本中要使用要通过link标签、作用范围所有的页面都可以使用
其他属性
text-indent：设置首行缩进。
用法：text-indent: 2em; em:一个文本的距离。
取值：具体指：em px
% 定义基于父元素宽度的百分比的缩进。
text-align：属性规定元素中的文本的水平对齐方式。。可继承
用法：设置文本的位置。
取值：center:设置内容在容器的水平方向上居中。
left:设置内容在窗口的水平方向上靠左
right:设置内容在容器的水平方向上靠右
justify: 实现两端对齐文本效果。
text-decoration：设置文本的装饰
取值：none:没有任何装饰
underline:下划线
overline：定义文本上的一条线。
line-through：定义穿过文本下的一条线。
blink：定义闪烁的文本。
inherit：规定应该从父元素继承 text-decoration 属性的值。
background：背景相关的属性
background-color:设置背景颜色
background-image:设置背景图片
写法：background-image:url(图片的路径);
//默认情况下图片如果比容器要小，它会平铺。
background-repeat:设置背景是否平铺：
取值：no-repeat:不平铺
repeat-x：在水平方向上平铺
repeat-y:在垂直方向上平铺
repeat:平铺
background-position:设置背景图片的位置
法：background-postion: x y;
注意：x,y可以是具体的数值
x,y又可以是一些英文单词。
x: left 左 center 中 right 右
y: top 上 center 中 bottom下
background-attachment 背景图片是固定还是滚动
背景的连写方式：
background: background-color background-image(精灵图坐标) background-repeat background-position;
vertical-align：属性设置元素的垂直对齐方式。
img{
vertical-align:text-top;
}
取值：
baseline：默认。元素放置在父元素的基线上。
sub：垂直对齐文本的下标。
super：垂直对齐文本的上标
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。
top：把元素的顶端与行中最高元素的顶端对齐。
text-top：把元素的顶端与父元素字体的顶端对齐。
overflow: 溢出
取值：
hidden：会将超出容器的部分隐藏起来
scroll：给容器加上滚动条
auto：根据具体情况判断容器是否要加上滚动条
opacity：不透明度
赋值：opacity:0.5; 取值：在0-1之间的小数。
这个属性ie6不支持，如果要在ie6中设置透明，要用：
filter: Alpha(opacity=50);
元素的隐藏
overflow:hidden//将超出的部分裁剪掉
visibility: hidden//可以将元素隐藏，但是在页面上还保留着原来的位置。（停薪留职）
display: none;//可以将元素隐藏，并且在页面不占据位置。
opacity: 0
diplay:none与display:block是一对反义词。
css三大特性
1、继承性
作用：子元素可以继承父元素的样式。
text-,font-,line-开头的属性和color都是可以继承的
特殊性：
a标签的颜色不能继承，如果一定要修改a标签的颜色直接作用在a标签上面
h标签的大小不能继承，如果一定要修改h标签的大小直接作用在h标签上面。
div的高度如果不设置由内容来决定（没有内容 那么高度为0），宽度默认由父元素继承过来
2、层叠性
是浏览器处理冲突的一个特性
作用：如果一个属性通过两个选择器设置到同一个元素上面，那么这个时候一个属性就会将另一个属性层叠掉。
如果多个不同的属性通过两个选择器设置到一个元素上面，那么不会发生层叠。
3、优先级
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
虽然important是一个变数，但是不能作用在继承上。!important属性无法继承。
权重：作用：多个选择器组合以后的优先级。
算法：（0，0，0，0）==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，
第四个0对应的是标签选择器的个数，就是当前选择器的权重。
比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。
总结：权重其它是优先级的算法
优先级是层叠表现。
### 元素的显示方式：
行内元素：span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、textarea、tt、u、var 属性：display: inline
特点：1.0一行里面可以显示多个
2.0无法设置宽高
3.0大小由内容来决定
缺点：不能设置宽高
块级元素： div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
属性： display:block
特点：1.0独占一行
2.0可以设置宽高
3.0默认宽度一整行
缺点：独占一行。
行内块级元素：img,input
属性：display:inline-block
特点：1.0可以设置宽高
2.0一行内可显示多个，与类选择器相似，但是又有所不同。
### 行高（line-height）
应用 ：如果行高等于容器的高度那么元素在父容器中垂直居中。
行高的定义：两行文本之间基线的距离就是做行高。
默认情况下一行文本的行高分为：上间距，文本的高度，下间距，并且上间距是等于下间距的，
所以文字默认在这一行中是垂直居中的。
问题：为什么行高等于容器的高度，元素在父容器中垂直居中？
因为如果行高等于容器的高度，那么相当这个容器中只有这一行文本，并且容器被这一行文本占满。
而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。
行高是可以继承的
行高的单位：
a.具体的像素值。
b.使用em em指的是当前标签父盒子设置的字体大小。
比如当前标签字体大小为16px，那么2em=32px，如果当前标签字体大小为20px，那么3em=60px;
c.使用%百分号：与em一样，都是以当前标签的字体大小为基数，如果大小 18px，那么 line-height:200%;line-height: 36px;
d.可以什么单位都不带：与em一样，也是当前标签的字体大小为基数。
注意：
1.0在设置行高的时候，如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素。em的大小是根据父类元素的font-size来设置的
2.0在设置行高的时候，如果单位是没有，那么将来行高会先继承给子元素，然后再计算出行高。
行高与font的关系
font: font-style font-weight font-size/line-height font-family.
### 盒子模型
1、标准盒子模型包括：margin、padding、border、content,并且content不包括其他部分。
宽度：左右margin+左右border+左右padding+width
2、IE盒子模型包括：margin、content,但是content包括border和padding
宽度：左右margin+width
3、盒子属性
盒子的挡板---------border
盒子的泡沫---------padding
盒子中的物品--------内容
盒子与盒子之间的距离---------margin
border(边框)---盒子的挡板
a、border-color:边框的颜色
border-top-color border-right-color
border-bottom-color border-left-color
b、border-width:边框的宽度
border-top-width border-right-width
border-bottom-width border-left-width
c、border-style:边框的样式
border-top-style border-right-style
border-bottom-style border-left-style
取值： solid：实线。dashed：虚线 dotted：点线
d、边框的连写方法
border: border-width border-style border-color;
盒子的填充：padding(内边距)
作用：设置盒子的内容与边框之间的距离。
取值：padding: 40px;
给上右下左所有的内边距都设置了40像素的距离。
padding: 40px 80px;
给上下内边距设置了40像素，下左右边距设置了80像素
padding: 40px 60px 80px;
给上边距设置了40像素，给左右设置了60像素，给下设置了80像素。
padding: 40px 60px 80px 100px;以顺时针方向进行设置，上为40px,右为60像素，下为80像素，右为100像素。
padding（盒子中的填充物）会改变盒子的大小，比如定义盒子长100px，如果padding: 0 10px; 此时的盒子长度会变成120px;
此时有两种解决方法： 1、盒子总长度定义为80px，那么此时的盒子长度还是为100px, 2、给盒子添加属性box-sizing:border-box;
特殊情况下padding不会改变盒子的大小：
当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。
盒子与盒子之间的距离：margin（外边距）
作用：设置盒子与盒子之间的距离。
很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding.
例如：
1)body标签默认带有margin: 8px的属性
2)p标签默认带有margin: font-size 0;
3)h标签也默认带有margin-top和margin-bottom
4)ul默认带有上下的margin以及左边的padding
清除的方法：
* {margin: 0;
padding: 0;}
margin两种特殊的现象
a、外边距的合并现象：
如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。
b、margin塌陷现象：
如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移
解决方案：
1.0给大盒子加一个边框 2.0给大盒子设置一个overflow属性。 3.0给大、小盒子随意一个设置浮动也可以
4.0为父盒子设定padding值
5.0利用伪元素给子元素的前面添加一个空元素
浮动
浮动的代码： float:left; float:right
浮动的特点：（标准流：就是浏览默认摆放盒子的标准）
a、浮动的元素会脱离标准流：
b、浮动以后的元素会覆盖在标准流的元素之上。
c、浮动规则：浮动找浮动，不浮动找不浮动
浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。
d、浮动显示的位置与原本不浮动之前的位置是对应的：
e、浮动的元素只会影响下面的元素，不会影响上面的元素：
f、浮动的元素会改变显示方式
不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。
浮动以后的元素可以设置宽高。
总结：浮动以后的元素的显示方式与行内块级元素一样。
清除浮动
浮动对页面的影响：
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，
那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
清除浮动：clear:both;
清除浮动方法：
1、使用额外标签法：
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。
a、内部标签：会将这个浮动盒子的父盒子高度重新撑开
b、外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子
一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。
2、使用overflow属性来清除浮动
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:auto，就是清除这个父元素中的子元素浮动对页面的影响。
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏
3、使用伪元素来清除浮动：
.clearfix:after {
content: "";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility: hidden;//将元素隐藏 否则会占位
}
.clearfix {、
zoom: 1;/*为了兼容ie6*/
}
定位
作用：解决页面上盒子与盒子之间的层叠问题。
position
取值：static。静态定位。所有的标准流中的元素都是静态定位。
relative。相对定位。
如果设置了相对定位并且设置了trbl属性，那么将来盒子会以盒子原本的位置发生偏移。
特点：
a、相对于原来的位置进行平移
b、设置了相对定位的元素在页面上占据了位置（没有脱离标准流）。
移动之后以前的位置 还是被占据
定位点：父元素的content
absolute。绝对定位
使用的时候也要配合trbl属性来使用
特点：
1.0绝对定位的元素偏移是以距离自己最近有定位祖先的父元素（position值为非static）为基础，如果都没有则相对于body来定位的。
2.0绝对定位之后的元素在页面不会占据位置（绝对定位以后的元素会脱离标准流）
定位点：
如果子元素只设置了absolute 未设置top left 则定位点是以content为准
如果设置了top left则以padding为准
fixed：固定
使用的时候也要配合trbl属性来使用
特点：
1）不管页面有多大，trbl永远是相对于浏览器的边框来的。
2）固定定位的元素也脱离了标准流（不在页面上占据位置）
sticky：粘性定位元素
它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。
常用场景：当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。
生效规则:
1、须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
```
top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
```
2、设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
```
如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以position:sticky元素也不会有滚动然后固定的情况。
如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
```
3、 达到设定的阀值。这个还算好理解，也就是设定了position:sticky的元素表现为relative还是fixed是根据元素是否达到设定了的阈值决定的。
子绝父相
子元素使用绝对定位，父元素使用相对定位。
案例：如果小盒子在大盒子中要定位并且水平居中：
先left: 50%，将小盒子在大盒子平移大盒子的一半，再设置margin-left：-(小盒子宽度的一半),
注意一定是负数，那么将来小盒子在大盒子中就可以水平居中了。
margin: 0 auto 也可以居中
如果定位的盒子没有宽高，那么默认宽高为0
下面两种方法也可居中
position: absolute;
/* width: 100%; */
right: 0;
left: 0;
html中标签的嵌套规则
1.0行内元素只能包含行内元素
2.0块级元素可以包含所有的行内元素和部分块级元素。
3.0p标签，h标签都不能包含块级元素
a标签去除默认样式
```
a{
text-decoration: none
}
li标签去除默认样式
li{
list-style: none
}
谷歌默认大小是16px.margin: 0auto;
作用：设置容器自身水平居中。
/*废物利用*/s,i,em,b{font-style: normal;text-decoration: none;}
```
// 定时器版
