css总结2
1浮动
浮动的目的是为了让多个块级元素同一行上显示
浮漏特
浮：加了浮动的元素盒子是浮起来的 漂浮的其他标准流盒子上面
漏：家里浮动的盒子，不占位置，它浮起来了，它原来的位置漏给了标准流的盒子
特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特别注意浮动可以使元素显示模式体现为行内块特性。
为什么要清除浮动：
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些影响，此时就需要在该元素中清除浮动
清除浮动的本质：为了解决父级元素因为子级浮动引起内部高度为0的问题
清除浮动的方法;
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素
（1）css中用clear清除
选择器{clear：属性值（left right both）}
（2）html中在浮动元素末尾添加一个空的标签<div style="clear:both"></div>或者其他标签
（3）父级添加overflow属性方法 可以通过触发BFC方式，来实现清除浮动效果
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
（4）使用after伪元素清除浮动
after方式为空元素的升级版
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */
（5）使用after和before双伪类清除浮动
2 定位
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 | | ------------ | ---------- | --------- | ---------------- | | 静态static | 不脱标，正常模式 | 不可以 | 正常模式 | | 相对定位relative | 脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） | | 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） | | 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
定位模式转换
跟浮动一样，元素添加了绝对定位和相对定位 元素模式会发生转变 都转变为行内块模式 行内块的的宽度和高度饿、跟内容有关
因此：行内元素如果添加了绝对定位或固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以
3 cursor : default 小白 | pointer 小手 | move 移动 | text 文本
4 防止拖拽文本域resize
resize：none 这个单词可以防止火狐 谷歌等浏览器随意拖动文本域
比如<textarea style="resize:none;">
5 vertical-align 垂直居中
css vertical-align:baseline/top/middle/bottom/
图片 表单 文字对齐 可以通过vertical-align 控制图片和文字的垂直关系，默认的图片会和文字基线对齐
6 去除图片地测空表缝隙
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐，这样会造成一个问题，就是图片底侧会有一个空白缝隙
解决的方法
1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。<img src="media/1633.png" width="500" style="border: 1px dashed #ccc;" /> 1. 给img 添加 display：block; 转换为块级元素就不会存在问题了。<img src="media/sina1.png" width="500" style="border: 1px dashed #ccc;"/>
溢出文字隐藏：
white-space 设置或检索对象内文本显示的方式，
normal 默认处理方式
nowrap 强制在同一行内显示所有文本 知道文本结束或者遭遇br标签对象才换行
可以处理中文
text-overflow 文字溢出
text-overflow：clip/ellipsis clip不现实省略标记（...）而是简单的剪切 elipsis对对象内文本溢出显示省略标记（...）
注意一定要首先强制一行内显示 再次和overflow属性搭配使用
7-css精灵技术
当网页中的图像过多时，服务器就会频繁的接受和发送请求 大大降低了页面的加载速度 为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度出现了精灵技术
本质：有很多小的背景图合成的大图被称为精灵图
使用：css的background-image background-repeat background-position 属性进行背景定位，最关键的是使用background-position属性来定位
制作精灵图：小图合成大图
8-滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容多少，出现了css滑动门技术 从新的角度来构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容 可用性强 最常用的各种导航栏的滑动门
核心技术;利用css精灵和盒子padding撑开高度，以适应不同字数的导航栏
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
总结： 1. a 设置 背景左侧，padding撑开合适宽度。 2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。 3. 之所以a包含span就是因为 整个导航都是可以点击的。
9-BFC布局规范特性
（1）在bfc中盒子从顶端开始垂直地一个接一个地排列
（2）盒子垂直方向距离由margin决定 属于同一个BFC的两个相邻盒子margin会发生的重叠
（3）在BFC中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）
BFC的区域不会和浮动盒子产生交集 而是津贴浮动边缘
计算BFC的高度，自然会检测浮动或者定位的盒子高度
它是一个独立的渲染区域 只有block-level box参与 它规定了内部的block-level box如何布局 并且与这个区域外部毫不相干
Bfc用途：
（1）清除元素的浮动
只要把父级元素设为BFC就可以清理子元素的浮动了，最常用的父元素上设置overflow：hidden样式 ，对于ie6加上zoom：1就可以
主要用到计算BFc高度，自然会检测浮动或者定位到盒子高度
（2）解决外边距合并问题
盒子垂直方向的距离用到margin决定属于同一个BFC两个相邻盒子margin会发生重叠
属于同一个BFC的两个相邻的盒子margin会发生重叠 那么我们创建不属于同一个BFC 就不会发生margin重叠
（3）制作有车自适应盒子问题
普通流体元素BFC后，为了和浮动元素不产生任何交集 顺着浮动边缘形成自己封闭上下文
### BFC 总结 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
10-浏览器前缀
| 浏览器前缀 | 浏览器 | | -------- | -------------------------------------- | | -webkit- | Google Chrome, Safari, Android Browser | | -moz- | Firefox | | -o- | Opera | | -ms- | Internet Explorer, Edge | | -khtml- | Konqueror |
11-## CSS W3C 统一验证工具
http://validator.w3.org/unicorn/
12-
