2天驾驭DIV+CSS （基础篇）（转）

这是去年看到的一片文章，感觉在我的学习中，有不少的影响。于是把它分享给想很快了解css的兄弟们。

基础篇
[知识一] “DIV+CSS” 的叫法是不准确的
[知识二] “DIV+CSS” 将你引入两大误区
[知识三] 什么是W3C标准？
[基础一] CSS如何控制页面
[基础二] CSS选择器
[基础三] CSS选择器命名及常用命名
[基础四] 盒子模型
[基础五] 块状元素和内联元素

实战篇
[第一课] 实战小热身
[第二课] 浮动
[第三课] 清除浮动
[第四课] 导航条(上) | 导航条(下)
[大练习] 前四节课大练习
[第五课] 浮动布局之结构设计 | 浮动布局之表现设计
[第六课] 定位
[第七课] 定位应用
[第八课] CSS Hack

技巧篇
[单张图片按钮实例]
[首行文字两文字缩进]

 

DIV+CSS的叫法是不准确的



       在整个教程的最前面必须先给大家纠正一个错误，就是“DIV+CSS”！
“DIV+CSS”这种叫法其实是一种不准确的叫法，是国人给这种布局标准页面的方法起的名字，是对技术理解不够透彻导致的，而标准的叫法是什么呢？呵呵，没错，是xHTML+CSS！，为什么会叫xHTML+CSS等你学完后面的“知识二”和“知识三”后就明白了，现在讲一下下面这个问题：


为什么国人将这种布局标准页面的方法叫做DIV+CSS？

        因为第一个将这种技术引进中国的人，对这门技术理解不够透彻，单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法，认为过去布局页面用的是Table，称之为“Table+CSS”，而现在布局页面呢，用DIV，所以叫DIV+CSS。

        听起来也挺合理，岂不知这种叫法误导了绝大部分的网页开发者，认为这样布局出来的页面也就是标准页面，就是符合W3C标准的页面，更甚者走了极端，看到网站上用到Table，就会嘲笑页面做的不够标准，结果用不用Table成为了判定页面是否标准的关键点。还有另外一种极端，将页面中用到的标签全部换做DIV，那就更是大错特错了。

 

 

【基础二】 DIV+CSS将你引入误区




“DIV+CSS”叫法将网页制作者引入两大误区

【误区一】网页中用了Table，页面就不标准，甚至觉着用Table丢人，Table成为了判定页面是否标准的关键点。

【误区一】认为网页中的DIV标签用的越多越好，甚至有人将页面中所有的标签都替换为DIV，DIV的多少，决定页面标准的程度。

        为了能够避免大家进入误区，必须要了解“Table”和“DIV”这两个网页元素诞生的目的，首先Table诞生的目的是为了存储数据，而DIV诞生的目的就是为了架设页面结构，两者有不同的工作职能，当我们存储数据的时候用Table是最方便快捷的，比如W3Cfun.com的一个主题页面“浏览器大全”，
地址是：http://www.w3cfuns.com/portal.php?mod=topic&topicid=6，

        这个时候肯定用Table最合适了，而表格外面组成页面结构的部分当然用DIV了，这是由他们两个诞生的目的决定的，也是符合W3C标准的， 那么这个页面就是标准页面。

       既然是标准页面，标签各干各的活“各司其职”，Table就用来存储数据，怎么用Table就丢人了呢？怎么就不标准了呢？DIV就用来构架页面结构，怎么会用的越多越标准呢？归根结底就是“DIV+CSS”的叫法导致。

 

【基础三】什么是W3C？




      我们平时说的W3C，其实是World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟，W3C这个组织做什么的呢？很简单，就是出网页标准的。那么有W3C组织出的标准就被称为W3C标准，那么符合W3C标准的页面就是标准页面了，好，问题来了~

什么是W3C标准？

        【注意】下面对W3C标准的解释，需要理解一下，因为在很多Web前端开发工程师面试的时候会遇到这方面的问题，很多企业在面试一些Web前端技术人员的时候，认为如果连什么是W3C都不知道，那做出来的页面肯定就不能够符合W3C标准，所以要求大家留意下！

        W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML，与表现标准对应的代表语言是CSS，与动作标准对应的代表语言是JavaScript。

        当我们将一个成品的网页设计制作成一个静态页面的时候，就要符合前面两种标准，结构标准和表现标准，那么制作出来的页面就是标准页面，用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”！

        【总结】知识一、知识二、知识三是大家必须知道的，知道了这些无论去面试还是和其他人沟通，都会让对方感觉你这个人很专业，对技术理解很透彻！

         “你必须知道的知识”讲完了，后面我们就要讲“你必须掌握的基础”，内容不多，但是一定要细看，理解透彻了，这样对后面的“实战篇”才能够起到很好的促进作用，加油！同学们！

 

