CSS网页布局与定位.ppt

《CSS网页布局与定位.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS网页布局与定位盒模型详解（BoxModel）盒模型是CSS中的一个核心概念。W3C对盒模型的定义相当准确，由于浏览器设计的原因，在不同的浏览器下面，盒模型的实际表现不一样。什么是盒模型盒模型是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。无论任何布局，它们都是几个方块（盒状）互相贴近显示而已。浏览器通过这些盒状物的大小和浮动方式来判断下一个盒状物是贴近显示，还是下一行显示，还是其他方式显示。任何一个CSS布局的网页，都是由许多不同大小的盒子所构成。盒模型的细节为了使布局工作更细致

2、，更具有可控性，在CSS的盒模型设计中，它的宽度和高度不仅仅由width和height来控制，而是由一组属性值组合而成，对于盒模型而言，CSS还提供了内边距（padding）、外边距（margin）、边框（border）三个属性，用于控制一个对象的显示细节。浮动（Float）浮动是CSS布局中重要的理论，大部分都是采用浮动来达到分栏效果的。CSS网页布局只能以两种方式存在：一种是浮动式布局，另一种则是定位布局。这两种定位方式的核心都脱离于文档流的控制。文档流（DocumentFlow）文档流是浏览器解析网

3、页的一个重要概念，对于一个XHTML网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。浮动的定位浮动的清理（clear）何时选用浮动定位简单来讲，当需要网站有较强的对分辨率及内容大小的适应能力的时候，就需要采用浮动定位。浮动定位能帮我们将布局浮动在窗口之中，而不是固定在窗口的某个位置，所以其目的主要是针对非固定类型的网页进行设计。距中布局对一个元素距中，是相对于它的左右两个边而言。如果浏览器窗口的宽度不固定，那么就需要用div，采用针对左右margin的auto设置，以便

4、让元素距中浮动。横向宽度可百分比缩放如果有一个二列宽度自适应布局，当左列的宽度无法固定时，则右列的位置也就无法固定，因此右列必须浮动到左列的右边贴近，才可以适应左列宽度的随时变化。需要借助margin、padding、border等属性。绝对定位与相对定位绝对定位：相对于浮动来说，绝对定位是一种很好的理解的定位方式。凡是采用position:absolute;之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom、left四个方向的边距来实现。一旦对象被设置绝对定位，它就

5、完全脱离了文档流与浮动模型，独立于其他对象而存在。绝对定位与相对定位#a,#b,#c,#d{background-color:#CCCCCC;border:2pxsolid#FF0000;width:100px;height:100px;margin:2px2px2px0;float:left;}#b{position:absolute;top:80px;left:100px;}#d{position:absolute;top:80px;left:210px;}绝对定位与相对定位深度在定位中，会出现一个问

6、题，即元素的重叠。在这种情况下，CSS允许我们通过设置对象的z-index属性，以设置其重叠的先后顺序，也就是z轴的顺序。以z-index的数值大小为准，大值对象的层级位于小值对象之上。绝对定位与相对定位相对定位：相对行为就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息。