## CSS看这一篇就够了
> Css 标准 选择器 加各种样式的声明
> 26、 选择器 有 基础选择器 和 复合选择器
> 27、 标签选择器 标签名 作为选择器 p div h3
> 28、 id选择器 #类名定义 id=“类名定义”。
> 29、 类选择器 class=“nev”
> 30、 Css字体 font normal 字体粗细400 字体大小12px/- line-height字体行高 字体类型 微软雅黑；
- 31、 字体装饰 颜色color 文本对齐 text-align left/- center/right 文字装饰text-decoration ：none； - text-indent文本缩进2em 相对于 font-size 的单位
- 32、 内部样式表 在 style 内部 编写css内容
- 33、 行内样式表 行内 style 修饰文本style=“color：- pink”
> 34、 外部样式表link 某一个css文件
> 35、 后代选择器 ul li a span
> 36、 子元素选择器 ul> li 只选择亲儿子
> 37、 并集选择器 逗号相分割
> 38、 伪类选择器：hover 书写属性要注意顺序，但一般只用hover - lvha
+ 39、 块元素 单独占一行
- 40、 行内元素 内部只能放文字或者行内元素 a 可以放块级元- 素，记得转换块级元素
- 41、 行内块元素 一行放几个 还可以设高和宽
- 42、 背景 颜色color 透明色 transparent 图片 image - url 平铺 no-repeat 位置 position x 坐标 y 坐标 方- 位名词 left right center top bottom
- 43、 如果写一个方位名词，第二个默认居中对齐
- 44、 精确坐标 ：第一个x坐标 第二个y 坐标。
- 45、 Background-position 20px 50px 。
- 46、 单写一个同理
- 47、 背景固定 background-attachment 制作视差滚动效果scroll- 滚动 fixed 固定
- 48、 背景符合写法 background：没有要求顺序 color url - no-repeat fixed center top
- 49、 背景颜色半透明 background：rgba（0，0，0，.3）
-
- 50、 盒子模型
-
- 51、 Margin 外边距 padding 内边距 border 边框 center 中- 心
-
- 52、 Border-radios 10px 10px 10px 10px 圆角边框
-
- 53、 Box-shaldow 10px 10px 10px 10px 盒子阴影
-
- 54、 浮动元素和标准流父盒子一起使用
-
- 55、 添加一个边框transparent 透明色 解决外边距合并问题，浮- 动，固定、绝对定位不会有外边距合并问题
-
- 56、 行内或者行内块 水平居中，给父元素加text-align：center - 就可以。
-
- 57、 块级元素 margin 0px auto
- ### padding 不会撑开盒子的情况
- 当盒子没有指定高或者宽的时候
### margin
- 外边距 0px auto 上下为0 左右居中
### 嵌套元素塌陷
- 可以给父盒子指定一个边框
## css 属性书写顺序
1. 布局定位属性 ： display/ position / float /visibility / overflow (建议display第一个写)
2. 自身属性 ： width / height / margin / padding / border / background
3. 文本属性 ： color / font / text-decoration / text-align / vertical-align / white-spacebreak-word
4. 其他属性 box-shadow
## 定位
1. 绝对定位 position：absulate
- 脱离标准流 不占有位置
2. 相对定位 relative
- 占有原来的位置 不脱标
- 一般情况 都是 子绝父相
3. 固定定位 fixed
- 固定在屏幕上，做一些视觉反差的效果 QQ首页
4. 定位叠放次序 z-index： 1；
- 只有定位的盒子才会有 这个属性
- 默认为auto ，值越大 越靠上显示 ，值可正可负
5. 绝对定位水平垂直居中
- left：50% ；
- margin-left：-一半的盒子宽度;
- top：50%
- margin-top：-一半的盒子高度;
6. 定位的特殊属性 和浮动类似
- 可以给行内块，行内元素 设置高度和宽度
- 块级元素添加绝对定位或者固定定位，不给高度和宽度，默认大小为内容的大小
- 脱标的盒子不会触发外边距塌陷 ： 浮动元素，绝对。固定定位的元素
# 元素的显示和隐藏
1. display :none 隐藏对象 隐藏后不占有原来的位置
2. display: block 显示对象，转换块级元素
### visibility
- visible 元素可视
- hidden 元素隐藏 隐藏后继续占有原来的位置
## overflow :hidden ;
- 超出部分隐藏
- auto 超出显示滚动条 ，不超出不显示滚动条
### 精灵图
1. 有效的减少了服务器发送请求的次数，提高了页面的加载速度
2. background: url(‘精灵图路径’) no-repeat x坐标 y坐标。
- 通常利用js for循环将精灵图放入 ，用Macromedia Fireworks 8 打开精灵图
调为原来的一半大小，放大 ，量取对应精灵图的位置 ，最后用background-size 调整大小
- var index = i*64;
- sps[i].style.backgroundPosition= '0 -'+index+'px';
### icomoon 图标的使用
- https://icomoon.io/app/
- 将icomoon压缩包解压到和 html文件的同一级路径下
- 直接调用即可
1. 在文章或者块级盒子加 字体图标 ：
- 在css文件中 加 content: "\e98d"; font-family: 'icomoon';
- 在搜索框内加字体图标，直接写入placeholder内部
2. 字体图标的追加和加载原理
- 点开icomoon 网站 ，点击左上角图标，弹出对话框，选择xxxx.json 上传 。
- 减少服务器压力 。响应一次
### css三角做法
- width: 0; height: 0;
- border: 10px solid transparent;
- border-top-color: pink;
- - 做好以后由定位固定到应有的位置
2. 高级技巧
- 下边框和左边框 变为 0 ，上边框边长并透明，通过定位放到应有的位置
### 鼠标样式 cursor
1. 默认 cursor: default
2. 小手 pointer
3. 移动 move
4. 文本样式 text
5. 鼠标禁止样式 not-allowed
#### 表单轮廓消除和文本域防拖拽
1. outline-none;
2. resize-none;
### vertical-align
- 用于设置图片或者表单（只对行内块元素有效）和文字垂直对齐
- baseline 默认 基线上
- top 元素顶端与最高元素的顶端对齐
- middle 把此元素放在父元素的中部
- bottom 把元素的顶端 与最低的元素的顶端对齐
### 图片底部空白缝隙解决
- 原因是行内块元素是和基线对齐
- vertical-align middle top bottom(提倡使用的)
- display:block;
#### 单行文本溢出省略号显示
1. 强制一行显示 write-space:nowrap;
2. 超出部分隐藏 overflow:hidden;
3. 用省略号代替超出的部分 text-overflow :ellipsis;
#### css初始化
##### 复制粘贴代码即可
### 语义化标签
1. header 头部标签
2. nev 导航标签
3. article 内容标签
4. section 定义文档某个区域
5. aside 侧边标签
6. footer 尾部标签
### 多媒体标签
#### audio 音频标签
- 谷歌禁用 自动播放 音频 autoplay
- loop = “loop” 循环播放
- controls 属性 控制播放和其他按钮
- autoplay="autoplay" 视频就绪自动播放 （重点）
#### 视频标签
- autoplay="autoplay" 视频就绪自动播放 （重点）
- muted= “muted” 静音播放
- loop = “loop” 循环播放
- controls 属性 控制播放和其他按钮
- poster= “图片路径” ，未加载好视频时显示改图片
- # 必须在form表单域内
- ### 新增表单控件
- 重点记住 number 必须数字类型 tel 手机号码 search 搜索框 三个
- 其他需要自查
- #### 表单属性
- placeholder 提示文本
- submit 提交控件
- 多文件提交控件 multiple
### css新选择器
- nth-child 所有元素都会排列序号
- odd 奇数 even 偶数
- nth-child(n) n从0开始 遍历，直到最后一个，开始改变属性，只可以写n，不可以写其他字母
- 2n 等价于 even
- 2n+1 等价于 奇数 odd
- n+5 从第五个开始（包括第五个）
- -n+5 前五个
#### nth-of-type()
先看孩子是否对应，然后再选择，与nth-child 最大的不同
### 伪类选择器 新(文档中找不到)
- ::before 元素内部前面插入内容
- ::after 元素内部后面插入内容
必须都有 content属性 权重为 1;
### css3 盒子模型
1. box-sizing 默认值为content-box 改变值 border-box
2. 可以忽略padding ，border 样式扩大盒子的大小，只以width为准。
### css 过渡 ，经常和hover搭配使用
1. 属性： transition ： 要过渡的元素 花费时间 运动曲线 何时开始
2. 时间单位为秒
3. 曲线可以省略
transition : width 0.5s ease(默认) 0s
在div内添加 该样式 即可。
div：hover {
width：500px；
}
谁做过渡给谁加
#### 多个样式写法
transition : width 0.5s ease(默认) 0s, height 0.5s 0s;
也可以写 all 0.5s 。。。。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