【基础一】CSS如何控制页面


本节主要讲解，两个内容：
第一：CSS如何控制页面样式，有几种样式；
第二：这些样式出现在同一个页面时的优先级。

        使用xHTML+CSS布局页面，其中有个很重要的特点就是结构与表现相分离，结构指xHTML页面代码，表现就是CSS代码了，如果把一个网页看成穿着衣服的人的话，人就是xHTML，是结构，而衣服呢就是CSS，是表现，现在出现的问题是，如何让CSS去控制页面？或者说，如何让衣服穿在人身上；不同的CSS就可以使页面出现不同的风格适用不同的网站，而不同的衣服，人穿上后就会体现出不同的职业。

第一：如何让CSS去控制HTML页面？
有4种样式(方式)，行内样式、内嵌样式、链接样式、导入样式


1）行内样式
      行内样式是4种样式中最直接最简单的一种，直接对HTML标签使用style=""，例如：

<p style="color:#F00; background:#CCC; font-size:12px;"></p>

 

虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。


2）内嵌样式
      内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>
<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
a{color:#FFF;}
img{float:left;}
#container{width:500px; height:350px; background:url(http://www.w3cfuns.com/static/image/cm/demo/2d121/w3cBg.jpg) no-repeat; position:relative; margin:0 auto;}
#container p{width:380px; height:40px; position:absolute; left:60px; bottom:60px; color:#fff; font-size:12px; line-height:18px; text-align:center; font-family:"微软雅黑", Verdana, Geneva, sans-serif;}
#reg{display:block; width:114px; height:27px; position:absolute; left:191px; bottom:28px;}
</style>
</head>
<body>
<div id="container">
<p>全国的Web前端开发工程师欢聚于<a href="http://www.w3cfuns.com/" target="_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区！”</p>
<a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>
</div>
</body>
</html>

     

复制代码

演示demo：demo1.html

效果如下：



内嵌样式，大家也许已经意识到，即使有公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。


3）链接样式
      链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了，如下：

<link type="text/css" rel="stylesheet" href="style.css" />

 




举个例子：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>
<link rel="stylesheet" type="text/css" href="http://www.w3cfuns.com/static/image/cm/demo/2d121/style.css"/>
</head>
<body>
    <div id="container">
        <p>全国的Web前端开发工程师欢聚于<a href="http://www.w3cfuns.com/" target="_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区！”</p>
        <a href="member.php?mod=register" target="_blank" id="reg"></a>
    </div>
</body>
</html>

     

演示demo：demo2.html

效果同demo1：


        这种样式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，只需要修改公共CSS文件就OK了，相当的方便，这才是我们xHTML+CSS制作页面提倡的样式。



4)导入样式
导入样式和链接样式比较相似，采用import样式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌样式。  具体导入样式和链接样式有什么区别，可以参看这篇文章《CSS:@import与link的具体区别》，不过我还是建议大家用链接样式！




第二：四种样式的优先级
      如果这上面的四种样式中的两种用于同一个页面后，就会出现优先级的问题，这里我就不再举例子来说明了，大家在下面自己证明一下下面的结论:

四种样式的优先级按照“就近原则”：行内样式 > 内嵌样式 > 链接样式 > 导入样式。

【基础二】CSS选择器



        上节课我们讲了一下CSS通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种样式(方式)行内样式、内嵌样式、链接样式、导入样式，大家通过这四种样式(方式)就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器最基本的有四种：标签选择器、ID选择器、类选择器、通用选择器。


【标签选择器】
      一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，比如，在style.css文件中对p标签样式的声明如下：

  1. p{
font-size:12px;
background:#900;
color:090;
}

     


        这么做，会使页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易!当然你也可以设置整个页面中所有的div的属性、a链接的属性、span的属性，这么做方便是方便，但是不够灵活，如果页面中除了某个p标签背景不是红色外，其他的都是红色，就不能用这种方法定义了。


