css布局模型在网页中,元素有三种布局模型:

  1. 流动模型(Flow)
  2. 浮动模型 (Float)
  3. 层模型(Layer)

流动Flow模型(一):

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

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

  • 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。除非设置该元素宽度。
  • 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

流动flow模型(二)

任何元素在默认情况下是不能浮动的,让多个块状元素并排显示,float:left;就可以实现。下图是一左一右。

层模型layer

  • 层模型有三种形式:
  1. 绝对定位(position: absolute):使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如图所示:
  2. 相对定位(position: relative)相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
  3. 固定定位(position: fixed)。fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

    

Relative与Absolute组合使用

  • 决定定位absolute是根据浏览器设置定位的,可以结合相对定位relative来实现相对于某个块元素决定定位。需要决定定的块元素需要{position:absolute;left: ;top:;right: ;bottom: ;},在决定定位的父元素需要{position:relative;}即可。

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

  1. CSS ? Layout Module : CSS 布局模型

    1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...

  2. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  3. CSS布局

    1流动模型 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块 ...

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

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

  5. 熟悉HTML CSS布局模型

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

  6. css布局模型

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

  7. CSS布局(下)

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

  8. 浅析css布局模型1

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

  9. CSS布局一

    CSS布局一 实例一(居中) div#container{ width:960px; height:650px; margin:0 auto; border:1px solid #ccc; /*就是说 ...

随机推荐

  1. Render OpenCascade Geometry Curves in OpenSceneGraph

    在OpenSceneGraph中绘制OpenCascade的曲线 Render OpenCascade Geometry Curves in OpenSceneGraph eryar@163.com ...

  2. Abp公共连接和事务管理方法

    Conection 和事务管理在使用数据库的应用中是一个最重要的概念.当你打开一个连接,开始一个事务,如何来处理这些连接等等. 您也许知道,.NET使用了连接池.所以,创建一个连接实际上是从连接池里得 ...

  3. 编写可编辑的List控件

    今天由于项目的需要,要编写个能编辑的List控件,即双击List控件的表项能修改其中的内容.由于MFC自带的List控件是不能编辑的,所以在网上找了下怎样编写可编辑的CListCtrl控件,基本上都是 ...

  4. Unity3D默认的快捷键

    shift +方向键             向“向方向键前进” Windows系统Unity3D中的快捷键 组合键 键 功能 File 文件 Ctrl   N New Scene 新建场景 Ctrl ...

  5. [c++] STL = Standard Template Library

    How many people give up, because of YOU. Continue... 先实践,最后需要总结. 1. 数据流中的数据按照一定的格式<T>提取 ------ ...

  6. 动态单链表的传统存储方式和10种常见操作-C语言实现

    顺序线性表的优点:方便存取(随机的),特点是物理位置和逻辑为主都是连续的(相邻).但是也有不足,比如:前面的插入和删除算法,需要移动大量元素,浪费时间,那么链式线性表 (简称链表) 就能解决这个问题. ...

  7. HTML5移动Web开发(十)——在浏览器中启动手机原生应用

    用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...

  8. Linux 内存管理

    查看Linux内存使用情况 free -m Linux内存清理:绝大多数情况下都不需要此操作,因为cache的内存在需要的时候是可以自动释放的- 最好先sync几次,再清理内存,有下面三个级别,数值越 ...

  9. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  10. C#日期格式转换

    DateTime dt = DateTime.Now; // Label1.Text = dt.ToString();//2005-11-5 13:21:25 // Label2.Text = dt. ...