星狮创想深入css结构合理运用div和span

《星狮创想深入css结构合理运用div和span》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、星狮创想：深入CSS结构：合理运用div和span星狮创想成立于2009年，翔通动漫集团旗下远程教育品牌，凭借翔通10年手机动漫行业经验，成为国内最早的UI设计培训机构，凭借超前的艺术设计理念，倾力打造平面设计，网页设计，UI设计，交互式设计培训行业高端品牌，国内知名互联网企业总监授课，终身就业指导。特意上网搜索了一下，关于div，说法很多。　　把div看成是布局元素这种观点我想是最多的，类似有“用div代替table进行布局”、“实战CSS+DIV布局”等等等等，太多了，还有不少人延用Dreamweaver的定义，称div为层，按Photoshop的层的概念

2、来使用……有朋友干脆就直接称div和span为辅助布局元素。　　怎么说呢？虽然我很想说对div类似的这种认识是错误的，div不是一个布局元素，没有一个tag是用来布局的，但是我是对的吗？我也不知道。几乎所有人对div的宣传都是布局，不管是‘民间’的还是‘官方’的，但是如果我们找根源，中文中，div是一个结构化标签，是一个块级元素。好吧，我们首先看看div拥有的语义，division（分隔），按语义它的作用是将两个部分分隔开来。然后我们再回到w3去看看怎么定义div和span的：TheDIVandSPANelements,inconjunctionwiththe

3、idandclassattributes,offeragenericmechanismforaddingstructuretodocuments.Theseelementsdefinecontenttobeinline(SPAN)orblock-level(DIV)butimposenootherpresentationalidiomsonthecontent.　　注意到我上面加粗的一句话了吗？W3可没说是forlayout，而是forstructure，是结构！因为分隔从而产生（定义）一个代码结构。我想，结构和布局应该是两个概念吧。或许，因为table确实被

4、用于布局了，所以这种根深蒂固的布局思路又自然而然的转嫁到div上，我曾在很长一段时间里也是这么理解的。但是，现在我要说，这绝对是一个错误并且，这是极度严重的错误！！！这纯粹个人观点个人理解，自己取舍好了。　　为什么严重？理解的错误直接导致的就是使用的错误。因为如果按照这个思路，把div作为布局元素使用，那么我认为：　　你永远无法固定xhtml！永远陷在css的怪圈中！永远不会去思考和理解结构！永远擦不干净table烙下的痕迹！永远无法接近神（貌合神离的神哈，呵呵）……　　或许把div称为布局元素还是为了更好的推行标准，但是却将人们从一个错误带向了另一个错误。两

5、年前我刚接触标准时就在《重构之美》首篇中迷惑过关于改版的事情，虽然随着理解的深入好像有了突破，在我写下xhtml后不变动，然后通过css的技巧来完成新版面。比如像著名的csszengarden。但是很快我又有新的迷惑，一个人这样做好像没什么问题，团队呢？比如如果同样的内容，设计成两个版式，然后交给不同的两个人来写xhtml，会一样吗？就像如果把csszengarden的形式颠倒一下，基于同一份数据先做好100个设计稿，让100个人按照这个设计稿写100份xhtml，会一样吗？我想按照div布局模式，对于同样的版式，不同人不同的页面分析都会产生不同的xhtml，

6、更何况不同的版式呢？但是既然表现与结构无关，那么同样的内容不应该有2份以上的xhtml。不要小看这个问题，对于团队中前后台的有效分离与快速协同，这是关键！我在培训中提出一个观点：最理想的境界是前台闭着眼睛都能知道后台输出的是什么样的xhtml结构代码。那么问题出在哪里？div布局！尤其是在理解了h系列标签不合理之后，体会更深刻。　　上篇文章我提出的关于结构应当分为两种：语义结构和代码结构。理解了这两个结构之后，那么div的用处就比较明朗了，稍稍动动脑筋就能想到，用于组织代码结构。所以hx标签的问题我认为经典呢，不要说html了，即便对于xhtml，大部分的人关

7、心的仍是如何表现，小部分人关心语义结构，很少人去关心代码结构，似乎xml有了，xhtml就不需要代码结构了。但是从hx系列的问题可以看出并延伸知道W3可一直在关心代码结构，从1.0，1.1直到2.0，一直希望xhtml拥有xml般严谨的代码结构。说到这里再多看xhtml2.0的另一个变化，br不再被推荐，应该很好理解了，br的语义是产生一个截断（break），但实际作用是产生一个行，语义结构上仍不完美，所以使用line进行替代<line>thisisoneline</line>。同样br也无代码结构可言，如果我想提取第三行的数据如何操作

8、？所以很有可能类似br、hr这类标签都