css培训二
前面的培训其实讲了个大概。下面讲讲比较细节的东西。
一.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 {}
使用短命名，扩展性和可重用性大大提高了。爽吧。
