CSS三个定位——常规、浮动、绝对定位
.dage { width: 868px; background: #5B8C75; border: 10px solid #A08C5A; margin-top: -125px; margin-left: -20px }
#topics .postTitle a { color: #f5f5f5; margin-left: 170px }
#MySignature { font-size: 23px; color: #169FE6; font-weight: bold }
#cnblogs_post_body p { margin: 10px auto; color: white }
.nr { margin: 10px }
.title { color: #ffffff }
常规流,普通流,文档流
正常的常规流显示方式如下

按正常对应的元素特点显示、行内元素占一行,块级元素占一行或多行。
大哥二弟三弟按块级元素从上至下依次排列。这是常规流。
浮动
顾名思义,浮动就是漂浮在常规流的上方。作用:解决实现一行放多个盒子(常规下一个盒子只占一行,多个盒子占多行),并且盒子的可控性强。
浮动的特性:浮动后的元素在排序的时候会以上对齐。
float:left;

大哥没有浮动、所以会以二弟所处的位置对齐。
浮动不会影响标准流,标准流还是在原来的位置。这里四弟没有浮动设置的高很大,上面一小行被大哥他们给盖住了,但是四弟是整整占了这一大行的。其它三个弟在浮动在它身体上面。
所以 浮动会覆盖在标准流上面。


浮动排序规则
当有多个浮动和不浮动的盒子一起出现在页面时、 浮动的盒子会找浮动的盒子对齐,不浮动的找不浮动的按常规流对齐。
浮动会改变元素显示方式——会将元素的显示方式改为:inline-block;
left和right只会影响前面浮动元素排列的位置,在同一位置浮动的元素有多个,那么左浮动会找左浮动,右浮动找右浮动。
浮动是以什么为位置为基准进行浮动的?
如果找不到浮动的元素,以标准流的形式进行解析
找到浮动的元素,以浮动的规则解析。浮动后元素所在的位置是它所在标准流的位置它会覆盖标准流。
绝对定位
CSS三个定位——常规、浮动、绝对定位的更多相关文章
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- CSS三种定位机制
标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...
- css背景图定位和浮动
网站图标引入:<link rel="shortcut icon" href="ico图标地址"> 背景图片 background-image: u ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3与页面布局学习笔记(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、垂直居中
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- (转载)CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
随机推荐
- 初识Hadoop、Hive
2016.10.13 20:28 很久没有写随笔了,自打小宝出生后就没有写过新的文章.数次来到博客园,想开始新的学习历程,总是被各种琐事中断.一方面确实是最近的项目工作比较忙,各个集群频繁地上线加多版 ...
- 从源码看Azkaban作业流下发过程
上一篇零散地罗列了看源码时记录的一些类的信息,这篇完整介绍一个作业流在Azkaban中的执行过程,希望可以帮助刚刚接手Azkaban相关工作的开发.测试. 一.Azkaban简介 Azkaban作为开 ...
- sublime常用快捷键
自己觉得比较实用的sublime快捷键: Ctrl + / ---------------------注释 Ctrl + 滚动 --------------字体变大/缩小 Ctrl + N----- ...
- C#基础篇 - 理解委托和事件
1.委托 委托类似于C++中的函数指针(一个指向内存位置的指针).委托是C#中类型安全的,可以订阅一个或多个具有相同签名方法的函数指针.简单理解,委托是一种可以把函数当做参数传递的类型.很多情况下,某 ...
- virtualbox linux虚拟机相关
linux虚拟机设置为静态IP 在virtualbox中安装好linux虚拟机后,如果采用的是NAT方式的话,linux虚拟机默认采用dhcp方式自动上网,而且用的是NetworkManager服务而 ...
- spring源码分析之@ImportSelector、@Import、ImportResource工作原理分析
1. @importSelector定义: /** * Interface to be implemented by types that determine which @{@link Config ...
- 【NLP】干货!Python NLTK结合stanford NLP工具包进行文本处理
干货!详述Python NLTK下如何使用stanford NLP工具包 作者:白宁超 2016年11月6日19:28:43 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的 ...
- Android实现TCP断点上传,后台C#服务实现接收
终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现,因为大多实现过断点下载.但稳定性不能保证, ...
- ASP.NET Core 中文文档 第四章 MVC(4.1)Controllers, Actions 和 Action Results
原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...
- ResponsibleChain(责任链模式)
/** * 责任链模式 * @author TMAC-J * 老板讲任务交给CTO,CTO自然不会亲自去做,又把人物分配给项目经理,项目经理再把任务分配给组长,组长再分配给个人 * 如果中途哪个环节出 ...