理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课
本节课时长14分17秒，下载文件11.7兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
在网页设计时，能否控制好各个模块在页面中的位置是非常关键的。在前面的课程中，已经对CSS的基本使用有了一定的了解。本课在此基础上对CSS定位作详细的介绍，并介绍重要的div标记，讲解利用CSS + div对页面元素进行定位的方法，并分析CSS排版中的盒子模型以及二维三维定位等。
1．div标记与span标记
在使用CSS排版的页面中， div 与 span 是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。我们在这里从二者的基本概念出发，介绍这两个标记的用法与区别。希望大家能够掌握以下几个方面的内容：
- div与span的概念
- div与span的区别
2．盒子模型
盒子模型是CSS控制页面时一个很重要的概念。只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正的控制页面中各元素的位置。我们在这里主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框、距离等参数，来调节盒子的位置。
一个盒子模型由content（内容）、border（边框）、padding（间隙）、margin（间隔）这四部分组成，如图所示。
一个盒子的实际宽度（或高度）是由content + padding + border + margin组成的。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding、margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。
3．元素的定位
网页中各种元素都必须有自己合理的位置，从而搭建出整个页面的结构。我们在这里围绕CSS定位的几种原理方法，进行深入的介绍，包括position、float、z-index等。需要说明的是，这里的定位不是用 table 进行排版，而是CSS的方法对页面中块元素的定位。希望大家能够掌握以下几个方面的内容：
- float定位
- position定位
- z-index空间位置
4． 定位实例一：轻轻松松给图片签名
手里有漂亮的图片需要放到页面上，而且希望给图片加上个人信息，如果对各种图象处理软件不是很熟悉，用CSS定位完全可以实现给图片签名的效果。
首先找好希望放到网上的图片，然后将其放入一个 div 块中，并用盒子模型的方法给图片加框（padding、border）。然后将需要签名的文字放入另外一个 div 块，用position定位将其移动到图片上，再设置相应的字体、颜色即可。
5． 定位实例二：文字阴影效果
前面介绍了用CSS滤镜实现文字阴影效果的方法，可是CSS滤镜仅仅适用于IE浏览器，如果希望Firefox下也能有文字阴影的效果，该方法就无能为力。采用本课介绍的定位方法，便能轻松实现文字阴影的效果，而且适用于各个浏览器，本例效果如图所示。
42,200
我用float 布局 一个大的div 中有三个div 我想让他们并列排列 但第三个div 老是下来，它们的宽我也设定的很好没有益出啊 为啥？请老师指点下啊？谢谢
里面的三个也得用浮动float控制
老师您好，我听你的课很多了，讲的很详细，但我发现你这节课有个问题，
您最开始有个DIV与SPAN的例子，黄底的那个，最初你写的是DIV,显示正常，这个可以，但当你把DIV换成SPAN时，依然显示正常， 这肯定不对的，因为DIV的DISPLAY默认是BLOCK，而SPAN默认是INLINE，一个是块，一个是行，而且您在例子中并没有加上DISPLAY:BLOCK的属性，我真的不明白，为什么你那里的DIV与SPAN互换的效果是一样的呢？
king.bt，
抱歉，我不知道你具体说的了，你是说这个视频中的内容吗？等我有时间再看一遍，这是几年前做的了，现在我已经都记不清楚细节了。
从原理来说，只要知道block和inline的区别就可以啦。
老师你好，我听你的课很多了，讲得很好。这节课时刚做的效果与King.bt讲得一样；可做几次后怎么DIV与SPAN互换的效果又跟老师讲得一样了。这是为什么啊？
老师我想弄CSS，最好是用一个单独的CSS文件来写,那样对于以后写整站程序比较清楚，有逻辑性啊和通用性啊.
Web ，
一般都是把CSS单独写在一个.css文件里的。
float讲的一点也不好，视频马马虎虎讲讲，书上讲的不清楚，我看两遍还没明白
lenlein,
参考这套视频，可能你能理解的更清楚一些：
http://learning.artech.cn/category/css-research
老师你好，我想问下，如何给在嵌套里的子div在父div的定位呀？
最后图片签名的功能不实际，文字定位是绝对定位，整个图片位置移动了，文字就可能跑到图片外面去了，并且保存图片时候仍然是原始图片，不能起到保护图片的作用
goodgoodgood ，
这只是个例子，为了说明CSS的~~
抱歉没有及时回复，我们最近很忙，下半年我们会拿出更多时间增加新内容的，欢迎来交流！
position属性定位father的背景颜色出不来，不知道什么问题
jinper ，
这是在IE中的现象。
这时应为father的高度设置为100%了，不设置告诉，或者设置为固定高度就会显示出背景色了。
如果要使用100%，需要先对他的父元素设置高度。
我现在正要做网站,也是用CSS+DIV做的，只把头部做了，但是中间的就很难办了，因为我要许多的框架，我总不能全用DIV解决啊 ，那样就不是WEB标准了，请问老师 ，你们的这书里面有这方面的内容吗？我正打算买呢。
您好，
建议您对CSS深入学习一下，从您的留言，感觉似乎您对这个CSS和web标准还不太熟悉。您可以先花几个小时的时间，看一看这个网页右边列出的相关视频教程，对CSS有一个了解之后，再跟着书学习，那样可能学起来比较容易。
讲得好,不过也要一点基础,看过了再看,进步不小!
这个秋，
是啊，学习任何东西都需要有一些必要的基础，希望我们的内容对您有所帮助！
我没书，有没有什么代码全集，方便我新手使用的手删。
菜鸟，
如果您找的是那种各种标记、属性的说明手册，那么网上这种手册太多了，随便一找就是一大把~~~
怎么那个Riva Flv Player下载好了之后不能用啊？
miaomiao，
如果安装 riva 不行的话，您可以安装风雷影音，应该没问题： http://www.flmpc.com 。
老师真好,每个问题都回答的那么详细.
希望读者能提出有价值、有意义的问题，这样对大家都是一个提高！
很感谢制作者为此付出的努力，自己亦受益颇深，我本来不准备买书的，看了你们的留言以后，我也准备要买一本，一方面是自己学习的需要，另一方面更是对作者的支持，尽自己的微薄之力！
半点书生，你好！
感谢你的支持。
实际上我们一直也在考虑适当的方式，如何能做到双赢，既方便了读者的学习，也能够使我们的收入有所保证，这样我们才能够投入更多的力量来不断开发新的教学内容，从而进入良性循环的轨道。实际上我们做的内容是技术更新非常快的领域，现在很多读者对CSS感兴趣，但是一年以后，CSS可能就是大家都熟知的内容了。为此我们必须不断实践和学习新东西，事实上这对任何人，在今天这样告诉发展的时代，希望立足的必不可少的条件。
关键是如何才能能够让读者感到物有所值，这是我们要努力做的事情。因为我们提供的本质上并不是纸张或者光盘，而是内容！因此我们必须要把内容做到极致，使读者学到他们希望学习的内容，这样我们才有可能会有所收获，生存下来。我们坚持一点就是在我们的网站上，只提供我们自己的内容，而不会转载任何其他教学内容，我们会坚持100%原创这个原则的。
再次感谢您的留言！欢迎与您探讨和交流。
总的来说很不错，无论是视频教学还是给网友们的回复，都很实在，让我们能真正学懂一些知识，但是如果有源代码相信我们学的更快，虽然你们说那是版权合同问题，你们可以商量一下啊，试试把源代码也给我们放出来，那样我们进步更快，我们自然也会介绍更多的人进来这里看，看了之后自然也会有更多的人买你们的图书的，有付出一定有回报，相信老师们比我更懂这道理。请给予回复。
123新手！
您说得有道理，如果觉得好，就买一本书支持一下我们吧，一本书从编写到编辑、出版、发行，有很多很多环节，有很多人为之付出努力，如果对读者有帮助，不妨支持一下吧。只有这样，才会有更多的人来做这件事啊，否则谁来做呢？事实上计算机图书市场这几年一直在萎缩，再坚持的做这件事的人心理实际上也很没有底。
进一步来说，您确实问了一个很好的问题，而且是一个大问题。并不仅限于上面的回答，我想再展开聊几句。
如果能够为读者提供有价值的电子化的内容，而又有一定的收益，这样可以形成良性的循环，对大家甚至整个行业都是一件大好事。事实上，美国很多科技出版社，比如著名的O’reilly，现在已经开始销售电子版图书，现在他们新出版一本书会有两个版本，纸质版，和PDF格式电子版，后者的价格是前者的一半。如果仔细研究一下可以发现，美国存在大量靠销售教学内容的网站，比如通过会员制等等方式获得利润，实际上每个读者交少量的费用可以获得非常丰富的教学内容，因为通过互联网可以减少很多销售中间环节的成本，这样对于学习的人来说，是很值得的，对于内容的提供者也是很有好处的，可以投入更多的精力到研究和制作内容上。
然而，遗憾的是，在中国目前这是不可能成功的事情~~如果不以几百页纸的形式存在，绝大多数人是不愿意为此付钱的，因此我们必须把内容变成图书这种实物形式才能获得一些利润，而实际上图书的整个利益链条中，最上游的作者获得利润是很小的，即使是金庸获得稿酬也只有总销售额的12%，何况普通的科技作者只是这个比例的几分之一。因此，如果我们把全部精力放在制作网上教学内容，然后以收费会员的方式，会是一个很好的方式，但目前来看还只是一个理想。
这很类似于软件业，我们可以百分之百相信中国的汽车工业一定会大发展，因为汽车是实物，而无法电子化，大家无法到网上下载一辆汽车，但是中国软件业一定不可能有未来的大发展，因为只要在网上可以找到盗版，绝大多数人是不会去买正版的。如果有一天，大多数人能够做到即使明知有盗版，还会去买正版，中国就会一个新的面貌了。我们中国人是很聪明的，但是现在还需要一些更大的智慧。
当然我们如果条件允许，也会做一些这方面的尝试，希望得到大家的支持。因此，我们会尽力制作好的内容，卖给出版社，变成图书，然后尽可能为大家在网上提供一些免费的教学内容。希望对大家有一点帮助吧！
我非常支持您的想法!也感谢您提供的免费教学内容,敬佩您对工作的认真负责,很少有计算机图书还为读者提供一个这样的视频学习交流平台~~希望您能继续制作更好更多的书供我们学习!(这一课的教程有点缺陷,讲的不太清楚,在padding和margin的讲解中,我本来已经明白了,看完这个视频之后,反而迷糊了~~~呵呵)
ivy，你好！
一定要动手实践才可以的，不亲自动手，只能看个热闹，因为这个教程一共6个小时的时间，如果仅凭这些视频，是不够的。如果原来有一些基础的读者，看这个教程，可能会把一些以前不清楚的东西搞清楚，而对于基本没有CSS基础的读者，这个视频只是给大家一个引导和线索，希望读者能够根据这个线索，踏踏实实，一步一个脚印地真正实践一遍。如果仅仅是看一遍，任何人都会越来越迷糊的。
就像上大学的时候，很多课程，一开始的几节课还好理解，如果不花力气，到后面越听越不知道老师在说什么，再后来彻底放弃了，等到考试前突击一下，就算的一个不错的分数，其实也没有真正学明白。这是我的亲身感受，呵呵。
CSS和HTML不同，CSS的逻辑关系比HTML复杂的多，一定要下功夫才能真正搞懂的。所以在这个课程的第0讲中，我们专门提到，必要的条件90%是肯于钻研的精神。
我会记住您的话继续努力的，还有一个问题，就是您在讲课的时候，属性名称您大多都是用英文讲的，对于css基础比较好的人来说，肯定是没问题的，但对于像我这样的初学者来说就接受的不太好，还有，不并不只是来“看个热闹”，您讲的每一个事例，我看的懂的，我都做了，而且每天来您的网站上学习也是我必做的一件事！
呵呵，太好了，尽可能多实践，慢慢就会发现掌握起来比你想象的容易！
关于英文单词的问题，确实如此，开始的时候，确实会有一些困难，写的次数多了，慢慢就记住了。
另外，我总结了一个英语小字典，包括了一百多个英语单词，如果英文不好的读者，可以先集中突击一下！明天我把这些单词总结在网站上，您可以花几天背一下。
加油！
呵呵，真的很谢谢你们哦！找了好久的视频教材在贵网站找到了！
lgq1985，你好！
谢谢您喜欢我们的内容！
为什么总是下载到99.9%或99.8%就不能下载了呢？
lingwenyu，你好！
这可能是您的网络接入的问题，您可以换一个下载软件试试看。或者，在google上搜索“下载99%停止”（搜索时不要输入引号），有很多网页介绍相关问题，看看有没有适合您的方法。
我这有一切源码
要是能把那个源代码下载下那就太感谢了。。我也是新手。。那可是帮了我的大忙了
虎子，您好！
很抱歉，源代码是图书的一部分，合出版社有合同约束，因此不能提供下载。您可以购买《精通CSS DIV网页样式与布》这本书来学习一下，相信您提高会很快的，也是对我们工作的支持！谢谢！