文档介绍：第4章 CSS盒子模型
本章简介:
本章主要介绍盒子模型的基本概念,并讲解CSS定位的基本方法。所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说,这些被占据的空间往往都要比单纯的内容大。换句话说,可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小。
一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构;二是理解多个盒子之间的相互关系。
本章首先讲解独立的盒子相关的性质,然后介绍在普通情况下盒子的排列关系。下一章将更深入地讲解浮动与定位的相关内容。
“盒子”与“模型”的概念探究
长度单位
边框
设置内边距
设置外边距
盒子之间的关系
盒子在标准流中的定位原则
盒子模型概念的实例
“盒子”与“模型”的概念探究
在学****盒子模型之前,先举例说明相关概念。假设在墙上整齐地排列着4幅画,。对于每幅画来说,都有一个“边框”,在英文中称为“border”;每个画框中,画和边框通常都会有一定的距离,这个距离称为“内边距”,在英文中称为“padding”;各幅画之间通常也不会紧贴着,它们之间的距离称为“外边距”,在英文中称为“margin”。
画框示意图
“盒子”与“模型”的概念探究
在学****盒子模型之前,先举例说明相关概念。假设在墙上整齐地排列着4幅画,。对于每幅画来说,都有一个“边框”,在英文中称为“border”;每个画框中,画和边框通常都会有一定的距离,这个距离称为“内边距”,在英文中称为“padding”;各幅画之间通常也不会紧贴着,它们之间的距离称为“外边距”,在英文中称为“margin”。
盒子模型
长度单位
本节介绍CSS规范中关于长度的规定。在HTML中,无论是文字的大小,还是图片的长宽设置,通常都使用像素或百分比来进行设置。在CSS中可以用多种长度单位,主要分为两种类型,一种是相对类型,另一种是绝对类型。
边框
边框(border)一般用于分隔不同元素,其外围即为元素的最外围,因此计算元素实际的宽和高时,就要将border纳入。换句话说,border会占据空间,所以在计算精细的版面时,一定要把border的影响考虑进去。
border的属性主要有3个,分别是color(颜色)、width(粗细)和style(样式)。在设置border时常常需要将这3个属性很好地配合起来,才能达到良好的效果。在使用CSS设置边框的时候,可以分别使用border-color、border-width和border-style设置它们。
border
设置边框样式
边框各种样式的显示效果。
border-style
属性值的简写形式
CSS中可以用简单的方式确定边框的属性值。
、颜色和样式