写css的一些小技巧

来源:互联网 发布:郑州网络布线 编辑:程序博客网 时间:2024/06/06 13:58


主要是一些开发中用到的小tips,记录下来不要忘记

1、在用ul做横向导航栏的时候会遇见左边出现莫名其妙的空白的现象

如图:

上面的样式

.header-navBox ul{  //padding: 0;}.header-navBox li{  list-style-type:none;  float:left;}
当然li里面是<a>标签,要想把左边的空白去掉,在ul上面设置padding:0;就行了,默认<ul>的padding是不为0的。

2,关于设置line-height


如上图,font-size=14px;要达到行距为10px   

则设置 line-height:24px;

这样的话,字体垂直居中,

多出来的10px平均分给上下两个方向,相当于设置了每行字的margin-top和margin-bottom为5px;上下两行之间的margin加起来为10px;

只是上图红色与紫色区域多出来5px

如果计算的时候不要忘记。

3,关于按钮

(1)、<div class="b"><a></a></div>

(2)、<a class="b"></a>

.b{

  text-decoration: none;

}

情况为2时点击过后下划线会失效


0 0
原创粉丝点击