css-盒模型.pptVIP

CSS布局 2010.06.29 十年磨一剑 Strict.dtd@ 本文档的内容分为两部分 CSS盒模型 实例分解 CSS盒模型 什么是CSS盒模型？ CSS盒模型是CSS布局的基础，是学习CSS需要了解的几个最重要的概念之一。 它决定着一个元素在页面上的大小，也决定着margin、padding等等这些CSS属性是怎么影响一个元素的。margin、padding这些都是我们平时很常用的CSS属性，它们用起来也很简单，当为一个元素定义了margin、padding后会产生怎样效果我们都想得到。 那为什么还要来了解CSS盒模式呢？会产生怎样的效果只一个表面现象，要用好CSS知道这些表面的东西还不够，还需要知道为元素定义这些属性后为什么会产生这样的效果；很多时候要实现某一个布局有多种方式，到底用哪种更合适；网页大多都由很多元素组成，为这些元素定义大小、位置时它们之间是怎样相互影响的。要回答这些问题并不难，但前提我们需要对CSS盒模式有足够的了解，在理解了CSS盒模式、浮动、定位等等这些CSS的重要概念后，我们就能用更简洁、高效的代码来实现各种布局效果。同时也有助于我们提升解决bug的能力，因为这会让我们更多的了解bug背后的为什么，而不是遇到一个bug时就到处找资料、找解决方法。 CSS盒模型 前面说过CSS盒模型决定着margin、padding等等这些属性怎么影响一个元素，那么下面就用一个我们最常用div标签来理解CSS盒模型，了解这些属性是怎么影响元素的。 看看下面这段代码 divCSS盒模型/div 一个div开始标签和一个div结构标签包裹着一段文本，这在html中就称为一个div元素，把这段代码加到一个html文件中，在我们没定义样式情况下浏览器会怎样显示呢？ CSS盒模型 很简单，就一行文本，没有边框也没有背景，或者我们可以为它加一个padding属性，像下面这样。 div style=padding:30px;CSS盒模型/div 注：最好不要把CSS通过style属性直接添加元素上，因为这样做既没效率也不便日后的维护，当然除非有特殊情况就特殊对待了。我在这里只是为了方便演示效果才这么做的 ? 在添加了一个padding后再看看浏览器是怎么显示的。 CSS盒模型 我们能看到的其实还是一行文本，只是文本周围多了一些空白，但浏览器并不是像我们这样来看这个元素的。 元素框（element box） CSS假定每个元素都会生成一个矩形框，术语称之为“元素框（element box）”，元素框的大小由4部分属性决定：width与height、padding、border和margin，前面那个div元素在添加一些padding后，它的元素框的大小会是下面这样子。 CSS盒模型 或者我们可以再为它定义一些margin和border，像下面这样：div style=margin:30px;padding:30px;border:solid 30px blue;CSS盒模型/div 在添加这些属性后元素框的大小又会有怎样的变化呢？ 这是浏览器所显示的效果，当然这只是我们视觉上所看到的，这div元素的元素框大小并不是这样子。 CSS盒模型 最里面的黄色区域就是核心内容区，这个区域的大小由width和height决定，紧挨着内容区域的是padding、接着是border、然后是margin，这些属性值的总和就是这个元素框的大小。 注：这些背景颜色是为了方便理解这个元素框而添加的，实际上元素框我们在视觉上是看不到的。 实际元素框的大小是这样 CSS盒模型 看看下面这幅画 这幅画就能很好的来说明CSS元素框的形成，这个画框中间的画就是核心内容区，这个框框可以理解为border，画离框框的距离就是padding，而这个画框与墙壁的距离或者与相邻画框的距离就是margin，这些因素共同决定着这幅画在墙壁上所占的空间。同样，这些因素也共同决定着一个元素在页面上所占的空间。 CSS盒模型 一个元素框在页面上所占的空间是怎么计算的呢？ 先看下一个元素框高度的计算方式 元素框高度 = height + margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom 这7个属性值的总和就等于元素框的高度。如果margin、border、padding这些值为0时，这个元素的高度就由height值来决定了，但页面上的元素大多没有定义一个固定的height值的，那么这个时候元素框的高度就是由内容来决定的。就像我们前面看到的那个div元素，在没定义样式时它的高度就由内容决定。 CSS盒模型 上面是浏览器所