DIV+CSS 学习心得<1>:初步认识

[ 作者:笑傲江湖 发布于:2011年-2月-7日 6:32 星期一  分类:百 宝 箱 ]

  其实早就想研究一下DIV+CSS,因为从最初自己学习做网页开始,就一直是用TABLE+CSS方式,那会儿最早接触的是微软的Frontpage,记不清是1999年还是2000年,大概那会就是从它开始做自己的个人主页,用了一段时间之后,才转向Dreamweaver。不过还是继续在用Table表格的方式来布局页面,但页面样式是CSS方式来控制。当时初学那会儿并不知道有DIV这个么东西,就一直在用表格折腾页面,倒也觉得表格也挺好布局的,至少想到什么样子,PS里做好模板,然后DW里面去使用TABLE来弄出大框架,之后PS里切图分割,再到DW去用图片之类去填充框架,最后就是写好各部分的CSS样式表定义,我自己折腾页面的大致流程是这样,也就这么着用了好多年,因为我不是专门学这个,都是自己学的,没人教,也没看过什么关于做网页的书,就是当年为了学习Flash做动画,买过两本动画制作实例的书,做些简单的Flash动画,太复杂的多场景的,需要ActionScript的那种的研究不来,本身我对编程就一点兴趣没有,看到代码就头疼,当然,HTML代码除外,其他什么ASP,PHP代码看到就头晕,呵呵,不知道为什么,可能天生就不是编程搞开发的那块料。好了,就罗嗦这么多吧,下面开始自己学习DIV+CSS的一点心得,用博文记录一下,也希望对想学习的人有个帮助。
  先说说DIV吧,网上搜索说是division的简写,金山词霸上的解释:1. 分开; 分配2. 部门3. 界限4. 分歧, 分裂5. 除(法)6. 分组表决7. 分离;分切;划分;分隔8. 分享;分配;分发,分派;分担9. 划分物;分隔物,分割物,隔开的,栅栏隔板,隔墙10. 分界线;分界标志,分界记号11. 刻度,标度,分度。按照我自己的理解,DIV应该是第9个意思,作为网页里分割用的,暂且理解为块吧,有些人称之为盒子,不管咋样,你自己有个理解就好,我理解的就是一个块,网页中的一个块元素,可以用来布局页面框架,定位页面上的各种元素,文字、图片、动画什么的等等。
  经过Google之后得知,HTML的各个元素是有自己的显示属性的,显示属性有三种:Block、Inline、None,Block的意思就是元素以块的方式显示,这种显示方式的元素独占一行,如果没有定义宽度,那它的宽度就是页面当前的宽度,或者是它的父元素的最大宽度,它的前后各有一个换行,如果它上面有一个块或者其他元素,它要新换一行来显示自己,它之后的元素也会在它下面一行显示。我们熟知的DIV的显示属性默认就是这种Block方式。Inline是行内显示,有些元素默认就是这种显示方式,比如Span,比如,Span内的文字,有多少字,它的宽度就是多少,只占用它需要的宽度,但是它不是独占一行,Span后面你还可以接着再来一个Span,后一个Span内的内容会紧接着上一个之后显示,不会自动换行,除非遇到父元素宽度的限制,或者换行符。None就是不显示,有些HTML元素默认就是这种属性,是那些用来定义HTML特殊内容的,比如META和Style等标签,是不会显示在页面上的。当时看完这些内容,我第一个想知道的就是哪些HTML元素天生或者默认是Block方式显示,那些是Inline显示呢?嗯,我想你也有着想法,看下面吧。
  默认以Block方式显示的HTML元素:
<div><h1><p><ul><ol><dl><li><dt><dd><table><blockquote><pre><form>

  默认以Inline方式显示的HTML元素:
<span><a><strong><b><em><i><img><input><abbr><acronym><br>

  这样看来,我自己对DIV的理解稍微有一点点问题,也不算大问题,它确实是一个块,默认情况下,但是它的显示属性是可以定义的,如果是display:inline的话,那div换了一种显示方式,它的后面还可以继续有其他的元素显示。同样,默认是inline显示方式的元素,同样可以通过display:block来定义它作为一个块来显示。不是一成不变,根据自己的实际需要来决定吧,我想DIV+CSS的优势就体现在这里吧,很灵活,可控,按需配置。所以现在想想,即便说是DIV+CSS也做页面,其实你也可以用使用其他元素,并不一定非要用DIV这个元素,可用的HTML元素可是很多哦。
  弄明白了上面说的,我自己就大致已经清楚了怎么用DIV+CSS来给网页搭框架了,春节前,博客改版了一下(之前是TABLE+CSS的),就是边研究,边用DIV+CSS把博客模板从新布局了一下,基本上和以前的TABLE+CSS的框架一样,但是细节上改进了很多,毕竟DIV+CSS可控制的东西很多,只要你定义好了CSS,页面上的各种东西,你都可以用CSS来控制它的显示效果。对于后期维护和更新内容,无疑DIV+CSS有着更好的灵活性和可控性。在改版博客页面架构的时候,还是有很多CSS的属性定义和写法没搞明白,什么position,float啊等等,等我搞明白了再写出来吧。还有就是DIV+CSS这玩意浏览器的兼容性问题让人很头疼,同一个页面,各种浏览器显示的效果会有差别,当然,这牵扯到W3C的标准问题,最变态的浏览器当属Firefox,丫的是最W3C的,连HTML里注释行的要求都非常严格,如果你的注释方式不符合W3C标准的注释方式,那你的页面在Firefox里显示的就面目全非了,没事的话,可以自己试试看,我就不献丑了。
[Edit on 2011-2-7 22:24:12 By 笑傲江湖]

微信支付宝

标签: CSS DIV

评论0 引用0 浏览5022

说点什么:

正文内容:

 




图片博文
世界读书日 - 再说读书jQuery plugin : Adipoli 图片鼠标悬停特效