【ID选择器】
     ID选择器在某一个HTML页面中只能使用一次，就像只有一个身份证 (ID)一样，不重复！在页面中使用ID选择器更具有针对性，如：

      先给某个HTML页面中的某个p标签起个ID，代码如下：

<p id="one">W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</p>
在CSS中定义ID为one的p标签的属性，就需要用到“#”，代码如下：

  1. #one{
font-size:12px;
background:#900;
color:090;
}

     


        这样页面中的某个p就会是CSS中定义的样式。针对“页面中除了某个p标签背景不是红色外，其他的都是红色的”情况，我们就可以用ID选择器单独定义那个背景不为红色的p标签，这样问题就解决了。


【类选择器】
这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢~呵呵，和ID选择器的用法类似，只不过把id换做class，如下：

  1. <p class="one">此处为p标签内的文字</p>

     

如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下：

  1. <div class="one">此处为DIV标签内的文字</div>

     


这样页面中凡是加上class="one"的标签，样式都是一样的了~
CSS定义的时候和ID选择器差不多，只不过把#换成.，如下：

  1. .one{
font-size:12px;
background:#900;
color:090;
}

     


补充：一个标签可以有多个类选择器的值，不同的值用空格分开，如：

  1. <div class="one yellow left">一个标签可以有多个类选择器的值</div>

     

这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用

  1. <div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>

     



【通用选择器】
到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”，就是“*”星号。

  1. *{此处为CSS代码}

     

       强大之处是因为他对整个网页中所有HTML标签进行样式定义，这种功能类似“标签选择器”，覆盖的对象更加广泛，是整个HTML的所有标签，功能是强大，但是这样反而限制了它的灵活性。

        对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端：

  1. *{margin:0; padding:0;}

     


        为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS 文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，用到哪些标签就定义哪些标签，如下:

  1. body,div,p,a,ul,li{margin:0; padding:0;}

     


如果还需要dl、dt、dd标签重置，那就在上面加上就可以了，如下:

  1. body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

     

用到哪些就写哪些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面。

OK！选择器的内容大家应该都明白了，如果不能完全理解也没有关系，到实战篇的时候使用一下就清楚了，但是这些选择器的格式应该记住，也是为后面实战做准备的，只有按照老师的要求，整个教程学下来才能达到相应的效果。



下面就继续讲解一下“选择器的集体声明”和“选择器的嵌套”

