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- ...
随机推荐
- Unity3d学习 预设体(prefab)的一些理解
之前一直在想如果要在Unity3d上创建很多个具有相同结构的对象,是如何做的,后来查了相关资料发现预设体可以解决这个问题! 预设体的概念: 组件的集合体 , 预制物体可以实例化成游戏对象. 创建预设体 ...
- [linux]阿里云主机的免登陆安全SSH配置与思考
公司服务器使用的第三方云端服务,即阿里云,而本地需要经常去登录到服务器做相应的配置工作,鉴于此,每次登录都要使用密码是比较烦躁的,本着极速思想,我们需要配置我们的免登陆. 一 理论概述 SSH介绍 S ...
- HTML中上传与读取图片或文件(input file)----在路上(25)
input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...
- 在线浏览PDF之PDF.JS (附demo)
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...
- ExtJS 4.2 业务开发(一)主页搭建
本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...
- iOS逆向工程之Reveal工具的安装、配置与使用
今天博客内容比较简单,不过还是蛮重要的.经常有小伙伴在QQ上私下问我,说博客中是如何使用Reveal查看AppStore中下载应用的UI层级的,那么就在今天这篇博客中作为一个主题来统一的介绍一下吧.虽 ...
- Spring中Bean的作用域、生命周期
Bean的作用域.生命周期 Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).protot ...
- PHP相关代码
1 <html> <head> <meta http-equiv="content-type" content="text/h ...
- 机器指令翻译成 JavaScript —— No.7 过渡语言
上一篇,我们决定使用 LLVM 来优化程序,并打算用 C 作为输入语言.现在我们来研究一下,将 6502 指令转换成 C 的可行性. 跳转支持 翻译成 C 语言,可比 JS 容易多了.因为 C 支持 ...
- Spring6:基于注解的Spring MVC(上篇)
什么是Spring MVC Spring MVC框架是一个MVC框架,通过实现Model-View-Controller模式来很好地将数据.业务与展现进行分离.从这样一个角度来说,Spring MVC ...