前端页面编写注意点、base.css

通栏：占一整行的盒子。
版心：页面的安全范围。

1、初始化页面
即设置全局页面标签的默认配置。
2、将页面上文字的字体大小，字体颜色设置在body中。

怎么设置一个通栏：
在body中直接放一个div，这个div有高，没有宽。
该div没有宽，默认情况下会继承父元素的宽。

/*
* @Author: payn
* @Date:   2018-11-22 09:34:47
* @Last Modified by:   payn
* @Last Modified time: 2018-11-22 18:30:00
*/
*{
    /* 设置所有标签内边距和外边距均为0 */
    margin:0;
    padding:0;
    box-sizing: border-box;   /*  当进行内边距填充时，块(盒子)不会变大。即css3 盒子模型 */
}
em,i{
    /* 使用了em,i也不现实斜体字 */
    font-style:normal;
}
li{
    /* 不显示列表数字。取消默认的列表风格。 */
    list-style:none;
}
img{
    /* img是行内块级元素(可以设置大小)。(后续的元素)居中显示 */
    border:0;
    vertical-align:middle;
}
button{
    /* button上的光标显示销售的样式 */
    cursor:pointer;
}
a{
    /* a链接的颜色默认为黑色。 */
    color:#050505;
    text-decoration:none;
}
a:hover{
    /* 鼠标悬停在a链接上的颜色为红色 */
    color:#c81623;
}
button,input{
    /* 设置字体的优先表 */
    font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
}
body{
    /* body的背景颜色，字体，文本颜色   \\5b8b\4f53宋体*/
    -webkit-font-smoothing:antialiased;    /* 设置字体抗锯齿，CSS3属性。 */
    background-color:#fff;
    font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
    color:#666;
}
.hide,.none{
    /* 设置隐藏的类 display:non不占据文本流中的位置。*/
    display:none;
}
/* 清除浮动 */
.clearfix:after{
    visibility:hidden;
    clear:both;
    display:block;
    content:".";
    height:0;
}.clearfix{
    *zoom:1;
}
/* 设置版心的宽度，不用设置高度。水平居中，垂直居中 */
/* 版心 */
.w {
    width: 1200px;
    margin: auto;
}

未添加注释版本：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;   /*  css3 盒子模型 */
}
em,i{
    font-style:normal;
}
li{
    list-style:none;
}
img{
    border:0;
    vertical-align:middle;
}
button{
    cursor:pointer;
}
a{
    color:#050505;
    text-decoration:none;
}
a:hover{
    color:#c81623;
}
button,input{
    font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
}
body{
    -webkit-font-smoothing:antialiased;
    background-color:#fff;
    font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;
    color:#666;
}
.hide,.none{
    display:none;
}
.clearfix:after{

    visibility:hidden;
    clear:both;
    display:block;
    content:".";
    height:0;
}.clearfix{
    *zoom:1;
}
/* 版心 */
.w {
    width: 1200px;
    margin: auto;
}