---恢复内容开始---

在清楚了CSS盒模型的基本概念，盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是CSS最基本，最核心的概念。但布局模型是建立在盒型基础之上，又不同于我们常说的CSS布局样式或CSS布模板。如果说布局模型是本，那么CSS布局模板就是末了，是外在的表现形式。

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer、Float。

在网页中，元素有三种布局模型：

1，流动模型（Flow）

2，浮动模型（Float）

3，层模型（Layer）

一、流动模型

流动是默认的网页布局模式。也就是说见面在默认状态下的HTML网页元素都是根据流动模型分布网页内容的。

流动布局模型具有2个比较典型的特征：

1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。

2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示.

二、浮动模型

在流动模型中，块状元素是自上而下的，那么有什么方法可以让块状元素并排呢，这就需要使用CSS样式。

如下代码：

<html>

<head>
<style>

div{

    width:200px;

    height:200px;

    border:1px red solid;

    float:left;

}
</style>

</head>

<body>

    <div><p>123</p></div>

</body>

</html>

此代码将div标签从左到右显示，那么，如何从右向左或者一左一右呢？

那么我们应当改写代码：float:right

层模型:

在讲层模型前,先问个问题,什么是层布局模型?层布局模型就像是图像软件PS中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网页上局部使用层布局还是有其方便之处的.下面我们来学习一下html中的层布局.

如何让html元素在网页中精确定们,就像图像软件PS中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)忏悔来支持层布模型.

层模型有三种形式:

1.绝对定位(position:absolute)

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left,top,right,bottom属性相对于其最接近的一个具有定位属性的你包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口.

如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px.

<html>

<head>

<style>

div{

width:200px;

height:200px;

border:2px red dashed;

position:absolute;

left:100px;

top:50px;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

2.相对定位(position:relative)

如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程是首先按static(float)方式生成了一个元素(并且元素像层一样浮动了起来,然后相对于以前的位置移动,移动的方向和幅度由left,right,top,bottom属性确定,偏移的位置保留不动.

如下代码实现相对于以前位置向下移动50px,向右移动100px.

<html>

<head>

<style>

#div1{

width:200px;

height:200px;

border:2px red solip;

position:relative;

left:100px;

top:50px;

}

</style>

</head>

<body>

<div id="div1"></div>

</body>

</html>

什么叫做"偏移前的位置保留不动"呢?

大家可以做一个实验,在右侧代码编辑器的19行div标签的后面加入一个span标签,在标并在span标签中写入一些文字.如下代码:

<body>

<div　id="div1"></div><span>123</span>

</body>
我们发现,虽然div元素相对于以前的位置产生了偏移,但是div元素以前的位置还是保留着,所以后面的span元素是显示在了div元素以前位置的后面.

3.固定定位(position:flxed)

fixed:表示固定定位，与absolute定位类型类似，但他的相对移动人坐标是视图本身。由于视图本身是固定的，他不会随你浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动的影响，这与background-attachment:fixed;属性相同，以下文档可以实现对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变

<html>

<head>

<style>

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

left:100px;

top:50px;

}

</style>

</head>

<body>

<div>123</div>

</body>

</html>

　　

position:absolute and position:relative差别

absolute是指绝对的，不受控件的影响，而relative却是相对的，随着控件的变化而变化。若是想要把relative和absolute相互结合也是可以的，如下代码：

<html>

<head>

<style>

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

}

#div2{

width:200px;

height:200px;

border:2px red solid;

position:relative;
bottom:0px;

}

</style>

</head>

<body>

<div id="div1">123</div>

<div id="div2">123</div>

</body>

</html>

　这样的话div2就在div1底部的上方了。

css布局模型的更多相关文章

  1. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  2. 浅析css布局模型1

    css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...

  3. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  4. 从零开始学习前端开发 — 6、CSS布局模型

    一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...

  5. 从零开始学习html（十二）CSS布局模型——上

    一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...

  6. CSS布局模型学习

    转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习   参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...

  7. CSS 布局模型

    css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...

  8. 前端之CSS布局模型

    一.css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...

  9. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

随机推荐

  1. Android之RecyclerView(一)

    概述 RecyclerView 是一个 ViewGroup,它用于渲染任何基于适配器的 View.它被官方定义为 ListView 和 GridView 的取代者,是在 Support V7 包中引入 ...

  2. jQuery实现折叠下拉效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. [刘阳Java]_快速搭建MyBatis环境_第2讲

    1.MyBatis的环境配置 导入MyBatis包, mybatis-3.2.8.jar 导入MySQL驱动包, mysql-connector-java-5.1.24-bin.jar 创建表的实体类 ...

  4. [转] AIX lv 4k偏移量

    转自:http://www.aixchina.net/Question/29969 前几天在客户数据库做巡检的时候,在警告日志中发现有如下警告:引用WARNING: You are creating ...

  5. svchost占用cpu

    发现有一个svchost始终占用cpu. 查看任务管理器PID列,在tasklist /svc中查找相关列,对应若干服务. 一个一个检查这些服务,确认是windows update服务引起,停止win ...

  6. HTML超标记语言

     Html超文本标记语言,负责描绘Web世界的骨架. 〇.工具 http;//www.w3cchool.com.cn 一.Tim Bemers Lee 万维网之父: Html设计者: W3C创始人: ...

  7. js面向对象，多种创建对象方法！

    1.对象字面量. var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(this.hour+":&quo ...

  8. H5学习系列之Geolocation API

    获取位置信息途径: 1.IP地址地理定位数据 2.GPS地理定位数据 3.WI-FI地理定位数据 4.手机地理定位数据 无废话直接上重点:navigator.geolocation对象就是获取地理位置 ...

  9. 设置secureCRT支持中文

    将options菜单下面的session options 中的 appearance 标签页里面的 character encoding 选择UTF-8就可以.

  10. 父窗口，子窗口之间的JS"通信"方法

    今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求. 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对 ...