码迷,mamicode.com
首页 > Web开发 > 详细

CSS——布局模型

时间:2016-07-14 21:15:40      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

1.三种布局模型:

  流动模型Flow

  浮动模型Float

  层模型Layer

2.流动模型:

  默认布局模式。

特点:

  块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,默认块状元素的宽度都为100%,以行的形式占据位置。

  内联元素都会在所处的包含元素内从左到右水平分布显示,如a、span、em、strong。

 

3.浮动模型:

  让块状元素并排显示的方式。

float: left、right

xxx{float:left;}

 

4.层模型:

  让元素在网页中精确定位的方式。

>三种形式:

  绝对定位(absolute)、相对定位(relative)、固定定位(fixed)

1>绝对定位:

position: absolute

使元素脱离文档流,然后使用left、righ、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

2>相对定位:

position: relative

通过lef等属性确定元素在正常文档流中的偏移位置。左上角为坐标原点。

元素偏移,但是偏移前的位置保留不动,覆盖不了前面的div没有偏移前的位置。

3>固定定位:

position: fixed

和absolute类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。

由于视图本身是固定的,不会随浏览器窗口的滚动条滚动而变化。

除非屏幕中移动浏览器窗口的屏幕位置,或者改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。

>relative和absolute组合使用:父元素是relative/absolute,定位元素使用absolute。  

  

CSS——布局模型

标签:

原文地址:http://www.cnblogs.com/congyue-pepsi/p/5671506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!