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 地址内部进行换行。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值