这玩意，俗称base.css
几乎所有的页面，在搭建之前，都要用下面那个。BUT
/*还在用这个？过时了吧？*/
*{
margin:0;
padding:0;
}
一网打尽并不是最全的，最好的。还是要讲究需要什么用什么，小白知道怎么用就行了，而对于追求更高层次的而言，不仅要知其然，还要知其所以然。
什么文本域、什么a链接的默认下划线，通通都一边呆着去。我把这个base.css准备好，有利于下面的界面的开发。
之前总结过一次 ，但是在我新建一个工程的时候，在有些情况下，我有时候又会忘了如何去配置。所以还是总结在这个里面，使用起来更加的方便。
所以还是要先讲原理后上代码的：
【目录】
- 块元素
+ 关于边距问题
+ 关于字体的问题
+ 关于列表的原点问题
+ （可选）鼠标手势
+ （可选）宽高设置 - 行内块元素
- 行内元素
+ a标签
+ i标签
+ textarea标签 - 清除浮动类
- 版心——主体内容可视区
- 通用配置——（随意搭配）
+ 浮动
+ 定位
+ 一些固定边距
+ 背景颜色 - （可选）自定义表单设置
+ 自定义单选框/复选框设置
+ 自定义数值框设置 - 配置完整版代码base.css
块元素
关于边距问题
<body>有8px的外边距
<p>有16px的外边距
<h1>~<h6>都有内外边距，有默认字体加粗
<ul><ol><li>标签就不用说了，前面还有间隙啊丑啊丑
所以要把这些块元素的间隙都要清除
margin:0;padding:0;
关于字体的问题
- 浏览器的默认字体大小是16px，字体为宋体,而不同的浏览器的文字样式是不一样的。现在基本上大多数页面的字体是14px，大多数为微软雅黑这种扁平化又常见的字体。
- 况且IE6（虽然现在很少会兼容IE6了）不认识奇数字号，所以为了便于显示，基本也都用偶数字号。
- font-family: "Microsoft Yahei",sans-serif，tahoma; 这样写会依次加载三个字体。而且写的时候要注意，中文字体一定要加引号，英文下可以不加引号，英文之间有空格的必须加引号。
- 为了避免文件编码（GB2312,UTF-8）等不匹配时产生乱码的问题，XP系统不支持微软雅黑的中文等原因。我们也推荐使用css的unicode编码的字体。如：
宋体->\5B8B\4F53
微软雅黑->\5FAE\8F6F\96C5\9ED1
关于列表的原点问题
这个也是一个头疼的事，现在基本上都是用ul和li搭建，所以就提前把那些东西去掉。这些
list-style-type、list-style-position、list-style-position都不要所以写合写：
list-style:none;
关于表格边框问题
之前一直避免运用表格是因为表格有很多自己特有属性，导致css控制其样式非常困难。但是最近我需要大量的使用表格，用ul和li去做就比较心累。听说表格对于数据加载还是有其优势，所以我就冒险使用了表格。哈哈~~
不过后来发现，其实也很简单。主要就是边框的问题么，所以就有了合并边框：
border-collpase:collpase;
然后设置单元格之间的距离为0之后就可以为所欲为了哈哈
border-spacing:0;
其余的宽高什么的，都可以直接用css控制了，也很方便。
（可选）鼠标手势
我在写页面的时候，发现我写的文本自动变成了光标的形式，其实有的地方要有的地方不要，所以这里做了可选，如果不要就在这里配置，什么时候需要用别的再覆盖就可以。如果无所谓不设置也是可以的。
cursor: default;
（可选）宽高设置
有的时候如果要适配的话，要求html标签和body标签按照百分比计算。
有的时候需要rem布局的时候，还要考虑font-size的值。这个根据不同的布局进行配置。
html,body{ width: 100%; height: 100%; font-size: 100px!important; }
行内块元素
行内块元素有：
- 内外边距
margin: 0;padding: 0;- 有边框
border: 0 none;- 有蓝色轮廓线
outline-style: none;- 因为默认基线对齐有默认3px的距离。
vertical-align: bottom;
行内元素
a标签
a标签有自己默认的样式
- a标签的默认样式是蓝色的，且下面有一条下划线。
- a标签在点击active和visited的状态的时候也有下划线。
text-decoration文本的修饰 none 表示无修饰 blink 闪烁（一般不用） underline 下划线 line-through 贯穿线 overline 上划线color:#333;- a标签移动上去的时候会变颜色
a:hover{ color:#333; }
i标签
i标签是有语义的标签，是斜体，但是现在基本用来加载小图标。所以里面if要用到小的文字的时候就要去掉字体风格：
防止字体倾斜 normal italic oblique 后面两个是斜体，但是第三个基本上不使用，两者在web中都是一样的，但是在设计中是不一样的
font-style: normal;
textarea标签
表单默认都有很多的样式：
- 边框
border:none;- 轮廓线
outline: none;- 文本域可拖拽
resize: none;
清除浮动类
浮动常用，清除浮动也就常用，封装成一个类，直接加类会更加方便
.clearfix
版心 ——主要内容可视区
版心根据设计稿的不同设计，加上浏览器不同的分辨率，一般这个可以保证内容水平居中在页面上。注意的是一定要指定其宽度
.w
通用配置
我们其实有的时候需要一些通用配置，什么是通用配置，就是经常用的一些css属性，有的时候为了结构看上去很明确，就单独一个成类。可以设置的属性就可以跟随自己的实际情况来定，到时候只要加到标签的类里面就可以了。
可以举一个栗子：
<div class=".nav .p_r">
——<div class=".nav-in .p_a .clearfix">
———<i class=".f_l"></i><span class=".f_r"></span>
——</div>
</div>
上面的代码，nav是父盒子相对定位，nav-in是子盒子绝对定位（top和left就在类里面定位就可以了），里面的元素一个左浮动一个右浮动，外面的盒子再清除一下浮动。这样看上去，是不是结构清晰明了。：）
浮动
.f_l{float:left;}
.f_r{float:right;}
定位
p_a{position:absolute;}
p_r{position:relative;}
一些固定边距
m_b10{margin_bottom:10px;}
p_l10{padding_left:10px;}
背景颜色
bgc-blue{background-color:#137ac6;}
(可选)自定义表单设置
自定义单选框/复选框设置
这个可以自己选择单选框和复选框的设置，因为有的时候，一套页面风格比较同意，单选框不会随意变。
注意这里只针对input+label的方式去自定义——这个详见css中的自定义表单的文章
自定义数值框设置
因为input的type=number的数值框中的上下按钮，会有默认的样式，所以最好的办法就是隐藏，然后自己用div自己做一个上下按钮。
这个也在css中的自定义表单的文章会详细阐述。
下面来个完整版的base.css
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
/* 默认有边距，都要清除 */
margin: 0;
padding: 0;
/*字体设置*/
font-size: 14px;
font-family: "Microsoft Yahei",sans-serif;
color: #ccc;
/* 去掉列表的原点 */
list-style: none;
/* 默认鼠标 */
cursor: default;
}
/*可选*/
html,body{
width: 100%;
height: 100%;
font-size: 100px!important;
}
/*行内块元素*/
input,img{
margin: 0;
padding: 0;
border: 0 none;
outline-style: none;
vertical-align: bottom;
}
/*行内元素*/
a,a:active,a:visited{
/*下划线和颜色*/
text-decoration: none;
color: #ccc;
}
a:hover{
color:#333;
}
textarea{
/* 边框清零 */
border:none;
/* 轮廓线清零 */
outline: none;
/* 防止文本域被随意拖拽 */
resize: none;
}
i{
/*文字样式*/
font-style: normal;
}
table{
/*边框合并*/
border-collapse:collapse;
border-spacing:0;
}
/* 使用伪元素清除浮动 */
.clearfix::before,
.clearfix::after{
content:"";
height: 0;
line-height: 0;
display: block;
visibility: none;
clear: both;
}
.clearfix {
*zoom: 1;
}
/* 版心*/
.w{
width: 1883px;
margin: 0 auto;
}
/*可选*/
/*单选框和复选框的配置，一般是分开的*/
input[type="radio"],input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
outline: none;
display: none;
}
label{
display: inline-block;
cursor: pointer;
}
label input[type="radio"]+span,label input[type="checkbox"]+span{
width: 16px;
height: 16px;
display: inline-block;
background: url("../images/nocheck.png") no-repeat;
}
label input[type="radio"]:checked+span,label input[type="checkbox"]:checked+span{
background: url("../images/check.png") no-repeat;
}
label input[type="radio"]:checked~i,label input[type="checkbox"]:checked~i{
color: #38d6ff;
}
/*可选*/
/* 自定义数字框配置 */
input[type="number"]{
width: 76px;
height: 36px;
background-color: rgba(5,45,82,0.4);
border: 2px solid #ccc;
border-radius: 4px;
color: #fff;
font-size: 20px;
padding: 0 10px;
}
input[type="number"]::-webkit-inner-spin-button{
-webkit-appearance: none;
}
input[type="number"]+div{
width: 30px;
height: 40px;
padding-left: 2px;
cursor: pointer;
}
input[type="number"]+div > .count_add{
display: block;
width: 28px;
height: 19px;
background: url("../images/count_add.png") no-repeat;
background-size: contain;
margin-bottom: 2px;
}
input[type="number"]+div > .count_subtract{
display: block;
width: 28px;
height: 19px;
background: url("../images/count_subtract.png") no-repeat;
background-size: contain;
}
这样，在页面中直接引入base.css就可以啦。
是不是很方便？
@burning_韵七七
@version1.0 ——2018.01.17——创建文章【适用于所有页面的基础样式base.css】
@version1.1 ——2018.05.22——修改文章a的active和visited状态的下划线样式处理
网友评论