浅谈CSS布局
在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布局的更多相关文章
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 浅谈 Qt 布局那些事
Qt 布局那些事是本文介绍的内容,直接进入主题.GridLayout是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout有两 ...
- [浅谈CSS核心概念] CSS布局模型:float和position
1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...
- 浅谈CSS模块化
为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...
- 浅谈CSS盒子模型
[摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...
- 细谈CSS布局方式
一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...
- 浅谈css的栅格布局
栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
随机推荐
- Mad Lib程序
单选框 复选框 按钮 标签 文本框的应用 #coding=utf-8 __author__ = 'minmin' from Tkinter import * class Application ...
- 使用PHP把下划线分隔命名的字符串 转换成驼峰式命名方式 , 把下划线后面的第一个字母变成大写
最近项目使用symfony框架,这个框架对数据库的操作在这个团队里使用的是ORM进行操作,说实话使用ORM的开发效率和运行效率不一定高多少,到是它的实体命名和现有数据库字段的命名不太一样,ORM实体属 ...
- php 配置文件
<?php return array( 'TMPL_L_DELIM'=>'<{', //配置左定界符 'TMPL_R_DELIM'=>'}>', //配置右定界符 'DB ...
- 调用Android自带日历功能(日历列表单、添加一个日历事件)
调用Android自带日历功能 觉得这篇文章不错,转载过来. 转载:http://blog.csdn.net/djy1992/article/details/9948393 Android手机配备有 ...
- C模块回调Lua函数的两种方法
作者:ani_di 版权所有,转载务必保留此链接 http://blog.csdn.net/ani_di C模块回调Lua函数的两种方法 lua和C通过虚拟栈这种交互方式简单而又可靠,缺点就是C做栈平 ...
- OpenStack里的浮动ip
缺省情况下实例会被赋予固定ip,这时并不能保证实例会马上可以从外面访问到,一般来说需要配置防火墙来允许公共ip,然后建立一条NAT规则从公共ip到私有ip的映射.OpenStack引入了一个叫浮动ip ...
- hdu acm 2154(多解取一解)
//题目中结果有一条限制就是最后必须跳回A,如果我们的思想框在这个条件上就很容易卡住,因为这样的条件下的路径很难有规律的罗列,然而我们说这个图形中有三个区域,我们算出每个区域的第n-1次的种类数,然后 ...
- 转-——推荐几个web中常用的一些js图表插件 - zccst
http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...
- Java中单态设计模式
Java中单态设计模式 2011-09-23 16:38:46| 分类: Java | 标签:technology! |举报|字号 订阅 此博文是转自新浪博客中一名叫做"俊俊的 ...
- codeforces 609F. Frogs and mosquitoes 二分+线段树
题目链接 F. Frogs and mosquitoes time limit per test 2 seconds memory limit per test 512 megabytes input ...