开发者学堂课程【移动 Web 前端开发：首页-baseCSS】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8401
首页-baseCSS
内容介绍
一、reset.css 重置样式
二、common.css 公用样式
在项目构件中通常在 css 里有两个部分样式：
reset.css 重置样式
common.css 公用样式
一、reset.css 重置样式
把浏览器样式重置，让其表现一致。
*,
: :before,
: :after{
//选中所有的元素，和伪元素，目的是把
margin 0
padding 0 清除掉。
针对移动端，让所有格子包括伪元素都从边框开始计算宽度，因为移动端使用的都是非固定像素布局，为了防止宽度溢出出现滚动条：
box-sizing: border-box;
针对移动端做兼容性处理：
-webkit-box-sizing: border-box;
//让属性在更低的版本浏览器里也支持，目的是做主流移动端浏览器兼容。
-webkit-tap-highlight-color: ..;
//点击高亮效果清除
高亮效果：比如移动端凤凰网，点击某个按钮链接出现阴影边框。
移动端特有的点击高亮效果：
写入：
<body>
<a href="javascript:;"></a>
</ body>
<style>
body{
margin: 0;padding: 0;
}
a{
width: 100px;
height: 100px;
display: block;l
}
</style>
在移动端加上：
<meta name="viewport" content="width=device-width,user-scalable=no，initial-scale=1.0, maximum-scale=1.0“/>
预览页面，点击a 点击会出现高亮效果，有些浏览器没有，说明是可以控制的，有的点击是灰色或者蓝色，其实就是点击颜色设置：
-webkit-tap-highlight-color: red;
这样点击就变成了红色。
有些网站不需要点击高亮的颜色，这时把 red 改为 transparent 就可以了，达到清除高亮效果的目的。
这是第一种样式。
二、common.css 公用样式
写入：
body{
font-size: 14px;
color: #333;
font-family: Microsoft Yahei
微软雅黑字体在移动端不常见的话加上常见字体：sans-serif
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
Input，textarea {
//这两个在电脑上应该会有边框或其他样式，这时候需要清除样式：
outline: none;
border: none;
resize：none；
清楚移动端输入框特有的样式，清除默认样式：
-webkit-appearance:none；
// appearance 表示表单原本的样子，这样就意味着原本样式不带任何样子，达到清楚默认样式的目的。
common.css 公用样式：
经常可能会用的工具类，工具样式：
比如:
.f_left{
float: left;
}
.f_right{
float: right;
}
.cleanfix : : before,
.clearfix: : after{
content: "";
display: block;
height: o;
line-height: 0;
visibility: hidden;
clear: both;
清除浮动组件或者常用类就写好了。在移动端可能还会用到其他一些，比如：
.m_l10 {
margin-left: 10px;
}
-m_r10{
margin-right: 10px;
}
