CSS学习笔记（四）：CSS布局

CSS有三种布局模式：

1、流动模式（Flow)

2、浮动模式（Float)

3、层模式（Layer)

流动模式

网页布局在默认情况下，都是流动模式布局。

1、在流动模式下，所有的块状元素宽度都为100%，即默认情况下，所有的块状元素都占据一行

2、所有的内联元素都从左到右水平分布显示

那么问题来了，如果我们想要块状元素可以并排显示，应该使用那种布局模式呢？

浮动模式

默认情况下所有的元素都不能浮动，但是可以通过对float属性进行设置达到浮动的效果

例如，设置div左浮动：div{float:left}

那么，如果不仅仅想要让元素左对齐或右对齐，而是想要精确地定位每一个元素，应该怎么做呢？

层模式

层模式可以精确定位每一个元素，通过设置position属性可以达到精确定位的目的

1、层模式的三种形式：

（1）绝对定位：position:absolute

（2）相对定位：position:relative

（3）固定定位：position:fixed

2、绝对定位 position:absolute

绝对定位是以离该元素最近的一个具有定位属性的父包含块为基准进行定位，如果不存在这样的块，则以body为基准，即以浏览器窗口为基准

例如，实现p元素相对浏览器向下移动100px，向右移动300px

p{

       position:absolute;

       top:100px;

       left:300px;

}

3、相对定位 position:relative

相对定位首先按static(float)方式生成一个元素，使得元素像层一样浮动起来，然后相对于以前的位置移动，偏移前的的位置保留不动

例如，实现id为div1的元素相对以前位置向上移动80px，向左移动20px

#div1{

       position:relative;

       bottom:80px;

       right:20px;

}

注意：

①什么叫做偏移前的位置保留不动？

②向上移动应该是距离底部移动，例如向上移动10px，应培该是bottom:10px，即相对底部移动了10px

    同理，向左移动应该是相对右边移动，例如向左移动78px，应该是right:78px

4、固定定位

固定定位相对于浏览器视图或者称作屏幕内网页的固定点（类似于固定在屏幕上）而移动，不会随着浏览器的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置或者改变浏览器窗口大小，因此固定定位不会受文档流动的影响

例如，实现类名为div2的元素相对于浏览器视图向右移动28px，向下移动27px，并且拖动滚动条时位置不会发生改变

.div2{

       position:fixed;

       left:28px;

       top:27px;

}