【选择器的集体声明】
        在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

  1. h1,h2,h3,h4,h5,h6{color:#900;}

     


还有像上面刚刚讲的标签重置，就是利用的选择器的集体声明：

  1. body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

     

再举个例子，无论什么样的选择器，“标签选择器”，“ID选择器”，“类选择器”，只要是选择器，只要有公共的CSS代码，就可以用“选择器的集体声明”，起到精简代码的作用，有一段代码如下： 

  1. #header{font-size:14px; background:#ccc;}
div{font-size:14px; width:960px;}
.blue{font-size:14px; color:#009;}
.h1{font-size:14px; font-weight:normal;}

     

        我们就可以将上面的代码进行精简，把公共的CSS代码用选择器的集体声明提取出来，有点类似小学的“提取公因式”似的，如下：

  1. #header,div,.blue,h1{font-size:14px;}
#header{background:#ccc;}
div{width:960px;}
.blue{color:#009;}
.h1{font-weight:normal;}

     

       这是选择器的集体声明的经典应用，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化CSS代码的一块，要记住！


【选择器的嵌套】
选择器也是可以嵌套的，如：

  1. #div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

     

       这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器，CSS代码不就少了嘛~同样也是CSS代码优化的一块。

        好，这节课主要讲解了四种CSS代码选择器、选择器的集体声明、选择器的嵌套三块知识，要掌握好，掌握牢固了，再强调一遍，这节也是为后面章节的实战做准备的，如果后面学习过程中对这节知识有遗忘，那就赶紧回来翻翻！下课！

【基础三】CSS选择器命名及常用命名



        规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义了两个div，一个id命名为“div1”，另外一个命名为“News”，肯定第二个比较易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效率。为了达到这种效果我们就要规范化命名（语义化命名）！

        说个题外话，规范化命名的代码，会显着你更加专业！

        关于CSS命名法，和其他的程序命名差不多，主要有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。看他们的名字挺不好理解的，不要被吓到了，其实很容易，不信的话继续往下看~



【骆驼命名法】
      说到骆驼大家肯定会想到它那明显的特征，背部的隆起，一高一低的，我们的命名也要这样一高一低，怎么才能这样，就用大小写字母呗~，大写的英文就相当于骆驼背部的凸起，小写的就是凹下去的地方了，但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下：

  1. #headerBlock

     

第一个单词（header）的第一个字母（h）用小写，第二个单词（block）的第一个字母用大写（B），如果第二个单词后面还有单词呢？那就是下面这种情况

  1. .navMenuRedButton

     

第一个单词（nav）的第一个字母（n）用小写，第二个单词（menu）的第一个字母用大写（M），第三个单词（red）的第一个字母也用大写（R），第四个单词（button）的第一个字母还是用大写（B），同样后面所有单词的首字母都要大写。



【帕斯卡命名法】
      这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下：

  1. #HeaderBlock

     

和骆驼命名法只有一点区别，就是所有单词的首字母都要大写，当然也包括第一个单词（header）的首字母（h）了，也要大写。

  1. .NavMenuRedButton

     

如果有多个，也是全部单词的首字母均要大写。

题外话，如果说“骆驼命名法”是单峰驼的话，那么“帕斯卡命名法”就是双峰驼了~



【匈牙利命名法】
匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如：

  1. #head_navigation

     

  1. .red_navMenuButton

     


        以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则“容易理解，方便协同工作”就OK了，或者说“即使不懂代码的人看了代码也知道这块起什么作用”，没有必要强调是哪种命名法，根据个人喜好使用就行。

        以下为页面模块的常用命名：
        头：header
        内容：content/container
        尾：footer
        导航：nav
        侧栏：sidebar
        栏目：column
        页面外围控制整体布局宽度：wrapper
        左右中：left right center
        登录条：loginbar
        标志：logo
        广告：banner
        页面主体：main
        热点：hot
        新闻：news
        下载：download
        子导航：subnav
        菜单：menu
        子菜单：submenu
        搜索：search
        友情链接：friendlink
        页脚：footer
        版权：copyright
        滚动：scroll
        小技巧：tips


        到这节课，都是CSS比较基础的知识，为了照顾没有一点基础的同学，从下节课开始，在“基础四”“基础五”将介绍CSS布局页面中的很重要的两个概念：
       
1）盒子模型       
2）内联元素VS块状元素

       强调：这两块内容要求大家一定要理解透彻，不然会对后面的实战练习有影响，比如做出来的页面错位，就是因为对这两块的内容理解不够导致的。

 

【基础四】盒子模型



        盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！

        什么是盒子模型？
        对于初学者来说，不容易理解，但是对于生活中的盒子大家应该熟悉，大到集装箱，小到铅笔盒，盒子模型你完全可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢?

        好！既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫 “content(内容)”，而盒子的盒子壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"，请看下面两图：





      OK~！这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图：



        我们的页面就是由许许多多的盒子组成的，但是现实生活中的盒子我们会忽略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的。

      怎么样，理解了没有？盒子模型就这么简单~，这节课就到这里，下课！

【基础五】块状元素和内联元素



        我们在布局页面的时候，会将HTML标签分成两种，块状元素和内联元素（我们平时用到的标签div和p就是块状元素，链接标签a就是内联元素）。它们是很重要的两个概念，既然说到概念就先看看块状元素和内联元素的定义，在定义中你要留意它们两个的不同之处。

注：这节课看似挺长，其实内容很少，通过举例子帮助大家更容易理解而已，不要被眼前的文字和代码吓到。


块状元素
        一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素
        内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。

做了个对比表，帮助大家理解。



对于上面的概念，我们用实例的方式给大家讲明白，如下

【要求】
ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2。

CSS代码如下：

  1. #div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}

     

HTML代码如下：

 

<div id="div1">
<div id="div2"></div>
</div>

 

 

为了方便初学者更好的学习，我把完整的代码发出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>W3Cfuns---“可容纳内联元素和其他块状元素”</title>
<style type="text/css">
<!--
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>

 

怎么样，是不是下面的效果：



        如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联元素和其他块状元素”颜色为白色。

CSS代码如下：

#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
a{color:#fff;}

 

HTML代码如下：

<div id="div1">
<div id="div2"></div>
<a href="#">可容纳内联元素和其他块状元素</a>
</div>

 

是不是下面的效果:



        到这里，我们可以看到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”，为什么要说一般呢，因为块状元素不只是用来做容器，有时还有其他用途，这方面的内容会在后面详细讲解，因为不属于本节知识，就不多说。

        好~！我们继续加条件，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块，代码如下

CSS代码如下：

#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff;}

 

HTML代码如下：

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<a href="#">可容纳内联元素和其他块状元素</a>
</div>

 

 

 

是不是下面这个效果：



       是不是和自己事先想象的不一样，本以为蓝色会处于绿色的右侧，可是却位于下侧，如果你再加几个div4，div5同样的他们还是继续位于前一个下面，垂直排列，这就是块状元素概念中说的“块状元素排斥其他元素与其位于同一行”说白了，就是块状元素比较霸道，谁都别想和他坐同一行，甭管你是和他有亲戚关系的块状元素还是毫无联系的内联元素，都不行，都到下面一行待着去，看看例子中，绿色方块和蓝色方块是不是各处同一行，内联元素a也别想和他处一行，但是事情是没有绝对的，块状元素不是不允许其他元素和他处一行嘛，不是比较霸道嘛，没关系，咱有办法，具体什么办法，我们后面会详细讲解，知识不属于本节内容，就也不多说了，大家留意后面的教程就可以了~

      到这里，我想大家对“块状元素”的概念已经比较清楚了，下面通过例子给大家继续解释“内联元素”的概念，当然还是继续加条件，加个什么条件呢，在a的后面再加一个内容为“Love CSS”的链接，所有链接的背景设置为淡橙色(#F93)

CSS代码如下：

  1. #div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;}

     

HTML代码如下：

  1. <div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<a href="#">可容纳内联元素和其他块状元素</a>
<a href="#">Love CSS</a>
</div>

     

效果是不是下面这个：


  
      两个链接a是不是处于同一行(不要忘记a是内联元素)，这就解释了概念上说的“内联元素允许其他内联元素与其位于同一行”，为什么不说“内联元素允许其他元素与其位于同一行”，因为其他元素包括两种元素，内联元素和块状元素，它如果和内联元素在一块那就肯定在一行了，如果和块状元素在一块，即使它同意，他后面的块状元素也不同意，块状元素会另起一行位于它的下一行。

      我们继续添加条件，现在大家给内联元素a在css中加上宽度和高度，比如width:100px;height:50px;，看看有什么变化

CSS代码

  1. #div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;width:100px;height:50px;}

     

    看到效果了没有，是不是没有任何变化呢，这就说明了概念中的内联元素的宽度(width)高度(height)不起作用，它的大小只随内部文本或者其他内联元素变化，具体证明算是给大家一个作业，自己来证明一下。


      如果要让定义好的宽度和高度对内联元素起作用，有什么办法没有？答案是：当然。因为事情没有绝对的在CSS上面也成立，因为CSS中有两种元素，内联元素和块状元素，但是宽度和高度只对块状元素起作用，内联元素不起作用，如果我们把内联元素转化成块状元素，他不就具有了块状元素的特性了嘛，当然宽度和高度也就起作用了，如果你能想到这个思路，证明你的大脑现在非常活跃哟，这时候我们只需要给相应的内联元素加上一个属性display:block就可以了，如下

  1. a{color:#fff; background:#F93;width:100px;height:50px; display:block;}

     

怎么样，起作用了吧，和下面的效果一样吗~

  

       为什么两个a不处于同一行了呢，那是因为这两个内联元素a都被转化成了块状元素，既然成功转化为块状元素，就应该具有块状元素最显著的一个特点，不允许其他元素与他同一行，所以这两个a垂直排列喽~

      那有没有办法让他们处于同一行？当然有啦，后面课程会告诉大家^_^

      好了，到这里，大家通过实例对内联元素的概念理解的也应该很透彻了，后面就列出所有的内联元素和块状元素，方便以后大家查阅，这里说的是“查阅”，不是让大家记住，常用的块状元素和内联元素，就那么几个，多练习练习自然而然就记住了，平时给大家做培训的时候更强调的是要理解，而不是刻意去记！硬是记下来的，持久性也不长过段时间就忘，在课堂我时常拿例子，通过合理的引导，大家就可以自己推理，自己总结，这样学习效果就非常理想！

常见的块状元素与内联元素去这个页面看看：点击进入

 

原文地址：
http://www.w3cfuns.com/portal.php?mod=topic&topicid=13

posted @ 2015-07-05 01:19  jinhuazhe2013  阅读(1131)  评论(0)  编辑  收藏  举报