CSS中存在3种的定位机制： 标准文档流（Normal flow） ，浮动（Floats），绝对定位（Absolute Positioning）。
盒子模型：
css动画设置
css样式分为三种：
1、使用CSS的方式 1、内联方式(行内样式) 将css样式定义在某个单独的标签中即将 样式内容 写在 html元素中的style属性中 <div style="color:red;"></div> CSS语法: 属性:属性值; <div style="属性:属性值;属性:属性值;...."></div> 常用属性: color : 修改当前标签中文本的颜色 background-color : 修改当前标签的背景颜色
2、内部样式表 将CSS样式定义在网页中的 <head></head> 中 特点：针对当前网页网页有效 【样式规则】 存放在 html文档头部 【head标签】中的 【style 标签】内 语法：<style type=“text/css”> p{ color:red; background-color:blue; } .content{ font-size:16px; } .content ,#contentWrap{ font-size:16px; } </style>
3.外部样式表 将 样式规则 单独存放在 样式表文件中(**.css),哪个页面想使用，哪个页面就引入当前的样式表文件 step 1 : 创建一个文本文件，将其后缀修改为 .css 在该文件中编写若干 样式规则 step 2 : 在想使用的页面上， 通过 <link /> 引入外部样式表 <link rel='stylesheet' type=text/css" href="css/index.css />
样式表特征 :
1、继承性 大多数的css样式规则可以被继承的。
2、层叠性 为同一个元素 定义多个 样式规则 多个样式规则同时存在时不冲突，多个样式规则会合并成一个，属性重复时以最后一个出现为准。
3、优先级 各级样式表冲突时(行内、内部、外部)，会按照不同的优先级来应用样式 0 : 浏览器缺省设置
1 : 内部样式表 或 外部样式表 冲突时：就近原则，谁在下，以谁为主
2 : 行内样式(内联样式)
4、!important 规则 通过 !important 显示调整样式规则的优先级 放在属性值之后，用 空格 来区分。 例如：font-size: 16px !important; 由!important 标识的属性值，优先级别最高 请谨慎使用
选择器：
1.标签选择器、标记选择器
2.
2、类选择器(class)
3.分类选择器
4.通用选择器
5.id选择器（id）
6.群选择器
7.后代选择器
8.伪类选择器：
:link : 适用于尚未访问的链接，与:visited互斥
:visited : 适用于已访问过的超链接，与:link相斥
动态伪类
:hover : 适用于鼠标悬停在元素上面时候的状态
:active : 元素被激活的一瞬间的状态
:focus : 适用于元素获取焦点时的状态
color：颜色值越大，颜色越正
1、颜色的英文表示法(没人用) 2、rgb(R,G,B) R : red 0-255 G : green 0-255 B : blue 0-255 rgb(0,0,0) : 表示黑色 rgb(255,255,255) : 表示白色 rgb(125,16,72) : 3、rgb(x%,x%,x%) rgb(30%,25%,78%) 4、#rrggbb r:0-9 A-F g:0-9 A-F b:0-9 A-F #000000 : 黑色#ffffff : 白色 #ff0000 : 红色 #e4393c : 京东红5、#rgb -> #rrggbb 的缩写 #ff0000 --> #f00; #77aaee --> #7ae; #e4393c --> 无 6、rgba(0,0,0,0.5) R: 红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数 A：Alpha透明度。取值0~1之间。 7、 opacity:设置透明度（0~1）
边框阴影 属性:box-shadow : 给指定元素边框增加阴影 box-shadow:h-shadow v-shadow blur spread color inset; h-shadow:阴影水平位置 v-shadow:垂直位置 blur : 可选,模糊的距离 spread :可选,阴影尺寸 color : 可选,颜色 inset : 可选,将阴影改为 内阴影 默认outset 常用写法:box-shadow:h-shadow v-shadow blur color; 如： box-shadow: 10px 10px 5px #888888
径向渐变 radial-gradient([size at position],color-point,color-point....); size : 圆的半径 position : 圆心出现的位置，默认为元素的中心 常见例子: background-image: radial-gradient(200px at left,red 0%,green 50%,blue 100%) color-point的值至少取2个
Transform ：向元素应用2D或3D转换 。该属性允许我们对元素进行旋转 、缩放、移动或倾倒 在3D transform 中有下面三个方法： transform:rotateX(angle) transform:rotateY(angle) transform:rotateZ(angle)
文本溢出处理 1、处理空白 white-space:normal / nowrap; 出现场合：配合着overflow:hidden;来对超出范围的内容进行隐藏。从而保证元素的高度 2、文本溢出 overflow:hidden; 元素对溢出后的处理 属性:text-overflow: 取值: clip : 裁剪、切割 ellipsis : 隐藏溢出内容并且显示 ... 注意：text-overflow 要 配合着 overflow:hidden;以及white-space:no-wrap一起使用 长单词换行 属性:word-wrap 值:normal / break-word(长单词换行)
绝对定位 特点：脱离文档流，不占据页面空间 定位位置：相对于【最近】的【已定位】的【祖先】元素 如果祖先元素没有进行定位，它的位置就相对于最初的包含块(body) <nav> <div> <p> <span></span> </p> </div> </nav> 已定位：非static ， 指 relative、absolute、fixed 实现方式： position:absolute top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移
固定定位 将元素固定在页面上的某一个位置，不随滚动条滚动而发生改变 语法: position:fixed; top、left、right、bottom
相对定位 相对于当前元素本身出现的位置而实现定位的一种方式 实现方式: position:relative; 通过 top bottom left right 来实现位置移动 使用场合： 1、会进行位置的微妙的调整 2、配合着绝对定位使用
