css相关笔记

1.清楚浮动的方法：
（1）在浮动元素末尾添加一个空的标签例如
（2）父元素设置 overflow：hidden *zoom:1（兼容IE6）
（3）.clearfix:after {content:"."; display:block; height:0; visibility:hidden;clear:both; } .clearfix { *zoom:1; }

通过对比，我们不难发现，其实以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置
clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素
overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。

2. CSS设置内容超出部分隐藏起来

overflow: hidden;
text-overflow: ellipsis; 当文本溢出时是否显示省略标记

white-space: nowrap; 强制文本在一行内显示

多行文本的溢出情况：

display: -webkit-box;-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;(该方法适用于WebKit浏览器及移动端)

结合P伪元素after使用（但文字未超出行的情况下也会出现省略号,可结合js优化该方法）

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;

3.CSS去除手机自带的button/input样式

input, button{appearance:none;-moz-appearance:none; -webkit-appearance:none; }
4.消除被点击元素的外观变化，所谓的点击后高亮：

webkit-tap-highlight-color: rgba(255, 255, 255, 0);

5.觉接firefox下input button内文字垂直居中

input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{
border:none;padding:0;
}

6.一些全局CSS样式设置

*{margin:0;padding:0;}

img, fieldset, textarea{border:0;}

input, label, select, option, textarea, button, fieldset, legend{font:12px/20px "宋体", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;}

input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {border:none;padding:0;}

input[type="radio"], input[type="checkbox"]{ vertical-align:-2px; margin-right:5px;}

textarea{ resize:none;}

table{ border-collapse:collapse; border-spacing:0; font:13px/18px "宋体", Verdana, Simsun, Helvetica, Arial, sans-serif;}

table td{ word-wrap:break-word; word-break:break-all;}

ul, ol{list-style:none;}

em, q{font-style:normal;}

body{font:13px/26px "宋体", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif; color:#f5f9fc; background:#fff;}

::-ms-clear { display: none; }

::-ms-reveal { display: none; }

.left{float:left; display:inline;}

.right{float:right; display:inline;}

.hide{display:none;}

.clearfix:after{display:block; clear:both; content:""; visibility:hidden; height:0;}

.clearfix{zoom:1;}

.clear{ clear:both;}