移动端超级好用的reset.css(只做参考哦具体以你们实际项目需求为准)
html {
color: #333;
/*规定主色调,依据业务场景(非必须)*/
background: #F6F6F6;
/*规定主背景,依据业务场景(非必须)*/
overflow-y: auto;
/*如果有溢出自动形成滚动条*/
-webkit-text-size-adjust: 100%;
/*不想让iPhone横坚屏切换的时候调节文字*/
-ms-text-size-adjust: 100%;
}
html * { /*所有元素*/
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去除移动端开发点击事件灰色背景如a标签*/
}
body,html{
height: 100%;
}
article,
aside,
blockquote,
body,
button,
code,
dd,
details,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul {
margin:;
padding:;
}
input,
select,
textarea {
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing:;
}
fieldset,
img {
border: none;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight:;
}
ol,
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight:;
}
q:after,
q:before { /*在<q></q>标签之间的文字两头加上引号*/
content: '';
}
a{
text-decoration: none;
}
/*input*/
button {
border: none;
}
button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
-webkit-appearance: button; /*渲染成button的风格*/
text-transform: none;
outline: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999; /*输入框提示语的字体样式*/
}
input::-webkit-inner-spin-button {/*解决input的type="number"在部分手机端会出现一个小按钮*/
-webkit-appearance: none;/*去除系统默认appearance的样式,常用于IOS下移除原生样式*/
}
input::-webkit-outer-spin-button {/*解决input的type="number"在部分手机端会出现一个小按钮*/
-webkit-appearance: none;
}
textarea {
vertical-align: top;
}
button,
input {
line-height: normal;
}
select {
margin:;
outline:;
}
input.fixAKeyboard:focus,
textarea.fixAndroidKeyboard:focus {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
button,
input[type=button],
input[type=checkbox],
input[type=reset],
input[type=submit],
label {
cursor: pointer;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
input[type=submit] {
-webkit-user-modify: read-plaintext-only;
-moz-user-modify: read-plaintext-only;
-ms-user-modify: read-plaintext-only;
-o-user-modify: read-plaintext-only;
user-modify: read-plaintext-only;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
input[type='search'] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
/*flex box*/
.flex {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
-webkit-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.justify-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
*,
*:before,
*:after {
box-sizing: border-box; /*所有元素以border开始计算盒子大小*/
}
.clearfix:after,
.clearfix:before { /*清除浮动*/
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
百分比布局,也叫做流式布局;
清除移动端默认的点击高亮效果:-webkit-tap-highlight-color:transparent;
base.css:
*,::before,::after{
padding:0;
margin:0;
-webkit-box-sizing:border-box; //主流浏览器做兼容;
box-sizing:border-box;
}
input{
border:none;
outline:none;
-webkit-appearance;//清除移动端默认的表单样式;如内阴影效果;
}
布局时候搜索框包一个form可以实现小键盘的箭头变为搜索二字;
移动端超级好用的reset.css(只做参考哦具体以你们实际项目需求为准)的更多相关文章
- 移动端(处理边距样式)reset.css
移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...
- Reset CSS:只选对的,不选"贵"的
玉伯和正淳一起整理的一份 reset.css: /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gm ...
- 打造自己的reset.css
http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...
- 1.reset.css的设置
/* reset css */ *, ::before, ::after{ /*选择所有的标签 */ margin: 0; padding: 0; /*清除移动端默认的 点击高亮效果*/ -webki ...
- Reset.css和Normalize.css样式表初始化相关
(1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...
- HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- reset.css css重置公共样式
@charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...
随机推荐
- UVA - 10004 Bicoloring(判断二分图——交叉染色法 / 带权并查集)
d.给定一个图,判断是不是二分图. s.可以交叉染色,就是二分图:否则,不是. 另外,此题中的图是强连通图,即任意两点可达,从而dfs方法从一个点出发就能遍历整个图了. 如果不能保证从一个点出发可以遍 ...
- maven实战(6)-- pom.xml的编写
pom.xml中可以编写的东西确实挺多的,经常看到别人写的pom文件中出现了一些没见过plugin或properties等等,不知有何作用,其实很简单,只要参看maven的官方文档即可:http:// ...
- MySql必知必会内容导图
<MySQL必知必会>从介绍简单的数据检索开始,逐步深入一些复杂的内容,包括联结的使用.子查询.正则表达式和基于全文本的搜索.存储过程.游标.触发器.表约束,等等.通过重点突出的章节,条理 ...
- Code:zabbix 目录
ylbtech-Code:zabbix 目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://y ...
- bzoj2616
树形dp+笛卡尔树+单调栈 这道题跟树形dp有什么关系? 事实上,我们对矩形建立笛卡尔树,先找出最矮的矩形,向两边区间最矮的矩形连边,这样就构成了一棵二叉树,因为只有一个矮的区间会对高的区间造成影响, ...
- hdoj1166【线段树】
单点更新+区间求和 不多说,直接上渣code--- #include<cstdio> #include<iostream> #include<string.h> # ...
- python __builtins__ enumerate类 (21)
21.'enumerate', 用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. class enumerate(object ...
- 【UVA - 10474 】Where is the Marble?(排序)
Where is the Marble? Descriptions: Raju and Meena love to play with Marbles. They have got a lot of ...
- SQL SUM函数内使用CASE函数
- 实例 - 在这个表里进行查询: 查询出如下结果(统计每天的输赢次数): - 开始查询 - 首先创建测试表: CREATE TABLE info( date ), result ) ); 插入测试数 ...
- PostgreSQL - 修改默认端口号
升级PostgreSQL遇到的问题 之前将PostgreSQL从9.5升级到了10.3版本,安装时将端口设置成了5433,(默认是5432),后来发现在使用psql来restore db会发生语法错误 ...