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

在清楚了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. JDBC获取sql server存储过程查询结果集（没有出参）

    对于一些较为复杂的统计条件查询,可以通过存储过程来实现,既可以提高效率,减少网络流量,也可以避免sql语句耦合在代码中.但是存储过程返回的结果集如何获取(类似表数据),却着实让我费劲心力. 如下: C ...

  2. node.js 基础学习笔记3 -express

    1.工作原理 当通过app.js建立的服务器时,会看到一个简单的页面.返回页面时,浏览器会向服务器发送请求.app会解析请求的路径,调用相应的逻辑,调用对应的视图模板,传递对象数值,最终生成HTML页 ...

  3. Java（类与对象）

    1>对象判等 请输入并运行以下代码,得到什么结果? public class Test { public static void main(String[] args) { // TODO Au ...

  4. WIN32_LEAN_AND_MEAN宏

    网上说: 不加载MFC所需的模块. 用英语解释:Say no to MFC 如果你的工程不使用MFC,就加上这句,这样一来在编译链接时,包括最后生成的一些供调试用的模块时,速度更快,容量更小. 我们经 ...

  5. Python模块：PIL

    PIL:是Python Image Library的缩写,图像处理的模块.Image,ImageFont,ImageDraw,ImageFilter Image模块: 常用方法: open() #打开 ...

  6. sublime插件 cssComb实现css自动排序及格式化

    cssComb是一个实现css代码自动排序,当然顺便也实现了代码的格式化 安装: 首先需要打开sublime搜索安装csscomb插件(前提是已经安装了sublime的package control) ...

  7. MVc Forms Membership rolemanage 角色权限验证管理

    Forms  登录验证Membership 权限验证rolemanage 角色管理 以往的项目中只有单纯的Forms 验证今天想把这三个结合到mvc 中发现要导入aspnet_ 相关表,但是有个问题验 ...

  8. NSLock线程锁的使用测试

    测试1:NSLock线程锁是不是单例? 打印: 结论1:NSLock不是单例 测试2:同一个线程锁在不同的地方锁定,是否会有锁定两个? 打印为: 结论2:顺序打印,在不同的地方锁定也可以锁定. 测试3 ...

  9. android Handler机制详解

      简单运行图:    名词解析: Message(消息):定义了一个包含描述以及随意的数据对象可以被发送到Hanlder的消息,获得消息的最好方法是Message.obtain或者Handler.o ...

  10. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...