第6章 定位与布局.pptxVIP

;页面元素大小由盒子模型决定，盒子模型规定了元素大小、边框、内外边距等CSS样式。而元素位置可以通过正常文档流定位、浮动定位、相对定位、绝对定位等方式进行确定，从而使整个页面达到预期的整体布局效果。;6.1.2盒子模型的组成

页面上的区域、图片、导航、列表、段落都可以是盒子，盒子由内容、边框以及一些留白构成，这些留白称为填充或边距，盒子模型的组成如图6-2所示。;其中：（1）content是指元素内容，例如文字、图片等，padding、border、margin都是CSS属性；（2）padding、border、margin都可以分为四个方向，每个方向可以单独设置样式，如图6-3所示。;1.box-sizing属性

box-sizing属性决定盒子大小计算方式，取值如下。

（1）默认取值content-box，则width、height指内容高宽，border和padding不计算入width、height之内，如图6-2（a）所示。此时，

盒子的总宽度=width+padding+border+margin

盒子的总高度=height+padding+border+margin

默认的content-box盒子做页面布局时，当已经定义好width、height，一旦添加border和padding都会使盒子实际尺寸变大，影响布局。此时可以采取另外两种取值解决这个问题。

（2）取值padding-box，则width、height包含内容和padding。

（3）取值border-box，则width、height包含内容和padding、border，这个取值非常常用。;2.border属性

border属性可以设置边框宽度、样式、颜色，如表6-1所示。;3.padding属性

padding属性可以设置内容与边框之间的距离，即内边距。

（1）可以分别设置padding-top、padding-right、padding-bottom、padding-left等方向的内边距。

（2）内边距padding属性与border一样，四个方向可以分开设置，也可以按照上右下左的方式统一在padding里设置，如图6-4（a）所示。例如。

padding:1px2px3px4px;

（3）如果上下相同、左右相同，可以设置两个值，如图6-4（b）所示。例如。

padding:1px2px;/*等价于padding:1px2px1px2px;*/

（4）如果四个方向都相同，可以设置一个值，例如。

padding:1px1px1px1px;/*等价于padding:1px1px1px1px;*/;4.margin属性

margin属性可以设置边框之外的空白距离，即外边距。margin属性设置与padding类似。

（1）浏览器有默认padding和margin值，在设置之前将浏览器默认边距清??。实际开发中有一套初始化样式代码，以下代码是简单方式。;图6-5margin垂直外边距合并;（3）水平居中

盒子在父元素里面水平居中的方式可以通过margin完成，例如，有如下内外两层盒子结构，代码如下。

divid=outter

divid=inner/div

/div

CSS样式设置margin-left与margin-right值为auto，浏览器自动计算outter盒子宽度和inner盒子宽度之差，并左右平分该距离，使inner盒子水平居中，如图6-6所示。代码如下。

#outter{

border:1pxsolid;

width:100px;

height:80px;

}

#inner{

background-color:lightblue;

width:50px;

height:40px;

/*auto表示自动计算margin-left与margin-right*/

margin:20pxauto;

};（4）margin塌陷

盒子嵌套时，应通过父元素的padding-top设置子元素距离父元素的上边距。如果使用子元素的margin-top属性，效果等同于父元素被设置margin-top，好像父元素掉下来一样，被称为margin塌陷。也可以通过父元素加border、float属性等方式防止margin塌陷。;5.overflow属性

overflow属性规定当内容溢出元素边框时如何显示，取值如下。

（1）默认取值visible：溢出部分正常显示，如图6-7（a）所示。

（2）取值hidden：溢出部分隐藏不可见，如图6-7（b）所示。

（3）取值scroll：显示滚动条以便查看溢出部分，如图6-7（c）所示。

overflow属性在动