移动端样式配置

最新推荐文章于 2022-10-23 12:34:44 发布

转载最新推荐文章于 2022-10-23 12:34:44 发布 · 635 阅读

移动开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种常见的CSS样式重置方法，并提供了一个简单的HTML页面框架搭建示例。通过对浏览器默认样式进行重置，确保了不同浏览器间的一致性表现；同时，通过定义基本的HTML结构和样式，为后续的网页开发奠定了良好的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* reset */
body,::after,
::before {
margin: 0;
padding: 0;
/*清除ios默认的点击时产生的高亮区块 rgba(0,0,0,0)*/
-webkit-tap-highlight-color: transparent;
tap-highlight-color:transparent;
/*定义盒子模型定义的宽度从边框计算*/
-webkit-box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
vertical-align: top;
}
a {
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: #818788;
}
input {
border:0;
outline: none;
resize: none;
/*清楚ios浏览器默认的样式*/
-webkit-appearance: none;
}

/* 框架搭建 */
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
font-family: "Microsoft YaHei" , "sans-serif";
font-size: 14px;
line-height: 1;
color: #333;
position: relative;
background: #f5f5f5;
}
/* 工具样式 */
.clearfix::after,
.clearfix::before{
clear: both;
content: '.';
height: 0;
line-height: 0;
visibility: hidden;
display: block;
}
/* 主体部分 */