: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;
}
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 地址内部进行换行。 |