码迷,mamicode.com
首页 > Web开发 > 详细

css初始化重置

时间:2017-07-13 16:03:25      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:ted   css   滚动条   ado   author   auto   hidden   cal   ber   

在网上找了很久,有结合自己做的

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

 

css初始化重置

标签:ted   css   滚动条   ado   author   auto   hidden   cal   ber   

原文地址:http://www.cnblogs.com/amang/p/7160307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!