上篇我们对盒子属性和内容属性做了下介绍，小伙伴应该都掌握了吧，今天我们继续来介绍下css的其他几个比较重要的属性即css的布局属性们。

定位属性

position（定位）

relative(相对定位)：相对于原位置的左上角通过left、top属性来重新定位,但不会让出原空间位置。

fixed(固定定位)：总是以视窗左上角通过top、left定位(或以视窗右下角通过right、bottom定位)

absolute(绝对定位)：相对于最近的那个脱离了标准流的父元素定位，如果没有则相对于当前视窗左上角定位，让出原空间位置。通过left、top属性来定位

static(默认):默认文档流，靠margin来定位,忽略 top, bottom, left, right 或者 z-index 声明

浮动属性

float（none、 left、 right）

float属性定义元素在哪个方向浮动，

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，

不论是行内元素还是块元素只要设置了float属性，就可以用width、height设置宽高，

div块级元素本身独占一行，加上float之后，变成行级元素。

块级元素和行级元素

刚提到这两个词语，现在我们进行一个小插曲，介绍下块级和行级。

块级标签：显示为“块”状，独占一行

不管内容多少都会占据一整行

具有宽度和高度，可以通过width、height属性设置宽高

行级标签：在一行内按照先后顺序显示

只占据显示自己内容的宽度，不会占据整行

不能通过width、height属性设置宽高

如果设置了float属性，就可以设置宽高

inline-block:不会占据整行，但可以通过width、height设置宽高

所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

例如：图片，按钮，单复选框，单行/多行文本框等

可以通display属性相互转换： display:block/inline/inline-block

display也有很多属性值，其中以inline/inline-block/block三个最常见，这代表了页面上三种不同水平的元素。我常常会以液态/固液混合态/固态加以形象化思考，对应于现实中的事物就是：牛奶/果冻/坚果。

清除属性

clear:规定元素的哪一侧不允许其他浮动元素

none:默认值。允许浮动元素出现在两侧

left:在左侧不允许浮动元素

right:在右侧不允许浮动元素

both:在左右两侧均不允许浮动元素

堆叠属性

z-index

数字越大，离浏览者越近

只针对脱离文档流的元素生效

可见性属性

visibility:hidden

visibility属性指定一个元素应可见还是隐藏

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

visibility:visible 默认值，元素是可见的

显示属性

display

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间

display:visible可以显示某个元素，默认就是visible

溢出属性

overflow |overflow-x |overflow-y

visible(默认允许溢出)

hidden

scroll

auto

好了，静态页面的HTML和css样式，就给大家介绍到这里，相信大家已经可以制作出一个属于自己的静态网页了。我们下期见。