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;}