页面小细节

个人习惯

1、清除浮动：overflow：hidden
2、少用定位
3、display:inline-block ; 后面跟着vertical-align: top;
4、少用行内块标签，浮动好一些
ps：行内块标签自带的间隙以及换行带来的间隙，造成的类似margin的效果很麻烦
5、a标签，span标签都是行内标签，一开始就设置为行内块标签
ps：行内块标签制造出来的间隙在界面效果上也许是可以利用的
6、准备一个reset.css文件，用于重置样式
7、background-image 后面跟上 background-size: 100% 100%;
8、写css样式时带上过渡属性
9、记好各种布局的格式
10、HTML写完再写CSS
11、注意获取方式的时效性
ps：函数内部获取标签不用有实效性的，尤其是涉及循环和删除
12、善用单位：vh

标签细节

不同类型的标签哪怕字体样式一样，带来的效果也是不同的
常用字体样式举例
PS：谷歌最新版浏览器测量效果
注意：无论哪种标签，间隙都一样，除了块级标签的宽度问题，所以这里拿行内标签举例

font-size:12px;

来看看效果：

测量的结果就是：文字和边框本身的间距就是上3px，下2px，左右没有
自身宽高：24 x 16

font-size:14px;

来看看效果：

测量的结果就是：文字和边框本身的间距就是上4px，下3px，左右没有
自身宽高：28 x 19

font-size:16px;

测量的结果就是：文字和边框本身的间距就是上4px，下3px，左右没有
自身宽高：32 x 21

标签换行带来的间隙

行内标签和行内块标签都是5px

换行带来的上下间距

1、< br >换行

< br >换行不会造成标签本身上下的间距，除了标签自带的间距
多个< br >标签带来的效果就是
行内标签：
font-size:12px;
3px + < br >标签个数 - 1 x 21px；
font-size:14px;
< br >标签个数 - 1 x 21px；
font-size:16px;
-3px + < br >标签个数 - 1 x 21px；
行内块标签：
font-size:12px;
3px + < br >标签个数 - 1 x 21px；
font-size:14px;
1px + < br >标签个数 - 1 x 21px；
font-size:16px;
< br >标签个数 - 1 x 21px；

当然，块级标签自带换行效果，不需要< br >标签，同样，标签之间也不会带来间距，除了标签自带的

若是加上了< br >标签，上下间距为21px，当然，这是一个< br >带来的，两个就是42px；

2、由于空间位置不够被挤下来了

注意，这些现象并不是自身margin和padding带来的

行内标签会造成一种甚是奇葩的效果：

行内块标签就正常多了

相对于以上两个块级标签就是最正常的了

行内标签都有一个margin-top：1px；的效果，然后再加上自带的文字与标签间的间隙。

可以明显看到的是，内联标签在换行的拐角与没有被挤下去的标签带一个margin-right：5px的效果。
同时，它只有第一个标签会有一个margin-top：1px；的效果。

line-height间距值计算

根据以上的例子，我们可以知道，标签的高度都是奇数，那么有一个麻烦的地方在于，若line-height的值是一个偶数该怎么计算？

来看三种情况：



这个属性是最脑壳疼的。

当分配不均时，上面会多1px，当然我说的是相对文字本身而言。最好没有border。

为什么要注意标签细节？

便于我们布局时设置margin和padding
正常情况我们也不会写多个< br >来拉开换行的间距
通常我们都是直接使用margin或者padding来拉开间距
最好少用行内标签和行内快标签