CSS学习笔记（四）：布局

一、块级元素和内联元素

块级元素：换行显示，例如<h1>, <p>, <ul>, <li>。块级元素可以包含其他子元素。

内联元素：不换行，例如<img>, <b>, <i>

二、控制元素的位置

　　一般有5种元素的定位方法：

1. 普通流

　　普通流中，每个块级元素在上一个块级元素的下方，是HTML默认的方式。CSS属性为：

position: static;

2. 相对定位

　　相对定位的元素，以其在普通流中的位置为起点相对移动。这种移动不会影响周围元素的位置。

p.example {
    position: relative;
    top: 10px;
    left: 100px;
}

　　这里，top: 10px 表示元素距离顶部产生10px的间距，即元素向下移动10px。left: 100px表示元素在左侧产生100px的间距，即元素向右移动100px。

3. 绝对定位

　　绝对定位完全脱离普通流，元素定位的位置相对于他的包含元素。他不会影响到周围任何元素的位置。绝对定位的元素随着页面滚动而移动。

h1 {
    position: absolute;
    top: 0px;
    left: 500px;
    width: 250px;
    }

4. 固定定位

　　固定定位是指元素相对于浏览器窗口进行定位。页面滚动时，固定定位元素保持不变。

h1 {
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
    background-color: #efefef;}

5. 浮动元素

　　浮动元素可让其脱离普通流，并定位到其父元素的最左边或最右边位置。浮动元素周围可以浮动其他块级元素。

　　使用浮动属性时，应指定元素宽度width。否则浮动元素可能会占满整行。

blockquote {
    float: right;
    width: 275px;
    }

 6.重叠元素

　　当盒子出现重叠时，可以用z-index属性指定盒子叠加的顺序。z-index属性是一个数字，数字越大，层次越靠前。

h1 {
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 10px;
    width: 100%;
    background-color: #efefef;
    z-index: 10;
    }

7. 清除浮动

清除浮动属性表明一个盒子的左侧或右侧不允许浮动元素，可选值为left,right,both,none。