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

在清楚了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停止运行问题1_layout布局xml问题

    好好的写了300多行布局文件代码,写完之后运行结果,停止运行了.我当时就奇怪,xml有错误应该会提示啊,我就一个一个的缩小错误的代码范围,先直接换成一个简单的TextView ,运行一下没有错误.再慢 ...

  2. 测试webAPP时图标背景一片黑色

    写了个web小程序,打包成APP后安装到手机里,在魅族手机里显示是正常的,但是在EMUI和MIUI中却显示一片黑色,搞了半天才发现原来是因为EMUI会自动给应用的图标裁剪圆角并加上背景色,背景色是系统 ...

  3. Linux下安装php加速软件Xcache

    Nginx网站根目录:/usr/share/nginx/html 1.安装xcache cd /usr/local/src #进入软件包存放目录 wget http://xcache.lighttpd ...

  4. My安卓知识5--百度地图api的使用，周边信息检索

    虽然查了很多资料,但是这个问题还是解决不了,不知道为什么检索城市内的相关信息能用,检索周边信息语句就是用不了.代码如下,第一段是检索保定市内的加油站,第二段是检索周边的加油站.centerToMyLo ...

  5. Markdown 基本入门使用

    http://www.appinn.com/markdown/ markdown快速入门Markdown 常用语法: # 标题 强调:用星号(*)和底线(_)作为标记强调字词的符号,如果你的 * 和 ...

  6. CString 字符串截取_函数

    CString res;CString str = _T("abcdefghijklmn"); res = str.Mid(2,3);  //从第3位字母开始,共取3个字符ASSE ...

  7. 引入Ember插件 大概流程

    引入Ember插件 xxx (转自美女同事 LZX) 1.ember install xxx(过程中可能会提示你安装其他包 按照提示语安装就行)   2.安装之后会看到 工作目录里已经出现了下载好的安 ...

  8. 从多列的DataTable里取需要的几列(转)

    方法一: 也是广为人知的一种: YourDataTable.Columns.Remove("列名"); 但是这种情况只适合于去掉很少列的情况. 如果有很多列我却只要一两列呢,那就得 ...

  9. vue2 上传图片

    <template> <div class="vue-upload-img-multiple"> <div v-if="images.len ...

  10. （python）对象的引用

    对比下列两个例子: 例子1: a=10 b=a a=a+2 print "a=",a,"b=",b 结果:a= 12 b= 10 a+2后,b仍然是10 例子2 ...