css一般性

1. 总差那么几像素！line-height:100%;
2. 数据图片，产品图片用img
小图标，logo，修饰网站的图片 用背景
3.文字居中 line-height /text-align:center;
4. 边框写三角，透明度
<span style="width:0; height:0; border:4px solid transparent; display:inline-block; border-top:4px solid red;"></span>
5.不兼容IE
检查结构是否健康
检查宽度有没有设置
实在不行加个边框
彻底没救加个overflow:hidden;
杀手锏：hack
6.浮动起来宽不够 margin 负值
7.路径：
相对路径：相对于文件本身的位置
../ 返回上一级
img/ 进入到img文件夹内
绝对路径：文件完整的路径（不变的）
8.伪类选择器：
a:link{} 未访问过的链接样式
a:visited{} 已访问过的链接样式
a:hover{} 鼠标移入时显示样式（最常用）
a:active{} 鼠标点击时的样式
lvha 书写顺序
注意：IE6下只有a标签兼容
9.CSS文本单行省略样式：
white-space:nowrap; 文本不换行
overflow:hidden; 溢出：隐藏
text-overflow:ellipsis; 文本溢出：省略
多行省略：用js 或者后台截取

10.简写：
margin:100px 0 0 0; 上100 右0 下0 左0
margin:100px 5px 10px; 上100 左右5 下10
margin:100px 10px; 上下100 左右10
margin:100px; 四个方向 都是100
11.margin- bug
1. margin拖拽父级 子级元素加margin 父级也会跟着下来
解决方法：1.给父级加border
2. overflow:hidden;
3.用padding
2. margin塌陷 margin上下的值不能相加是重叠的
解决方法：1.只写一个方向的margin
2.用padding

12：清除浮动
.clearfix:after{ display:block; content:""; clear:both;}
.clearfix{ zoom:1; } 兼容IE6/7浏览器

13.图片被标签包着，图片下方与标签有几像素的距离，
解决方案：把图片变成块 display:block;
14.margin负值 ：
1.针对有宽度的对象 改变位置的！
2.针对没有宽度的对象 是 加宽的！

15.绝对定位：
position:absolute;
1.完全脱离文档流
2.参照物默认是body，如果父级有定位，那就是父级！
3.把元素变成块！

相对定位：
position:relative;
1.不脱离文档流
2.参照物是自己原来的位置！
3.不改变元素的类型！
固定定位：
1. 参照物是页面窗口
2. 脱离文档流
3. 元素变成块
只要！是定位！ 就必须！ 加坐标！
top/left/right/bottom
16.透明度：
opacity:0.5; 高级浏览器（0-1）
filter:alpha(opacity:50); 兼容IE8以下（0-100）

17.单选按钮：
<input type="radio" id="id" name="定义类名" />
<label for="id">男</label>
<input type="radio" name="定义类名" />
女

多选按钮：
<input type="checkbox" checked id="id" />
<label for="id">西红柿</label>

18.清除table单元格距离：
cellpadding="0"
cellspacing="0"

清除默认样式：
table{ width:100%; border-collapse:collapse;}
td,th{ padding:0; border:1px solid red;}

19.iframe框架标签：
<iframe src="网址" scrolling=“no” border=“0” />
scrolling=“no” 取消滚动条
border=“0” 清除border
20.a的锚点：
<a href="#zhejiushiai">爱情</a>
<p id="zhejiushiai"></p>

21.滑动门：
在什么时候用：在两边有圆角的按钮或者图标上，文字个数不固定的时候。
<a href="#">
<i class="l"></i>
文字
<i class="r"></i>
</a>
22.布局：
等高布局：
给父级加overflow:hidden;
给两个块分别加：
padding-bottom:2000px;
margin-bottom:-2000px;

左边固定，右边自适应：
用绝对定位：给左边固定宽的块加绝对定位
给右边的加margin-left:左边的宽度;

左右固定，中间自适应：同上。
23. box-shadow:10px 10px 10px red inset;
块阴影: X轴偏移量 Y轴偏移量 模糊距离 阴影颜色 内阴影；
text-shadow:10px 10px 10px red;
文字阴影: X轴偏移量 Y轴偏移量 模糊距离 阴影颜色；
24. 变形：
transform：rotate(30deg)旋转
translate(100px,100px)平移
skew(60deg);倾斜
scale(-1)；缩放
过渡：
transition:all 1s 1s;
全部样式 延迟时间 执行时间
linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速

25. 定义动画
@-webkit-keyframes animate1{
from{}
to{}
}

调用动画：-webkit-animation:animate1 1s infinite;
26.响应式布局：
媒体查询：
@media screen and (max-width:769px){
div{ width:590px; background:pink;}
}
27. 选择器优先级：范围越大优先级越低
!important; 无敌
* < 标签 < .class/a:link < #id < 行间

28.绝对居中：
1. 已知宽高的块
position:absolute;
top:50%;
left:50%;
margin-left:-宽/2
margin-top:-高/2

2.未知宽高的块居中
table /tanslate(-50%,-50%)

3. 做遮罩
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;

29.定义字体：

@font-face{font-family:"";src:url()}

iconfont,alimama,fontasome

30. 不规则字母数字强制换行：  FF没有很好办法只能滚动条，overflow:auto;

div: (IE浏览器）white-space:normal; word-break:break-all;

#wrap{white-space:normal; width:200px; }
 #wrap{word-break:break-all;width:200px;}
 <div id="wrap">ddd111111111111111111111111111111</div>

table: (IE浏览器)使用样式table-layout:fixed；

<style>
 .tb{table-layout:fixed}
 </style>
 <table class="tbl" width="80">
 <tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
  </table>

table2: (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

<style>
.tb{table-layout:fixed}
 </style>
 <table class="tb" width=80>
 <tr>
 <td width=25% nowrap>
 abcdefghigklmnopqrstuvwxyz 1234567890
 </td>
 <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
 </tr>
 </table>