css样式初始化reset文件

  1. pc端

  2. 移动端

  3. 公共样式

1、pc端

/* normalize.css */

html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
} body {
margin:;
} article,
aside,
footer,
header,
nav,
section {
display: block;
} h1 {
font-size: 2em;
margin: 0.67em 0;
} figcaption,
figure,
main {
/* 1 */
display: block;
} figure {
margin: 1em 40px;
} hr {
box-sizing: content-box;
/* 1 */
height:;
/* 1 */
overflow: visible;
/* 2 */
} pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
} a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
} abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
} b,
strong {
font-weight: inherit;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
} dfn {
font-style: italic;
} mark {
background-color: #ff0;
color: #000;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height:;
position: relative;
vertical-align: baseline;
} sub {
bottom: -0.25em;
} sup {
top: -0.5em;
} audio,
video {
display: inline-block;
} audio:not([controls]) {
display: none;
height:;
} img {
border-style: none;
} svg:not(:root) {
overflow: hidden;
} button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin:;
/* 2 */
} button,
input {
/* 1 */
overflow: visible;
} button,
select {
/* 1 */
text-transform: none;
} button,
html [type="button"], /* 1 */ [type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding:;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding:;
/* 3 */
white-space: normal;
/* 1 */
} progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
} textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding:;
/* 2 */
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
} [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
} details, /* 1 */ menu {
display: block;
} summary {
display: list-item;
} canvas {
display: inline-block;
} template {
display: none;
} [hidden] {
display: none;
} /* reset */ html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin:;
padding:;
box-sizing: border-box;
}

2、移动端

/* normalize.css */

html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
} body {
margin:;
} article,
aside,
footer,
header,
nav,
section {
display: block;
} h1 {
font-size: 2em;
margin: 0.67em 0;
} figcaption,
figure,
main {
/* 1 */
display: block;
} figure {
margin: 1em 40px;
} hr {
box-sizing: content-box;
/* 1 */
height:;
/* 1 */
overflow: visible;
/* 2 */
} pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
} a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
} abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
} b,
strong {
font-weight: inherit;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
} dfn {
font-style: italic;
} mark {
background-color: #ff0;
color: #000;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height:;
position: relative;
vertical-align: baseline;
} sub {
bottom: -0.25em;
} sup {
top: -0.5em;
} audio,
video {
display: inline-block;
} audio:not([controls]) {
display: none;
height:;
} img {
border-style: none;
} svg:not(:root) {
overflow: hidden;
} button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin:;
/* 2 */
} button,
input {
/* 1 */
overflow: visible;
} button,
select {
/* 1 */
text-transform: none;
} button,
html [type="button"], /* 1 */ [type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding:;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding:;
/* 3 */
white-space: normal;
/* 1 */
} progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
} textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding:;
/* 2 */
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
} [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
} details, /* 1 */ menu {
display: block;
} summary {
display: list-item;
} canvas {
display: inline-block;
} template {
display: none;
} [hidden] {
display: none;
} /* reset */ html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin:;
padding:;
box-sizing: border-box;
} html,
body {
/* 禁止选中文本 */
-webkit-user-select: none;
user-select: none;
font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif
} /* 禁止长按链接与图片弹出菜单 */ a,
img {
-webkit-touch-callout: none;
} /*ios android去除自带阴影的样式*/ a,
input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} input[type="text"] {
-webkit-appearance: none;
}

3、公共样式

