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

在清楚了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 7.0 UICC 分析(三)

    本文讲解UICCCardApplication /frameworks/opt/telephony/src/java/com/android/internal/telephony/uicc/UiccC ...

  2. Linux下查看IP的命令：ifconfig -a

    按照指南实践,在NFS挂载测试和tftp服务器架设时,均需用到本机的IP地址,怎么查看呢? 很简单,键入命令:ifconfig -a 这个命令具体是怎么定义的呢?有时间再查阅,先跑遍指南.

  3. cvInRangeS函数演示

    camshift算法中,用到了cvInRangeS函数,作为初学者,对这个函数很不理解,所以就写了个程序演示效果,加强理解. 代码: #include "cv.h" #includ ...

  4. dedecms内容管理系统学习

    在复习完基础知识和学习了tp3.2之后,我们开始学习一些开源的产品,如dedecms:

  5. C# 在winform或者wpf中显示控制台窗口

    这儿需要使用两个系统函数: BOOL WINAPI FreeConsole(void); //// 关闭控制台窗口,参考:http://msdn.microsoft.com/en-us/library ...

  6. [12]APUE：高级 I/O

    一.分散聚离(向量) I/O [a] readv / writev #include <sys/uio.h> ssize_t readv(int fd, const struct iove ...

  7. 深入研究C语言 第一篇

    一． 研究过程 1.第一章:创建编译环境: 我们首先下载TC2.0,找到其中与编译连接相关的程序和文件: (1) 编译器:TCC.exe (2) 连接器:tllike.exe (3) 相关文件:c0s ...

  8. css3小总结

    一.边框 1.border-radius:x,y,模糊半径,color(x为负数时左移动,y为负数是上移动) 2.box-radius:x,y,模糊半径,阴影半径,color 3.border-ima ...

  9. depot用例视图建模

    1. 确定系统涉及的内容 图书馆管理系统有以下模块构成:系统登陆模块.图书馆管理模块.学生管理模块.借阅信息管理模块.图书检索模块. 2. 分析系统参与者 确定参与者首先分析系统涉及的问题领域 和 系 ...

  10. （转）C语言16进制输出字符型变量问题

    最近在做一个C的嵌入式项目,发现在C语言中用printf()函数打印字符型变量时,如果想采用"%x"的格式将字符型变量值以十六进制形式打印出来,会出现一个小问题,如下: char  ...