【死记硬背】CSS常用属性和注意事项
★ 超出省略号代替
{display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
需要多个属性配合
强制不换行 white-space:nowrap;
自动换行 word-wrap: break-word; word-break: normal;
强制英文单词断行 word-break:break-all;
文字两端对齐 text-align:justify
★ 对于不支持max min css属性的低版本浏览器的处理方法：
body {
font-family: microsoft Yahei;
min-width: 1200px;
background: #f5f5f5;
_width: expression(document.documentElement.clientWidth>1200?document.documentElement.clientWidth:1200);
}
★ CSS3 Transition详细研究并理解记住，挺有用的
RGBA和opacity的区别
opacity会使整个元素包括子元素透明，而RGBA仅仅是元素本事透明,子元素不透明
background:rgba(0,0,0,.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
我们需要留意的是StartColorStr和EndColorStr的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。
换算方法：x=alpha*255 将计算的结果x转换成十六进制即可
★ 关于 display：inline-block的使用注意的一个场景：
<div><a></a>……<a></a></div>
div设置宽度，a标签设置字体大小宽度和margin值，在前端demo中无任何问题，但是在thinkPHP框架项目下，a实际宽度多了一像素，导致布局错乱。
对比样式，发现完全一致。使用float:left后解决。
所以以后还是要慎用inline-block，毕竟低版本浏览器支持不全，并且使用block+float只是顺手的事情。
★ CSS字体设置
font简写：
这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。
可以按顺序设置如下属性：
- font-style 字体样式 [normal(正常) | italic(斜体) | oblique(倾斜)]
- font-variant 字体变化[normal(正常) | small-caps(小体大写字母)]
- font-weight 字体粗细[normal(正常) | bold(粗体) | bolder(更粗) | lighter(更细) | 100-900(400:normal,700:bold) 前面两个都支持，后面三个看浏览器了]
- font-size/line-height 字体大小/行间距[%,px,em,rem]
- font-family 字体族["具体的字体",通常字体(可理解为字体类型,字体系列)] 详情点击css字体系列
可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
★display[block/none]/visibility[hidden/visible]区别
display隐藏后，元素不可见，并且不再占据空间，其他dom有可能会占据他的空间
visibility隐藏后，元素不可见，但是仍然占据空间，其他dom时不会占据他的空间的
★ css3旋转动画
.my-case a span{
-webkit-transition: -webkit-transform 0.3s;
-ms-transition: -ms-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
}
.my-case a:hover span{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
只写下面这个是不可以的，必须有上面的那个才可以动起来
★ 关于css字体大小单位的认识
常用的单位有px em rem ……（其他的有空在研究）
px是像素，是长度单位。经常被用来设置字体大小
em是倍数单位，相对于父容器字体大小的倍数
如：<div><a></a><div>
div设置（或继承自他的父容器）的字体大小是10px，那么在a上设置字体大小为2em，就是20px
rem也是倍数单位，相对于根元素<html>的字体大小的倍数。
如：<html><div><a></a></div></html>
html设置为10px的话，div和a都设置为2rem，则他们字体都是20px。
如果这是设置div为2rem（即20px），a设置为2em和2rem，大小分别是40px和20px
另外：
① rem的作用，主要是用来统一修改整体页面字体大小用的。也简化了设置字体大小的计算过程，不然一级一级的父容器向上找字体大小值也挺麻烦的。
如果用px的话是无法通过修改一个地方就达到修改整体字体大小的作用。如果用em的话，一级一级的父容器会导致很复杂。
② em，rem也可以被用来设置text-indent，margin，padding，line-height等。这个时候em依据的是当前设置对象的字体的大小。而不是它的容器的字体大小
举例：<html><div><a>一二三四五六七八九十</a></div></html>
html{font-size:20px}div{font-size:20px} a{display:block;font-size:10px;text-indent:2em;line-height:1em;margin-right：2rem}
此时text-indent：2em为20px，line-height:1em为10px，margin-right:2rem为40px
③ rem不支持ie8，em支持。考虑兼容ie8的话一般是这样设置的{font-size：20px;font-size:2rem} 有点麻烦。
可以考虑使用兼容ie的两个方法（手写html法和js检测法，以后有空写），然后写单独的ie兼容样式进去
④。为了物尽其用，正确发挥rem和em的作用，在以后设置字体的时候，如果不是特殊需求，推荐使用px，如果有响应式需求，首先选择rem，但是设置缩进内边距行间距的时候推荐使用em。这样他们会随着实际字体大小的改变而改变，如果使用rem和px的话，这些边距行间距不会随着字体大小改变而改变【当然实际应用中，需求极其复杂，真正掌握知识，才能灵活应用】
使用rem时，如果不去做类似下面的操作，那么它和用px没有任何功能上的区别，都是写死的固定的单位，可以看做一个（ie8不支持）的（px的代号）单位。
html {
font-size: 62.5%;
}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important;
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 125%!important;
}
}
【如上面代码，用rem就是为了方便的统一设置字体大小用的，不然和px有何区别？徒增ie8不支持的烦恼罢了】
所以：如果不是和字大小相关太密切，需要随着字体大小改变而改变的，不推荐使用em和rem，直接用px，然后每个对应的模块写自己的响应式css代码就好了
@media (min-width: 768px) {
/*成功案例*/
.xh-suc{
padding: 2rem;
}
}
@media (min-width: 992px) {
/*成功案例*/
.xh-suc{
padding: 3rem;
}
}
在上面这种情况中，还不如用px呢。横竖你都要重设大小，这样反而不用考虑ie8的兼容情况。不然用em也行啊
两篇文章：
http://www.w3cways.com/1713.html
http://www.520ued.com/article/53e98eafbb16a74c41b5de77
★ 兼容低版本ie的集中方法
【本地项目在“D:\MY_WEB_DEMO\MyFrontFrame\JS-Plugin\fuckIE 对兼容IE(各版本)的研究成果”文件夹中】
1、参考360导航，360搜索网站的做法：
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="w3c"><!--<![endif]-->
然后css中这样写：
#head{}
.ie7 #head,.ie6 #head{} //这里写在所有对应样式的后面，看起来不会太乱的
好处：只加载一个样式。
缺点：每个页面都要这样写开头，不方便。
2、和上面的那个一样，只不过通过js自动完成
我知道的有一个叫modernizr.js的可以做到（简单看了一下，这货不是干这个用的？那就考虑自己写一个js插件来实现吧）
【上面说的无法实现，自己写也不行，js无法操作html以外部分，只能通过后端部分实现（但前端开发时还是要自己写，而且写完给后端还要删掉？so此路不通），或者给html添加不同class方法来间接实现】
好处：只加载一个样式。且不用每个页面都这么写开头
缺点：多了一个js占用资源
3、通过 条件注释法 实现
<!--[if IE 8 ]><link href=“ie8.css”><![endif]-->
<!--[if IE 7 ]><link href=“ie7.css”><![endif]-->
<!--[if IE 6 ]><link href=“ie6.css”><![endif]-->
需要多加载额外样式，开发中，需要写多个css文件，每个对应的html文件都要有这个引用，每个对应的兼容css文件都要重新写，即便代码兼容方案相同
4、通过 类内属性前缀法 实现
|
hack
|
写法
|
实例
|
IE6(S)
|
IE6(Q)
|
IE7(S)
|
IE7(Q)
|
IE8(S)
|
IE8(Q)
|
IE9(S)
|
IE9(Q)
|
IE10(S)
|
IE10(Q)
|
|
*
|
*color
|
青色
|
Y
|
Y
|
Y
|
Y
|
N
|
Y
|
N
|
Y
|
N
|
Y
|
|
+
|
+color
|
绿色
|
Y
|
Y
|
Y
|
Y
|
N
|
Y
|
N
|
Y
|
N
|
Y
|
|
-
|
-color
|
黄色
|
Y
|
Y
|
N
|
N
|
N
|
N
|
N
|
N
|
N
|
N
|
|
_
|
_color
|
蓝色
|
Y
|
Y
|
N
|
Y
|
N
|
Y
|
N
|
Y
|
N
|
N
|
|
#
|
#color
|
紫色
|
Y
|
Y
|
Y
|
Y
|
N
|
Y
|
N
|
Y
|
N
|
Y
|
|
\0
|
color:red\0
|
红色
|
N
|
N
|
N
|
N
|
Y
|
N
|
Y
|
N
|
Y
|
N
|
|
\9\0
|
color:red\9\0
|
粉色
|
N
|
N
|
N
|
N
|
N
|
N
|
Y
|
N
|
Y
|
N
|
|
!important
|
color:blue !important;color:green;
|
棕色
|
N
|
N
|
Y
|
N
|
Y
|
N
|
Y
|
N
|
Y
|
Y
|
在main.css中这样写： *margin{} _margin{}
纯css兼容法，但不推荐，写起来太麻烦。
3、4这两点可以参考百度百科css hack词条。
★select美化
重点：-webkit-appearance:none;appearance:none;
<div class="select" style="margin-top:0px;outline:none;border:1px solid #BBBBBB;border-radius:4px;position:relative;">
<select id="orderTimeDataSel" class="text" style="height:40px;-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:0px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;color:#333333;border-radius:4px;">
<option>--预约日期--</option>
</select>
</div>
★如果使用css不用js定义一个正方形div
1、使用css 设置width height 都为相同的像素值
但是如果不能用像素值来定义，只能使用百分比定义的时候。是不可以使用例如{width:30%;height:30%}来定义的。除非它处于一个正方形容器中。但是一般情况下都是在body下的，然而大部分屏幕的宽高是不同的。
那么一个办法是只定义宽度，然后在这个div中放一个正方形的完全透明的图片，越小越好，然后让这个图片{width:100%;height:auto}，这个时候设置器父容器{overflow:hidden;}即可保证此div为方的。
其他网友的方案：
http://www.cocoachina.com/webapp/20150807/12940.html
css3的vw vh单位不错，在移动端应该都兼容吧
★关于css样式的继承问题，或者说css的组件化问题
我一直纠结的一个问题就是css如何的组件化。来配合已经比较成熟的js组件化和本来就没有问题的dom组件化(不就是嵌套吗，其实web组件主要是css和js的组件化)
css组件化，说白了就是样式复用。
而样式服用，天生就会出现容易被干扰的情况。
比如
.redList .list{} .redList .list a{}
.redList .redList-list{} .redList .redList-list a{}
上面两个是比较成熟的两种书写方式：
第一种方式容易被样式干扰：对应的那个dom会继承.list{}然后再被.redList .list{}重写。团队合作沟通不好容易出问题。合并页面时还需要调整这些东西。
第二种看似没有问题，amui也推崇这种写法，但是写起来太麻烦了。如果是相同的组件需要复用但是又不一样。比如：我写了一个这样的dom结构：
<ul class="redList"><li class="redList-list"></li><li class="redList-list"></li><li class="redList-list"></li></ul>
如果我需要一个相同的blueList不愿意手写了，因为上面那个dom结构及其复杂，手写纯属浪费时间。那么我直接复制就好了。但是就会遇到这样的问题。
那就是每一个子项目我都需要修改对应的class为blueList-*。这是很烦的。
所以我们可以使用这样的办法：
那就是 .commonList .list {} 或者 .commonList c-list{}都行，后者保证不会被样式中不小心出现的.list干扰。
然后通过添加额外的class .redList 和 .blueList来重写不同的部分。
这样既满足了复制dom结构是时不需要修改子项目的需求，也满足个性化定制的需求。大部分的UI框架也是这么做的。
★line-height不带单位
主要问题在于继承。子元素会默认继承父元素的行高。
如果在父元素中设置了字体和行高。
子元素只设置了字体，没有设置行高。使用具体的单位值（px/em）的话，那所有的子元素的行高就是一样的固定的。可能会出问题。
不带单位的话，子元素只继承这个倍数，然后根据自己的字体大小进行计算。这样就是一个动态的行高。
这里要说的是，如果你用的是百分比，仍然是先根据父元素字体的大小计算出结果，然后一路继承下去的。所以这个不带单位在很多时候很有必要。
★IE8不支持rgba()
今天遇到了一个问题，要在一个页面中设置一个半透明的白色div。这个貌似不是难题，只需要给这个div设置如下的属性即可：
background: rgba(255,255,255,.1);
但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。
rgba的含义，r代表red，g代表green，b代表blue，红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba（255，255，255，0.1）就是透明度为0.1的白色。在现代浏览器中是支持rgba的。但是在ie8等古董级浏览器中是不支持的rgba的，ie8只能勉强支持rgb()函数（即去掉了透明度，只能表示颜色）。
所以在ie8中设置半透明就要费点脑子了。从大神那里得知可以使用ie的filter来解决这个问题，css代码如下：
<span style="white-space:pre"></span>
<style>
background: rgba(255,255,255,.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
</style>
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
大家注意，这个颜色“#19ffffff”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：
| rgba和ie下filter数值转换 | |
| 0.1 | 19 |
| 0.2 | 33 |
| 0.3 | 4C |
| 0.4 | 66 |
| 0.5 | 7F |
| 0.6 | 99 |
| 0.7 | B2 |
| 0.8 | C8 |
| 0.9 | E5 |
|
直接取整计算的，没有进位直接舍去 alpha*255再转成16进制即可 |
|
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；都是白色。
到这里，rgba的用法就可以兼容IE8了。
持续增加中……
