Css布局
Download as PPT, PDF1 like794 views
本文档介绍了CSS盒模型，强调了 margin、padding、border 和 width/height 的计算及其对元素布局的影响。通过示例，作者阐述了如何通过理解元素框的各部分，优化CSS布局和解决布局中的常见问题。最后，作者还提到设计样式时需要考虑文本、色彩和布局样式之间的相互影响。
Css布局
- 1. CSS布局 2010.06.29 十年磨一剑 Strict.dtd@gmail.com
- 2. 本文档的内容分为两部分 • CSS盒模型 • 实例分解
- 7. 或者我们可以再为它定义一些margin和border，像下面这样： <div style="margin:30px;padding:30px;border:solid 30px blue;">CSS 盒模型</div> 在添加这些属性后元素框的大小又会有怎样的变化呢？ 这是浏览器所显示的效果，当然这只是我们视觉上所看到的，这div元素的元素框 大小并不是这样子。
- 10. 一个元素框在页面上所占的空间是怎么计算的呢？ 先看下一个元素框高度的计算方式 元素框高度 = height + margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom 这7个属性值的总和就等于元素框的高度。如果margin、border、padding这些值为 0时，这个元素的高度就由height值来决定了，但页面上的元素大多没有定义一个固 定的height值的，那么这个时候元素框的高度就是由内容来决定的。就像我们前面 看到的那个div元素，在没定义样式时它的高度就由内容决定。
- 12. 同样，元素框的宽度也是由7个属性决定 元素框宽度 = width + margin-left + margin-right + border-left + border-right + padding-left + padding-right 这可以称之为水平方向的7属性，这7个属性值之和就是元素框的宽度。和元素框高 度一样，在margin、border、padding为0时，元素的宽度就由width值来决定，但 如果没有定义一个固定的width值，那这个时候决定元素框宽度的因素与决定高度的 因素就有一些区别了，它并不是由内容来决定，每个元素框的宽度都有一个相对的 范围，就是由它的父元素的width值来定义的。
- 13. 看看下面这段代码 <div id="div1" style="width:400px;"> <div id="div2">CSS盒模型</div> </div> div1的width值为400px，那么div2的元素框宽度就始终是400px，注意我说的是元 素框的宽度，也就是div2的水平方向7属性之和始终是400px。 这里大家可能会觉得困惑，只要把width、padding、margin等等这些值定义得较大， 那加在一起很容易就能超过400px，或者也可以定义得较小，加在一起就不到 400px，那这不是有和前面说的有冲突吗？ 当然这点CSS肯定想到了，在弄明白这个冲突前我们先来看一下div元素水平方向7 属性的默认值。
- 15. 再看下前面这段代码 <div id="div1" style="width:400px;"> <div id="div2" style="margin-left:10px;margin-right:10px;padding- left:10px;padding-right:10px;border-left:10px solid;border-right:10px solid blue;width:auto;">CSS盒模型</div> </div> 如果将div2的width值设为auto，其它6属性的值都设为10px，那么这个时候div2的 width值为：400px - 60px = 340px，这就是auto的意义，弥补其他部分之和与父元 素width值之间的差别。 我们可以再试着这样做 <div id="div1" style="width:400px;"> <div id="div2" style="width:200px;margin-left:150px;margin-right:auto;">CSS盒 模型</div> </div> 将div2的width设为200px，margin-left设为150px，margin-right设为auto，那么这 里的计算就更简单了，margin-right值 = 400px - 200px - 150px = 50px。
- 16. 前面示例中都只定义一个值为auto，那如果有两个值或三个值设为auto 会是什么情况呢？ <div id="div1" style="width:400px;"> <div id="div2" style="width:200px;margin-left:auto;margin-right:auto;">CSS盒模 型</div> </div> 这里将div2的width值设为200px，margin-left和margin-right的值设为auto，这时候 margin-left + margin-right = 400px - 200px = 200px，而这个200px会由margin-left 和margin-right进行平分，各得100px，这样就会让div2在div1中水平居中（注意这 里说的是核心内容区的水平居中，并不是元素框），其实这就是将一个元素水平居 中是正确方式，也是我们常用的一个方法。 那如果margin-left或margin-right和width值设为auto时会是怎样的效果呢？ <div id="div1" style="width:400px;"> <div id="div2" style="width:auto;margin-left:auto;margin-right:100px;">CSS盒模 型</div> </div>
- 17. 这时值为auto的margin就会降为0，也就像只有width值设为auto一样， width = 400px - 100px = 300px，将margin-right和width设为auto也是 同样的道理。 那么如果将width、margin-left、margin-right都设为auto会是什么效果呢，其实和前 面一样，margin-left、margin-right会降为0，剩下的就是width值了。 OK，再回到前面没有解决的问题，如果各属性之和比父元素的width值大或是比父 元素的宽度值小时该怎么处理呢？这在CSS中就叫做这些格式编排被过紧约束，那 么这个时候margin-right值就被强制设为auto了。 <div id="div1" style="width:400px;"> <div id="div2" style="width:100px;margin-left:100px;margin-right:100px;">CSS 盒模型</div> </div> 看看上面这段代码，width、margin-left、margin-right的值都为100px，它们加在一 起就是300px，和需要的总和不一致，这就叫过紧约束，那么这个时候margin-right 值就会强制为auto，margin-right = 400px - 100px - 100px = 200px。
- 18. 或者像下面这样 <div id="div1" style="width:400px;"> <div id="div2" style="width:500px;margin-left:100px;margin-right:100px;">CSS 盒模型</div> </div> div2的width + margin-left + margin-right大于400px，这同样是过紧约束，那 margin-right就会强制为auto，margin-right = 400px - 500px - 100px = -200px，注 意，这里出现负值了，在这7个属性中只是margin可以为负值，其他几个属性的值 必须大于0，正是这个负值让盒模型变得复杂起来，这个负值也能让我们实现更丰 富的布局效果。 先看下margin-top和margin-bottom设为负值的情况。 margin-top、margin-bottom相对于margin-left、margin-right有一些特别之处，在页 面上两个垂直相邻元素的margin是会进行合并的。
- 19. <div id="div1" style="margin-bottom:10px;">CSS盒模型</div> <div id="div2" style="margin-top:20px;">CSS盒模型</div> 例如上面这种情况，div1的margin-bottom是10px，div2的margin-top是20px，但两 行文本间的距离并不是30px，而是20px，因为它们是紧挨在一起的，所以div1的 margin-bottom和div2的margin-top并不是相加，而是进行了合并，合并后会取其中 较大的一个值。 当然这种情况只出现在垂直相邻的块级元素上，而且这个块级元素并没有浮动、也 没有绝对定位或固定定位。 那如果是负margin值会怎么计算呢？ <div id="div1" style="margin-bottom:-10px;">CSS盒模型</div> <div id="div2" style="margin-top:20px;">CSS盒模型</div> div1的margin-bottom是-10px，div2的margin-top是20px，那这两个元素内容区之 间的距离就是20 + -10px = 10px。
- 20. 如果负值比正值更大，那可能就会出现内容区重叠的情况 <div id="div1" style="margin-bottom:-30px;">CSS盒模型</div> <div id="div2" style="margin-top:20px;">CSS盒模型</div> 如果像上面这样定义，那这两个元素之间的间距就是 -30px + 20px = -10px，这样 它们就会有10px重叠。
- 21. 那如果垂直方向相邻的两个margin都是负值会是什么效果呢 <div id=“div1” style=“margin-bottom:-30px;”>CSS盒模型</div> <div id=“div2” style=“margin-top:-20px;">CSS盒模型</div> 上面这样div1的margin-bottom是-30px，div2的margin-top是-20px，同样它们会进 行合并，合并后会取较小那个那值，也就是-30px。 再看看水平方向有负margin的情况 <div id=“div1” style=“width:400px;padding:10px 0;”> <div id=“div2” style=“width:auto;margin-left:auto;margin-right:-100px;”>CSS盒模 型</div> </div> div2中width和margin-left的值都是auto，这个时候margin-left的值就会降为0， width值 = 400px - (-100px) = 500px，这样核心内容区的宽度就比父元素还要宽， 但实际元素框的宽度还是400px，只是核心内容区有一部分延伸到了元素框之外了， 这并不违背前面的定义，水平方向7属性之和始终等于父元素的width值。
- 23. 这一部分要讲的并不是该怎么切图、怎么写代码来实现这个设计效果，我只是以 上面这个菜单为例来说说我实现这个菜单的一些思路。 这个菜单的样式分为三部分： # 文本样式 （字体系列、字体尺寸等等） # 色彩样式 （文本颜色、背景等等） # 布局样式 （菜单的整体宽度、高度，菜单项的大小等等） 这三部分样式并不是相对独立的，文本的样式会影响菜单项的大小，菜单项的大 小会影响这些色彩所应用的范围。这些因素也决定着怎样为一个元素定义width、 height、margin等等这些属性。 很多时候我们是以一个元素的内容和色彩来判断这个元素的大小的；除此之外还 有元素与元素之间的关系；如果这是一个功能性的元素，如：链接、Tab效果中 的标签等等，那这个元素的鼠标感应区域也会影响我们对这个元素的大小的定义。
- 27. OK，对CSS布局的讲解就到这里 有兴趣的同学可以试着用我前面所说的一些思路来分析下这个菜 单，写html和CSS来实现这个菜单的效果。 设计稿：http://www.butong.net/exercise/css/exercise3/menu.gif 谢谢