css初始化重置
2021-06-23 22:03
标签:ted css 滚动条 ado author auto hidden cal ber 在网上找了很久,有结合自己做的 css初始化重置 标签:ted css 滚动条 ado author auto hidden cal ber 原文地址:http://www.cnblogs.com/amang/p/7160307.html@charset ‘UTF-8‘;
/*
document : css初始化 重复class类
Created on : 2017-07-13
Author :
Description:
css样式表的初始化,全局样式设置
*/
html,body,div,ul,ol,li,p,a,i,em,img,form,input,textarea,h1,h2,h3,h4,h5,h6,::before,::after {
margin: 0;
padding: 0;
-webkit-top-height-color: transparent;/* 点击高亮透明 */
-webkit-text-size-adjust:none; /* 阻止旋转屏幕时自动调整字体大小 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #000;
font: 12px/1.4 ‘Microsoft YaHei‘,Arial,sans-serif;
background-color: #fff;
overflow-x: hidden;
/* 解决上下拉动滚动条时卡顿,慢 */
-webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch;
overflow-scrolling: touch;
}
a {
text-decoration: none;
color: #000;
background-color: transparent;
}
ol,ul {
list-style-type: none;
}
img {
border: 0;
vertical-align: middle;
}
p {
word-wrap: break-word;
}
em {
font-style: normal;
}
input,button,select,textarea {
resize: none;/* 禁止textarea拉伸 */
outline: none;
-webkit-appearance: none;/* 解决iphone及ipad下输入框默认内阴影 */
line-height: normal;/* 解决placeholder在移动端偏上问题 */
-webkit-transform: translate3d(0,0,0);/* 解决低版本微信事件无法触发 */
font-family: inherit;
font-size: inherit;
line-height: inherit;
border: 1px solid #ccc;
padding: 1px;
}
input[type=text]:focus {
border: 1px solid #ccc;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
content: ‘‘;
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
/* 解决Input type = number 错乱问题 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* 针对于bootstap重置 */
a:focus,a:hover {
color: #000;
text-decoration: none;
}
/* 重复使用 */
.layout {
position: relative;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.w {
display: block;
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w33{
width: 33.333333%;
}
.w25{
width: 25%;
}
.h {
display: block;
height: 100%;
}
.wh {
display: block;
width: 100%;
height: 100%
}
ul.block { /* 解决ul没有高 */
overflow: hidden;
}
.omit { /* 单行省略 */
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
/* 多行省略 */
.more_omit {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示几行写几 */
}
.left {
float: left;
}
.right {
float: right;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* CSS样式小箭头 */
.arrow {
padding: 20px;
}
.arrow i {
display: inline-block;
width: 0;
height: 0;
border-width: 8px;
}
.arrow_top {
border-color: transparent transparent #000 transparent; /* 向上箭头 */
border-style: solid;
}
.arrow_right {
border-color: transparent transparent transparent #000; /* 向右箭头 */
border-style: solid;
}
.arrow_bottom {
border-color: #000 transparent transparent transparent; /* 向下箭头 */
border-style: solid;
}
.arrow_left {
border-color: transparent #000 transparent transparent; /* 向左箭头 */
border-style: solid;
}
/* 四周阴影 */
.box_shadow {
box-shadow: 0 0 10px #dedede;
border: 1px solid #dedede;
}
上一篇:SpringMVC工作原理