《css网页布局与定位》由会员分享，可在线阅读，更多相关《css网页布局与定位（13页珍藏版）》请在金锄头文库上搜索。
1、CSS网页布局与定位,盒模型详解（Box Model）,盒模型是CSS中的一个核心概念。 W3C对盒模型的定义相当准确，由于浏览器设计的原因，在不同的浏览器下面，盒模型的实际表现不一样。,什么是盒模型,盒模型是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。无论任何布局，它们都是几个方块（盒状）互相贴近显示而已。浏览器通过这些盒状物的大小和浮动方式来判断下一个盒状物是贴近显示，还是下一行显示，还是其他方式显示。任何一个CSS布局的网页，都是由许多不同大小的盒子所构成。,盒模型的细节,为了使布局工作更细致，更具有可控性，在CSS的盒模型设计中，它的宽度和高度不仅仅由width和
2、height来控制，而是由一组属性值组合而成，对于盒模型而言，CSS还提供了内边距（padding）、外边距（margin）、边框（border）三个属性，用于控制一个对象的显示细节。,浮动（Float）,浮动是CSS布局中重要的理论，大部分都是采用浮动来达到分栏效果的。CSS网页布局只能以两种方式存在：一种是浮动式布局，另一种则是定位布局。 这两种定位方式的核心都脱离于文档流的控制。,文档流（Document Flow）,文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。浮动的定位浮动的清理（clear
3、）,何时选用浮动定位,简单来讲，当需要网站有较强的对分辨率及内容大小的适应能力的时候，就需要采用浮动定位。 浮动定位能帮我们将布局浮动在窗口之中，而不是固定在窗口的某个位置，所以其目的主要是针对非固定类型的网页进行设计。,距中布局,对一个元素距中，是相对于它的左右两个边而言。如果浏览器窗口的宽度不固定，那么就需要用div，采用针对左右margin的auto设置，以便让元素距中浮动。,横向宽度可百分比缩放,如果有一个二列宽度自适应布局，当左列的宽度无法固定时，则右列的位置也就无法固定，因此右列必须浮动到左列的右边贴近，才可以适应左列宽度的随时变化。需要借助margin、padding、borde
4、r等属性。,绝对定位与相对定位,绝对定位： 相对于浮动来说，绝对定位是一种很好的理解的定位方式。凡是采用position:absolute;之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom、left四个方向的边距来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在。,绝对定位与相对定位,#a,#b,#c,#dbackground-color:#CCCCCC;border:2px solid #FF0000;width:100px;height:100px;margin:2px 2px 2px 0;float:left;#b position:absolute; top:80px; left:100px; #d position:absolute; top:80px; left:210px;,绝对定位与相对定位,深度 在定位中，会出现一个问题，即元素的重叠。在这种情况下，CSS允许我们通过设置对象的z-index属性，以设置其重叠的先后顺序，也就是z轴的顺序。以z-index的数值大小为准，大值对象的层级位于小值对象之上。,绝对定位与相对定位,相对定位： 相对行为就是浮动定位与绝对定位的扩展方式。 相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息。,