/* 禁止选中文本 */
.usn{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
/* 浮动 */
.fl { float: left; }
.fr { float: right; }
.cf { zoom:; }
.cf:after {
content:".";
display:block;
clear:both;
visibility:hidden;
height:;
overflow:hidden;
} /* 元素类型 */
.db { display: block; }
.dn { display: none; }
.di { display: inline }
.dib {display: inline-block;}
.transparent { opacity: 0 } /*文字排版、颜色*/
.f12 { font-size:12px }
.f14 { font-size:14px }
.f16 { font-size:16px }
.f18 { font-size:18px }
.f20 { font-size:20px }
.fb { font-weight:bold }
.fn { font-weight:normal }
.t2 { text-indent:2em }
.red,a.red { color:#cc0031 }
.darkblue,a.darkblue { color:#039 }
.gray,a.gray { color:#878787 }
.lh150 { line-height:150% }
.lh180 { line-height:180% }
.lh200 { line-height:200% }
.unl { text-decoration:underline; }
.no_unl { text-decoration:none; }
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.tj { text-align: justify; text-justify: inter-ideograph; }
.wn { /* 强制不换行 */
word-wrap:normal;
white-space:nowrap;
}
.wb { /* 强制换行 */
white-space:normal;
word-wrap:break-word;
word-break:break-all;
}
.wp { /* 保持空白序列*/
overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;
}
.wes { /* 多出部分用省略号表示 , 用于一行 */
overflow:hidden;
word-wrap:normal;
white-space:nowrap;
text-overflow:ellipsis;
}
.wes-2 { /* 适用于webkit内核和移动端 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}
.wes-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}
.wes-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
} /* 溢出样式 */
.ofh { overflow: hidden; }
.ofs {overflow: scroll; }
.ofa {overflow: auto; }
.ofv {overflow: visible; } /* 定位方式 */
.ps {position: static; }
.pr {position: relative;zoom:; }
.pa {position: absolute; }
.pf {position: fixed; } /* 垂直对齐方式 */
.vt {vertical-align: top; }
.vm {vertical-align: middle; }
.vb {vertical-align: bottom; } /* 鼠标样式 */
.csd {cursor: default; }
.csp {cursor: pointer; }
.csh {cursor: help; }
.csm {cursor: move; } /* flex布局 */
.df-sb {
display:flex;
align-items: center;
justify-content: space-between;
}
.df-sa {
display:flex;
align-items: center;
justify-content: space-around;
} /* 垂直居中 */
.df-c {
display: flex;
align-items: center;
justify-content: center;
}
.tb-c {
text-align:center;
display:table-cell;
vertical-align:middle;
}
.ts-c {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.ts-mc {
position: absolute;
left:;right:;
bottom:; top:;
margin: auto;
} /* 辅助 */
.mask-fixed-wrapper {
width: 100%;
height: 100%;
position: fixed;
left:;top:;
background: rgba(0, 0, 0, 0.65);
z-index:;
}
.bg-cover {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.bg-cover-all {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}

原文链接:https://segmentfault.com/a/1190000013041329?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly

样式初始化(copy)的更多相关文章

  1. PC端和移动APP端CSS样式初始化

    CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...

  2. css样式初始化

    不同的浏览器对有些标签的默认显示是不同的,对css样式初始化可以实现样式的统一,消除不同浏览器间页面显示的差异性... 一般初始化方式为:*{margin:0:padding:0:}

  3. 一天搞定CSS: 标签样式初始化(CSS reset)及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...

  4. pc端样式初始化

    pc端样式初始化: /* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/ ...

  5. CSS样式初始化代码

    CSS样式初始化代码 为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化 ...

  6. css样式初始化代码总结

    编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h ...

  7. css页面样式初始化

    为什么? 同一个样式,在各个浏览器的默认样式可能不同,所以需要统一初始化,同一个页面在不同浏览器能正常显示. @charset "utf-8"; /*css reset*/ bod ...

  8. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  9. CSS 样式初始化

    去除浏览器对html的附加样式,避免不同浏览器之间的样式差异,给前端开发提供统一的样式基础.附加样式: .clearfix - 清除浮动 .wordsBreak - 允许文本在任意位置的换行 .ell ...

随机推荐

  1. 利用Python进行数据处理1——学会使用NumPy

    一.学会使用ndarray 1.1什么是ndarray? ndarray是NumPy中的一种多维数组对象,他可以是一维的.二维的.甚至更多维次.当然创建更多维次的数组并不是他的优点所在,他的优点在于它 ...

  2. 安装Feflow遇取的问题

    http://www.feflowjs.org/zh-cn/docs/ 在安装 npm install -g feflow-cli 是遇到这要一个问题 i C:\Program Files (x86) ...

  3. vue打包后接口报错

    最近自己和朋友做了一个小的项目,用的是vue3.x版本,本地dev运行的时候接口什么的都是正常的,但是build打包后本地使用anywhere启动一个本地服务的时候发现接口报错405状态,发布到线上接 ...

  4. Measuring Text Difficulty Using Parse-Tree Frequency

    https://nlp.lab.arizona.edu/sites/nlp.lab.arizona.edu/files/Kauchak-Leroy-Hogue-JASIST-2017.pdf In p ...

  5. MATLAB实现二值化函数

    function  bc = binary_conversion(a)  %这是灰度值二值化转换函数,阈值为平均值j=imread(a);             %读取灰度图像   j=double ...

  6. basic knowledge

    ---恢复内容开始--- TCP/IP指的是利用IP通信时必须用到的协议群统称. 分层模型: 1.物理层:硬件. 2.数据链路层:网络接口层.当做NIC驱动程序. 3.网络层:互联网层.IP协议基于I ...

  7. android studio连接真机大概问题

    首先,确定手机Android的版本(最好用统一版本) 版本一样的话错误会少一点... 手机打开开发者选项(每个手机不同,百度可查) 开发者选项中打开USB调试 点击OK,可以进入Android mon ...

  8. vue页面绑定数据,渲染页面时会出现页面闪烁

    <style type="text/css"> [v-cloak] { display: none; } </style> <div id=" ...

  9. cin.ignore

    功能:函数用于输入流.它读入字符,直到已经读了num 个字符(默认为1)或是直到字符delim 被读入(默认为EOF).其调用形式为cin.ignore(n,终止字符)       原型:istrea ...

  10. response响应

    郭晨 软件151 1531610114 response1.response常用APIsetStatus:设置响应行当中的状态码setHeader:设置响应头信息getOutputStream:获得字 ...