资讯专栏INFORMATION COLUMN

[译]HTML&CSS Lesson5: 定位

YorkChen / 1492人阅读

摘要:浮动定位的其中一种方法就是使用属性。例如,是一个内联元素,它默认的值为和值是不生效的。然而,如果我们将这个内联元素设置为浮动,那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中,父元素作为容器会置于正常的文件流中。

CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置,使我们的设计具有结构,使内容更加易懂。

CSS有好几种不同的定位属性,每种都有自己的使用场景。在这节课中我们会通过不同的案例——可复用的布局和针对单元素的布局——来介绍每种方法。

浮动

定位的其中一种方法就是使用float属性。float属性非常好用,可以用在很多地方。

本质来说,float属性是使元素脱离正常的流式布局,并将它放置在父元素的左侧或右侧。然后页面中所有的元素都会环绕浮动元素布局。例如我们将段落间的一张图片设置为浮动,那么这些段落都会围绕图片换行。

当我们将多个元素同时设置为浮动元素,那么这些元素将呈现相邻或相对布局,如多列布局。

float有好几个值,最常用的值是leftright。使元素浮动到父级元素的左侧或右侧。

img {
  float: left;
}
浮动练习

我们先创建一个通用页面,含有页头,页脚,中间有两列。最理想的情况就是在元素内创建第二节课"了解HTML"中提到的

阅读需要支付1元查看
<