狐七的个人博客

# 页面的基础样式base.css

这玩意，俗称base.css 几乎所有的页面，在搭建之前，都要用下面那个。BUT

/*还在用这个？过时了吧？*/
*{
  margin:0;
  padding:0;
}
1
2
3
4
5

一网打尽并不是最全的，最好的。还是要讲究需要什么用什么，小白知道怎么用就行了，而对于追求更高层次的而言，不仅要知其然，还要知其所以然。 什么文本域、什么a链接的默认下划线，通通都一边呆着去。我把这个base.css准备好，有利于下面的界面的开发。 之前总结过一次 ，但是在我新建一个工程的时候，在有些情况下，我有时候又会忘了如何去配置。所以还是总结在这个里面，使用起来更加的方便。 所以还是要先讲原理后上代码的：

  • 块元素
    • 关于边距问题
    • 关于字体的问题
    • 关于列表的原点问题
    • （可选）鼠标手势
    • （可选）宽高设置
  • 行内块元素
  • 行内元素
    • a标签
    • i标签
    • textarea标签
  • 清除浮动类
  • 版心——主体内容可视区
  • 通用配置——（随意搭配）
    • 浮动
    • 定位
    • 一些固定边距
    • 背景颜色
  • （可选）自定义表单设置
    • 自定义单选框/复选框设置
    • 自定义数值框设置
  • 配置完整版代码base.css

# 块元素

# 关于边距问题

<body>有8px的外边距

<p>有16px的外边距

<h1>~<h6>都有内外边距，有默认字体加粗

<ul><ol><li>标签就不用说了，前面还有间隙啊丑啊丑

所以要把这些块元素的间隙都要清除 margin:0;padding:0;

# 关于字体的问题

  1. 浏览器的默认字体大小是16px，字体为宋体,而不同的浏览器的文字样式是不一样的。现在基本上大多数页面的字体是14px，大多数为微软雅黑这种扁平化又常见的字体。
  2. 况且IE6（虽然现在很少会兼容IE6了）不认识奇数字号，所以为了便于显示，基本也都用偶数字号。
  3. font-family: "Microsoft Yahei",sans-serif，tahoma; 这样写会依次加载三个字体。而且写的时候要注意，中文字体一定要加引号，英文下可以不加引号，英文之间有空格的必须加引号。
  4. 为了避免文件编码（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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

这样，在页面中直接引入base.css就可以啦。 是不是很方便？

更新时间: 2021-02-25 00:05