前面的培训其实讲了个大概。下面讲讲比较细节的东西。
一.padding 和 margin
理解的关键在于,padding就是内填充,margin只是外边距。给元素加了背景色,就可以查看出两者的差异了。
而在盒模型计算上,padding是要计算的,margin是不用计算的,因而背景图的平铺可以铺到padding上。
通常在使用这两者比较含糊的地方是:在没有边框或者背景色的情况下,padding和margin看不出有何差异。
因而,如果为了扩展,避免将来又要加上边框或者背景色,对于元素和元素之间存在间距,请使用margin。
还需要注意的一点是,内联元素的margin-top,margin-bottom通常不起作用,有时会使用padding来模拟margin。
普通文档流存在margin边距叠加的问题,这个请看w3cschool的介绍,分析很详细,我就不多说了,链接:http://www.w3school.com.cn/css/css_margin_collapsing.asp
所以,灵活使用才是关键。
二.css拼图
又称css sprites。就是把一些背景图标拼合到一张图上。使用的是css中的background-position定位技术。
好处:
减少对服务器端的图片请求数。
坏处:
- 图片比原先的大了
- 维护困难,牵一发容易动全身
- 可能需要多余的html标签来固定宽高
建议:
- 对使用的图标进行归类,公用的图标可以考虑放到一张图上,私有的页面级别的就单独放在一张图上
- 重复平铺的图片在拼图时需要注意,有些是不能拼的,只能单独成为一张图
- 适当拼图,一个页面的图标不一定都要放到一张图上,可以分为好几张图。避免图片过大导致页面渲染慢。
详细参考文章推荐:
前端观察的:css sprites 的一些技巧
彬go的:最全的css sprites教程
三.背景图和前景图的使用
背景图和前景图的区别是什么?
关键在于:背景图是修饰作用,可以没有,但是前景图必须要有,是为了数据的展示。裸奔页面时,必须体现出页面内容的完整性。
导航条通常是有背景修饰的,但是不会用img标签;而产品展示列表中,产品图片的展示必须使用img了,这是需要后台输出的。
思考这么一个问题,网站logo究竟使用图片img呢,还是不用img,只是使用链接?
如下示例:
1.使用前景图img展现logo
<h1><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" alt="百度搜索" /></a></h1>
2.logo只是修饰,使用背景图来展示
<h1><a href="#">百度</a></h1>
css:
h1 a { display:block; width:270px; height:129px; background:url('http://www.baidu.com/img/baidu_sylogo1.gif') no-repeat; overflow:hidden; text-indent:-999em;}
三.id和class的使用
id和class是对语义的具体补充。因此,无论使用id还是class来进行命名,都应当描述清楚模块的功能。
在实际使用上,由于id在同一页面具有唯一性,并且经常作为js的挂钩,个人以为,使用id来进行对模块的具体描述是最恰当的。
而class在描述上应当偏向于功能的描述,而不是位置,颜色等描述。class由于可以有多个(在交互上可以对应多个状态),因此,在描述上应当更宽泛,而不是太具体。具体这件事情可以交给id来做。
这样就不影响class的模块化了。
废话不多说,看一个html和css实例:
html:
<div id="fiance" class="list_item"> <h1>财经模块</h1> </div> <div id="entertainment" class="list_item"> <h1>娱乐模块</h1> </div> <div id="news" class="list_item"> <h1>新闻模块</h1> </div>
css:
.list_item { width:200px; height:140px; padding:10px; overflow:hidden; border-style:solid; border-width:2px; } .list_item h1 { font-size:16px; color:#333; padding-left:10px; } #finance { border-color:gray; } #entertainment { border-color:orange; } #news { border-color:blue; }
通常不是很建议在样式表中出现id。这样担心的原因在于,一个页面的前端可能并非一个人写的,而是多人维护的。你在html中定义的id可能会被他人改掉。然后样式就挂了。
所以,上面的示例我们也可以这么改:
html:
<div id="finance" class="finance list_item"> <h1>财经模块</h1> </div> <div id="entertainment" class="entertainment list_item"> <h1>娱乐模块</h1> </div> <div id="news" class="news list_item"> <h1>新闻模块</h1> </div>
css:
.list_item { width:200px; height:140px; padding:10px; overflow:hidden; border-style:solid; border-width:2px; } .list_item h1 { font-size:16px; color:#333; padding-left:10px; } .finance { border-color:gray; } .entertainment { border-color:orange; } .news { border-color:blue; }
解决方案更换了,但是会存在一定的问题。若是需要样式的覆盖和重定义,那就对选择器的权重有要求了。这里得格外注意下。
尽管我们这么建议,但是特例始终是存在的。所以,不必死磕。
例如:一个按钮,存在多个状态,在某些情况下,切换到对应的状态。
html:
<button type="button" id="add" class="abled">添加</button>
css:
#add { height:30px; width:100px; } /*分为可用和不可用状态*/ #add.abled { background:blue; cursor:pointer; } #add.disabled { background:#333; cursor:text; }
id和class配合,绝对爽歪了。
其他特例则是为了css权重问题,而使用了id。
四.css长命名和短命名
什么是长命名,什么是短命名,看例子,你就彻底明白了。
短命名示例:
html:
<div class="news"> <header class="hd"> <h1>新闻</h1> </header> <div class="bd"> <ul> <li><a href="#">新闻一</a></li> <li><a href="#">新闻二</a></li> <li><a href="#">新闻三</a></li> </ul> </div> <footer class="ft"><a href="#">更多</a></footer> </div>
css:
.news .hd {} .news .bd {} .news .ft {}
长命名示例:
<div class="news"> <header class="news_hd"> <h1>新闻</h1> </header> <div class="news_bd"> <ul> <li><a href="#">新闻一</a></li> <li><a href="#">新闻二</a></li> <li><a href="#">新闻三</a></li> </ul> </div> <footer class="news_ft"><a href="#">更多</a></footer> </div>
css:
.news_hd {} .news_bd {} .news_ft {}
那么,两者之间的差异在哪里?
长命名自然能够降低重名的可能性,短命名容易产生命名冲突。短命名可以扩展层级,长命名意味着层级只有一个。
因此,短命名适合模块化扩展,长命名适合不变化固定的模块。
看如下示例:
html:
<div class="news"> <header class="news_hd"> <h1>新闻</h1> </header> <div class="news_bd"> <ul> <li><a href="#">新闻一</a></li> <li><a href="#">新闻二</a></li> <li><a href="#">新闻三</a></li> </ul> </div> <footer class="news_ft"><a href="#">更多</a></footer> </div> <div class="fiance"> <header class="fiance_hd"> <h1>新闻</h1> </header> <div class="fiance_bd"> <ul> <li><a href="#">新闻一</a></li> <li><a href="#">新闻二</a></li> <li><a href="#">新闻三</a></li> </ul> </div> <footer class="fiance_ft"><a href="#">更多</a></footer> </div>
虽然是两个不同的模块,新闻和财经,但是结构,样式一致。长命名就哭吧,骚年。要不,就合并css样式。
css:
.news_hd,.fiance_hd {} .news_bd,.fiance_bd {} .news_ft,.fiance_ft{}
看看短命名如何处理这个问题:
html:
<div class="news list_item"> <header class="hd"> <h1>新闻</h1> </header> <div class="bd"> <ul> <li><a href="#">新闻一</a></li> <li><a href="#">新闻二</a></li> <li><a href="#">新闻三</a></li> </ul> </div> <footer class="ft"><a href="#">更多</a></footer> </div> <div class="fiance list_item"> <header class="hd"> <h1>新闻</h1> </header> <div class="bd"> <ul> <li><a href="#">新闻一</a></li> <li><a href="#">新闻二</a></li> <li><a href="#">新闻三</a></li> </ul> </div> <footer class="ft"><a href="#">更多</a></footer> </div>
css:
/*公用样式*/ .list_item {} .list_item .hd {} .list_item .bd {} .list_item .ft {} /*订制样式*/ .news .hd {} .news .bd {} .news .ft {} .fiance .hd {} .fiance .bd {} .fiance .ft {}
使用短命名,扩展性和可重用性大大提高了。爽吧。