css总结
消除button和input之间的间距
input是内联块状元素，内联元素是当做字体来处理的，字体之间是存在间隔的，所以内联元素之间也会有间隔
解决办法：
（1）在父级元素上设置font-size: 0;
（2）设置input为块元素，并且给一个左浮动 （推荐）
（3）html中去掉input，button标签之间的空格 （不推荐）
1. font-variant：
设置西文文本的小型大写字母。
取值：normal，正常。
small-caps，小型大写字母。只对小写字母生效，将小写字母转换为比本身就是大写 字母略小的大写字母。
2. background-attachment：附件。
设置背景图片是否随着页面滚动条的滚动而滚动。
取值：scroll，默认值，背景图片随着浏览器页面的滚动而滚动。
fixed，背景图片不随浏览器页面的滚动而滚动。
3. list-style-image：设置列表项左侧的图片
list-style-position：设置列表项的位置。
4. 图片的容器高度为auto时，图片底部产生一个默认约3px间距问题
（1）当图片的容器高度为auto时，会在图片底部产生一个默认约3px的间距。
（2）底部3px是如何产生的？
由于图片作为内联元素，与周围元素的垂直对齐方式默认为“基线对齐”。
vertical-align：设置内联元素与周围元素的垂直对齐方式，该属性的默认值为baseline（基线）。
（3）底部产生的空白距离与容器的字号大小设置有关。
（4）如何解决图片底部的3px问题？
A .设置容器的字号为0。
.box{ font-size:0; }
B .设置容器的行高为0，表示行高是字号的0倍。
.box{ line-height:0; }
C .设置图片的垂直对齐方式不是“基线对齐”。
.box img{ vertical-align:top; }
D .设置图片为块级元素.
.box img{ display:block; }
5.z-index
要在非流式布局下使用(fixed/absolute/relative定位),取值越大，元素越靠外
6.模态窗口
遮罩层的样式布局：
（1）遮罩层占据了页面的整宽和整高，所以宽度和高度均为100%。
（2）高度为100%，浏览器是无法识别的。
解决方案：将遮罩层设置为非流式布局(一般为固定定位,即使有滚动条也能全覆盖)。
7.滑动门 onmouseover=""
当鼠标经过事件发生时
为每一个元素设置一个id，可以使用下列句式改变指定id的 元素的CSS样式。 （1）设置指定id的元素的样式：id.style.CSS属性名="CSS属性值"; （2）设置自己的样式：this.style.CSS属性名="CSS属性值"; CSS属性名必须使用**驼峰式命名**：去掉CSS属性名的短横线，并将短横线后的单词首字母大写;**外面双引,里面单引**
8. 鼠标属性
取值：default，鼠标外观为默认外观。
none，鼠标外观不可见。
text，鼠标外观为文本选中模式。
vertical-text，鼠标外观为垂直方向的文本选中模式。
pointer，鼠标外观为手型。
move，鼠标外观为可移动模式。
wait，鼠标外观为等待模式。
crosshair，鼠标外观为十字准星。
9.pointer-events：设置元素是否能够响应鼠标事件
10.align-self
可以独立设置一个弹性项目相对于弹性容器的交叉轴对齐方式。
取值：flex-start、flex-end、center、baseline。
11.css三角形
.triangle{
width:0; height:0;
border-style:solid;
}
.triangleDown{
border-bottom:none;
border-left-color:transparent!important;
border-right-color:transparent!important;
}
12.transition
设置变形过程中的动画过渡效果。
（1）transition-property：设置都有哪些CSS属性参与过渡效果的变化。all，默认值，表示所有的CSS属性都参与过渡效果的变化。
(2)transition-duration：设置过渡效果的变化时长。不具备默认值，所以在使用时必须被指定。
(3)transition-delay：设置过渡效果的延迟时长。
(4)transition-timing-function：设置过渡效果的缓动功能。
13.关键帧动画：
@keyframes 动画名称{
from{起始状态的CSS代码} // 0%{起始状态的CSS代码}
to{终止状态的CSS代码} // 100%{终止状态的CSS代码}
}
例：@keyframes ballMove{
from{margin-left:0;}
to{margin-left:600px;}
}
animation属性的派生子属性：
（1）animation-name
（2）animation-duration
（3）animation-timing-function：设置关键帧动画的缓动效果。
取值：ease（默认值）、linear（匀速变化）、ease-in（越来越快）、
ease-out（越来越慢）、ease-in-out（慢-快-慢）。
开发者工具 | 右上角三个点 | More tools（更多工具）|Animations，打开动画面板。
（4）animation-delay：设置关键帧动画的延迟效果。
（5）animation-iteration-count：设置关键帧动画的重复播放次数。
取值：1（默认值，表示只播放一次）。
表示播放次数的整数。
infinite（表示无限循环播放）
（6）animation-direction：设置关键帧动画循环播放时的播放方向。
取值：normal（默认值，循环播放每次都从起始状态播放）。
reverse（反向，循环播放每次都从终止状态播放）。
alternate（往复动画，循环播放从起始状态开始往复播放）。
alternate-reverse（反向往复动画，循环播放从终止状态往复播放）。
（7）animation-fill-mode：设置动画的播放状态。
动画的状态：起始状态（0%）、过渡状态、终止状态（100%）。
取值：none（默认值，动画结束时恢复为没有动画的状态，没有动画的状态不是动画的第一帧状态）。
forwards（动画结束时停留在最后一帧的状态，最后一帧的状态是100%的状态）。
backwards（动画开始时停留在第一帧的状态，即0%的状态，而不是没有动画的状态）。
both（结合了forwards和backwards的取值）
（8）animation-play-state：设置动画处于播放还是暂停状态。
取值：running（默认值，动画处于播放状态）。
paused（动画处于暂停状态）。
animation属性的取值顺序：
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
三种元素模式
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
权重计算公式
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
- 值从左到右，左面的最大，一级大于一级，数位之间没有进 制，级别之间不可超越。
css误区
1. a不能和img放一起 都是内联元素,会在一行显示 把img用div包裹
2. body中的背景图片为了在放大缩小浏览器时始终居中，可设置background position ：top （center可省略）
3.vertical-ali设置内敛元素与周围元素垂直方向对齐方式 设置在img上,但并不能完美居中，可用弹性布局解决
4.文字与左边框距离可以测量像素用首行缩紧 空两行用2em
5.
