css初始化重置

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

@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;
}
时间: 2024-08-18 09:22:41

css初始化重置的相关文章

第10天:CSS初始化操作

在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式.这样我们在写样式时,就不会有误差.常用的CSS标签初始化如下: @charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset

css初始化代码方案 ——转

为什么要初始化CSS? CSS初始化是指重设浏览器的样式(即reset.css).不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间. 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多

css扁平化博客学习总结(二)css样式重置

css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline:

CSS.04 -- 浮动float、overflow、定位position、CSS初始化

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

浏览器默认标签样式总结及css初始化程序

html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很是无奈.所以成手在写css样式时,一般都会在开头写一段初始化程序,来去掉这些默认样式,比如最简单的方法就是使用*{margin:0:padding:0:}.但是通常我们很少使用这种方法,因为通配符*的效率极低.那我们应该使用哪种方法呢,下面博主就来为大家介绍一些常用的方法. 一.浏览器默认样式总结 在介绍初始化程序之前,我们先了解一下都有那

自学html-four(css初始化及html语义标签 -> h标签 p标签 img标签 有序列表 无序列表 表格 超链接)

一.css初始化 现在我们来做一个简单的测试,测试步骤如下: 1.编写代码如下: 2.把改程序用不同的浏览器打开我们会发现同一份代码在不同的浏览器中的显示会有略微的差别: 360浏览器下显示效果图: 火狐浏览器下显示的效果图: 同一份代码在不同浏览器显示的效果存在差异的原因是:各浏览器对各元素的margin,border,font-size等的初始设置略有不同 解决方法:通过css强制让所有元素的属性值都一样 这里提供一段雅虎工程师css初始化代码,直接拷贝到css位置就可以了,body,div

css初始化

1 /*css 初始化 */ 2 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } 3 fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } 4 ul, ol { list-style:none; } 5

css reset重置样式有那么重要吗?

在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp

css初始化样例代码

/* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family: Verdana,