排静态网页 初始化CSS样式代码

为什么要初始化CSS样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)

使用方法:

可以直接复制代码,存到项目的css中,排网页时引入即可

/*web app 全局样式*/
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, small, strike, strong, sub, sup, tt, 
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, 
legend, table, caption, tbody, tfoot, thead, tr, th, td,header,input,figure{
margin: 0; padding: 0;}

html{ 
	/* 禁用iPhone中Safari的字号自动调整 */
	-webkit-text-size-adjust: none;
	/*
	使用rem
    默认 1rem =16px   32px = ? rem; 
    font-size: 16px;  //1.原始的
    font-size: 10px;  //2.在1的基础上 10/16*100%  62.5%   1rem = 10px 
	font-size:62.5%; <=>  font-size: 10px;
    
	//再放大10倍,更准确,好计算
    font-size: 100px; //3.在2的基础上放大10倍 62.5%*10   =  625%  得到 1rem = 100px,
    把px 换成rem ,除以100就可以了。
	50px = 50 / 100 = 0.5rem
	100px = 1rem
	10px = 0.1rem
	*/
	/* 闪烁的问题 */
	/* font-size: 625%;使用js动态计算,这里可以省略,1rem = 100px,  把px 换成rem ,除以100就可以了。 */
	font-size: 62.5%;
}

body{
	font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
	/* 闪烁的问题 */
	/* font-size: 0.16rem;0.16rem 转为px, 100*0.16 = 16px */
	font-size: 1.6rem;
}

/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* 设置图片自适应调整 */
img {display:block;max-width: 100%; height: auto; width: auto\9; /* ie9以下 */ }

/*多媒体自适应*/
.video embed, .video object, .video iframe { width: 100%; height: auto; }

li { list-style: none; }

a { text-decoration: none; cursor: pointer;color: #555756; }
a:hover {text-decoration: none; }
a img { border: none; }
a > img { vertical-align: bottom; }

/*去掉 input 默认边框*/
input{outline:none;border:0;}

/*CSS3盒子模型*/
box-sizing:border-box;                                                                     
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
  • 10
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值