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

5f16a58a57bc47108e1c532aebeafd05.jpg

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

image/20191206/bbc222bdd22b580fd9420a74b1eb4793.png

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

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

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

image/20191206/c66a8b430934a0ec6f72abae034b4802.png

    

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

image/20191206/c69b595eb06dbe764c1691e057756c0d.png

猜你喜欢

转载自www.cnblogs.com/itxdl/p/12008976.html