适用于所有页面的基础样式base.css

牟子真

2023-12-01

这玩意，俗称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状态的下划线样式处理