在No.4中谈及了下盒子模型,引出布局模型

1、布局模型有三类:

1)流动模型  flow(默认)

2)浮动模型  float

3)层模型  layer

2、文档流 :指的是文本沿着从左到右的方向展开,就像流的形式

脱离文档流指的是一个元素脱离文档流之后,其他元素在定位的时候会当作没发现它,两者的位置重叠都是可以的

HTML的布局机制就是用文档模型的,即块元素独占一块

3、对于CSS的浮动float问题 查阅一些资料解释 弄清楚了些  先加个链接 这个对浮动问题总结的比较好http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

浮动就是脱离文本流,独立于原来的网页之上,浮动的内容就在文档流空间上空独立出来。

上面链接中提到了:

       div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是,远离页面边缘的一端是

所以注意有时候几个div右浮动,123的顺序显示出来却是321,这就是因为上面的原因

清除浮动问题  清除浮动式针对某个div自身设定的, 语法: clear : none | left | right | both

none  :  默认值。允许两边都可以有浮动对象

left   :  不允许左边有浮动对象

right  :  不允许右边有浮动对象

both  :  不允许有浮动对象

4、层模型 类似ps中的图层,对某个图层进行准确移动定位,层模型就可以对div模块进行准确的进行定位

定位的类型分为:

1)绝对定位 absolute    脱离文档流

2)相对定位   relative      不脱离文档流

3)固定定位 fixed

4)不定位   static     (默认)

今天先做个简单总结,随后补加详细分析

浅谈CSS布局的更多相关文章

  1. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  2. 浅谈 Qt 布局那些事

    Qt 布局那些事是本文介绍的内容,直接进入主题.GridLayout是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout有两 ...

  3. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  4. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  5. 浅谈CSS盒子模型

    [摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...

  6. 细谈CSS布局方式

    一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...

  7. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  8. 浅谈css中的盒模型(框模型)

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  9. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

随机推荐

  1. Mad Lib程序

    单选框  复选框  按钮  标签  文本框的应用 #coding=utf-8 __author__ = 'minmin' from Tkinter import * class Application ...

  2. 使用PHP把下划线分隔命名的字符串 转换成驼峰式命名方式 , 把下划线后面的第一个字母变成大写

    最近项目使用symfony框架,这个框架对数据库的操作在这个团队里使用的是ORM进行操作,说实话使用ORM的开发效率和运行效率不一定高多少,到是它的实体命名和现有数据库字段的命名不太一样,ORM实体属 ...

  3. php 配置文件

    <?php return array( 'TMPL_L_DELIM'=>'<{', //配置左定界符 'TMPL_R_DELIM'=>'}>', //配置右定界符 'DB ...

  4. 调用Android自带日历功能(日历列表单、添加一个日历事件)

    调用Android自带日历功能  觉得这篇文章不错,转载过来. 转载:http://blog.csdn.net/djy1992/article/details/9948393 Android手机配备有 ...

  5. C模块回调Lua函数的两种方法

    作者:ani_di 版权所有,转载务必保留此链接 http://blog.csdn.net/ani_di C模块回调Lua函数的两种方法 lua和C通过虚拟栈这种交互方式简单而又可靠,缺点就是C做栈平 ...

  6. OpenStack里的浮动ip

    缺省情况下实例会被赋予固定ip,这时并不能保证实例会马上可以从外面访问到,一般来说需要配置防火墙来允许公共ip,然后建立一条NAT规则从公共ip到私有ip的映射.OpenStack引入了一个叫浮动ip ...

  7. hdu acm 2154(多解取一解)

    //题目中结果有一条限制就是最后必须跳回A,如果我们的思想框在这个条件上就很容易卡住,因为这样的条件下的路径很难有规律的罗列,然而我们说这个图形中有三个区域,我们算出每个区域的第n-1次的种类数,然后 ...

  8. 转-——推荐几个web中常用的一些js图表插件 - zccst

    http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...

  9. Java中单态设计模式

    Java中单态设计模式 2011-09-23 16:38:46|  分类: Java |  标签:technology!  |举报|字号 订阅     此博文是转自新浪博客中一名叫做"俊俊的 ...

  10. codeforces 609F. Frogs and mosquitoes 二分+线段树

    题目链接 F. Frogs and mosquitoes time limit per test 2 seconds memory limit per test 512 megabytes input ...