css公共样式 ( css初始化)

:after,:before

*:after,*:before{
   box-sizing: border-box;
}

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

p

p {
    word-break: break-all;
}

word-break属性规定自动换行的处理方法

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

textarea

标签定义多行的文本输入控件。

textarea {
    resize: none;
}

resize 属性规定是否可由用户调整元素的尺寸。

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

.icon

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon详解

a

a {
    cursor: pointer;
    /*color: #1188dd;*/
    text-decoration: none;
    hide-focus: expression( this.hideFocus=true);
    outline: none;
}

hidefocus=“true” 超链接的信息取消点击的时候，出现的虚线边框
hide-focus: expression( this.hideFocus=true); 支持IE浏览器

input，textarea

修改指定的input框，textarea的placeholder样式
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

	input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
    font-size:12px;
    font-family:PingFangSC-Regular;
}
input:-moz-placeholder,textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999;
    font-size:12px;
    font-family:PingFangSC-Regular;
}
input::-moz-placeholder, textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color: #999;
    font-size:12px;
    font-family:PingFangSC-Regular;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
    font-size:12px;
    font-family:PingFangSC-Regular;
}

input::-ms-clear,input::-ms-reveal{
    display:none;
}

禁止双击选中文本

.db-select-none {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

溢出省略

.toe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

text-overflow 属性规定当文本溢出包含元素时发生的事情。

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本

white-space 属性设置如何处理元素内的空白。

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

换行

.wsw {
    word-wrap:break-word;
    white-space:pre-wrap;
}

white-space 见上一条
word-wrap 属性允许长单词或 URL 地址换行到下一行。

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。