IT兄弟连 HTML5教程 和页面布局有关的CSS属性

IT兄弟连 HTML5教程 和页面布局有关的CSS属性_第1张图片

 

使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过定位和浮动的设置,就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面,每个虚线框代表一个盒子模型。

IT兄弟连 HTML5教程 和页面布局有关的CSS属性_第2张图片

图1  多个盒子定义页面布局

 

虽然CSS的样式属性非常多,但实际参与页面布局的属性其实很少。CSS的定位属性应用得非常广泛,可以控制元素的平面或空间位置,以及高度、宽度和可见性。也可以使用CSS的display属性改变生成区块的类型,例如将display属性设置为none,则这个区块框及其所有内容就不再显示。通过将display属性设置为block,可以让行内元素表现得像块级元素一样。常见的参与页面布局的CSS属性如表1所示。

表1  常见的参与页面布局的CSS属性

 

IT兄弟连 HTML5教程 和页面布局有关的CSS属性_第3张图片

    

在CSS中提供了相对和绝对两种定位方法。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移,而绝对定位是指让操作的元素参照原始文档进行偏移。使用表2-2中部分定位属性的例句代码如下所示:

IT兄弟连 HTML5教程 和页面布局有关的CSS属性_第4张图片

你可能感兴趣的:(IT兄弟连 HTML5教程 和页面布局有关的CSS属性)