CSS基础

html 标签分类：

1.行级元素:内容决定元素所占位置，不可以通过CSS改变宽高

   span、strong、em、a、del

2.块级元素:独占一行，可以通过CSS改变宽高

   div、p、ul、li、ol 、form、address

3.行级块元素：内容决定大小，可以改宽高

   img

CSS 选择器优先级： !important > 行间样式 > id  > class | 属性  > 标签选择器 > 通配符

CSS 属性：

font-size: 字体大小；

font-weight: bold  lighter normal 等..;

font-family: arial;字体；

font-style: 字体类型： 加粗、斜体等..

color: 字体颜色；

border: 1px solid black; : 边框；

text-align: 文本对奇方式；

line-height:单行文本所占高度；

text-indent:2em;首行缩进；

text-decoration: ubderline, through ：给字体添加下划线，删除线等

cursor: 鼠标提示符；

display: inline block inline-block; 行级元素、块级元素、行级块元素

position: absolute(绝对定位)、relative(相对定位)、fixed(固定定位)

overflow:hidden ; 溢出部分隐藏；

float:left/right浮动；排列元素；

clear:both; 清除浮动流；

:: before/::after{content:"内容"}： 伪元素；

background-image:url() :  背景图片；

background-size：100px 100px; 背景图片大小;

background-repeat: no-repeat： 背景图片平铺；

background-position: center center;背景图片位置；

vertical-align: 调整对齐线；

CSS 3动画：

transform: 2D变形;

2D 变化函数： rotate(旋转)、scale(缩放)、tanslate(移动坐标)、skew(倾斜)

tansform-origin: 改变变形的中心点

transitions ：过渡动画；

transition-property: 指定动画属性名称；

transition-duration: 指定动画需要花费的时间；

transition-timing-function: 指定动画快慢；

transition-delay: 指定动画延迟时间；

animations 动画：

@keyframes{...}: 创建动画

animation-name: 定义动画名称

animation-duration: 定义动画需要花费的时间

animation-timing-function:指定动画快慢

animation-delay: 指定动画延迟的时间

animation-iteration-count: 动画播放次数

animation-direction：是否循环交替动画

animation-play-state:指定动画运行（running）或暂停（paused）

linear-gradient: 颜色线性渐变

radial-gradient:颜色径向渐变

 

单行文本溢出文字{

/*使用... 来展示溢出文字*/

white-space:nowrap;

overflow: hidden;

text-overflow:ellipsis;

}