CSS布局模型详解

《CSS布局模型详解》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、精品课程千锋教育www.qfedu.com全程面授CSS布局模型详解CSS是一门计算机语言，它是网页的外衣，页面好不好看全凭CSS样式，而布局模型和定位技术是CSS中比较重要的部分，是页面布局的核心技术，不论是常见的PC端页面，还是移动端页面都离不开我们的布局模型和定位技术。CSS包含3种基本的布局模型:1、流动模型（Flow）；2、浮动模型(Float)；3、层模型（Layer）；一、流动模型（flow）流动模型（Flow）是默认的网页布局模式，也就是网页在默认状态下HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型

2、有两个比较典型的特点:第一点：在默认状态下块状元素都会自上而下的分布，独占一行，块状元素的宽度都为100%，两个相邻的块元素会在不同行显示，常见的块状元素有：div,p,ul,ol,li,h1-h6，table等。如下代码是流动模型下多个块元素的代码。千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图：第二点:在流动模型下，内联元素都会从左到右水平分布显示,常见的内联元素有：a,span,b,strong,i,em,del,img,input,textarea等。如下代码是流动模型下多个内联

3、元素的代码结构。千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图:二、浮动模型（float）浮动模型是完全不同于流动模型的另一种布局模型，它遵循浮动规则，同样流动模型仍对它有潜在影响。为什么会有浮动模型呢？块状元素独占一行，如果在我们的页面布局里想让两个或两个以上的块状元素并排显示，怎么办呢？设置元素浮动就可以实现这一效果。任何元素在默认情况下是不能浮动的，但可以通过CSS定义为浮动，如div、h1、P、table等元素都可以被定义浮动。如下代码可以实现两个div元素在同一行显示的效果。千

4、锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图：同样我们也可以同时设置两个元素右浮动来实现多个元素一行显示的效果；千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图：换另一种方法，我们也可以设置两个元素的一左一右浮动来实现两个或两个以上的元素在一行显示的效果；千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图：三、层模型（Layer）层布局模型首先有个层的概念，像我们PhotoShop中的图层编辑功能一样，每千

5、锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授个图层能够精确定位操作，但在页面布局里，由于页面大小的活动性，层布局模型没能受到大面积的使用。但是在页面上的局部，使用层布局模型还是很常见的。说到层布局模型，就要说到定位的属性position。定位属性（position）的属性值有四种:1、默认值(position:static)静态定位，元素出现在正常的文档流中；2、绝对定位(position:absolute)；3、相对定位(position:relative)；4、固定定位(position:

6、fixed)；绝对定位：如果想为元素设置层布局模型中的绝对定位，需要设置position:absolute；这条声明的作用是将元素从文档流中拖离出来，然后使用left、right、top、bottom属性相对于其最接近的一个并具有定位属性的父级包含块进行绝对定位。如果不存在这样的包含块，则相对于html根元素来做定位。如下面代码可以实现div元素相对于html根元素向右移动150px，向下移动100px。千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图:如果存在一个有定位设置的父级元素，那

7、么我们的绝对定位的元素会就会相对其最接近的一个并有定位设置的父级元素做绝对定位。如下面代码可以实现P元素相对于div元素向右移动50px，向下移动50px。千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图：千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授相对定位：如果想为元素设置层布局模型中的相对定位，需要设置position:relative；这条声明的作用是将元素在正常文档流中偏移位置，使用left、right、top、bottom属性相对于其元素自

8、身的以前的位置进行移动，但偏移前的位置保留不动。如下代码实现相对于元素自身以前位置向下移动100px，向右移动100px;千锋教育-中国IT职业教育领先品牌精品课程千锋教育www.qfedu.com全程面授效果图：千锋教育-中国IT职业教育领先品牌