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

在清楚了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. AFN中的PATCH 和 DELETE 请求方式

    - (nullable NSURLSessionDataTask *)PATCH:(NSString *)URLString parameters:(nullable id)parameters su ...

  2. c语言插入排序

    对于小规模输入,插入排序是一种非常快速的排序算法,且原理简单,结构紧凑. 插入排序的原理:从序列中第二个数A开始,将A,插入前面已经排好的序列中,形成一个新的排序好的序列,以此类推到最后一个元素. 参 ...

  3. 10个使用Java最广泛的现实领域

    10个使用Java最广泛的现实领域 如果你是一个初学者,刚刚开始学习Java,你可能会想Java有什么用呢?除了Minecraft貌似也看不到其他用Java写的游戏,像Adobe Acrobat和Mi ...

  4. 第五章 springboot + mybatis(转载)

    本编博客转发自:http://www.cnblogs.com/java-zhao/p/5350021.html springboot集成了springJDBC与JPA,但是没有集成mybatis,所以 ...

  5. [Note] changing building platform from vs 2013 to vs community 2015

    The error turned out as "undefined linkage"(The same as you haven't use some function that ...

  6. WinForm 使用 HttpUtility

    在 Visual C# 中使用 HttpUtility 是无效的,即使添加了命名空间 System.Web,是因为需要在引用中添加 System.Web.dll. 可是没有 System.Web.dl ...

  7. windows读取mac格式移动硬盘的方法

    本文记录了一些window与mac数据在移动设备上互相拷贝的经验. 一.准备 家里有一台mac电脑,限于硬盘空间比较小,需要定期备份一些数据. 由于备份数据大小在20G左右,并且并没有压缩为一个压缩文 ...

  8. Java和Ibatis调用存储过程并取得返回值详解

    Java和Ibatis调用存储过程并取得返回值详解 2011-07-19 17:33 jiandanfeng2 CSDN博客 字号:T | T 本文主要介绍了Java和Ibatis调用存储过程的方法, ...

  9. 百度地图开发 Android版应用Key申请

    一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http://lbsyun.baidu.com/apiconsole/key,自己自行注册一个百度账号, ...

  10. SQLServer : 几个特殊函数（RAND，CHECKSUM, NEWID）

    这一篇我们来捋捋在T-SQL中可能会用到的几个特殊的函数 1. 随机数: RAND 返回从 0 到 1 之间的随机 float 值. 语法: RAND ( [ seed ] ) seed 提供种子值的 ...