CSS之CSS的三种基本的定位机制(普通流,定位,浮动)
一、普通流
普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行,是行内元素就和其他元素共处一行,没什么好说的,该咋显示咋显示,一个萝卜一个坑。
二、定位
1、相对定位 (position:relative)
被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。例如: 设置元素 top:20px; left:20px; 那么框将出现在距原本元素顶部左侧各20px的地方。
如下图所示:对蓝框进行定位后,它仍占据原先的位置
2、绝对定位 (position:absolute)
绝对定位的元素位置是相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。 如果元素没有已定位的祖先元素, 那么它的位置相对于初始包含块。绝对定位的元素可以在它的包含块向上、下、左、右移动。
与相对定位相反, 绝对定位使元素与文档流无关, 因此不占据空间。 普通文档流中其他的元素的布局不受绝对定位元素的影响。
如下图所示:对蓝框定位后, 它下面的元素上移占据了蓝框原本的位置, 仿佛蓝框不存在一般。
由于绝对定位的元素脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。
需要注意的是:
绝对定位在大多数现代浏览器中实现得很好, 但是在IE5.5与IE6中有一个bug。 如果要设置绝对定位元素的right或bottom, 那么需要确保它的"最近的相对定位的祖先元素"已经设置了尺寸。 如果没有, 那么IE会错误的相对于初始包含快(画布)定位这个元素。 简单的解决办法 就是给相对定位的元素设置尺寸。 或者尽量使用 top/left定位。
3、固定定位 (position:fixed)
相对于浏览器窗口,其余的特点类似于绝对定位。
三、浮动
浮动的元素可以在左右移动,直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。浮动的元素脱离普通流。如果包含块太窄,无法容纳水平排列的浮动元素,那么其他浮动元素向下移动,直到有足够多的空间。如果浮动元素的高度不同,那么当它们向下移动时可能会被其他浮动元素卡住。行内元素会围绕着浮动框排列。
CSS之CSS的三种基本的定位机制(普通流,定位,浮动)的更多相关文章
- CSS选 择器 三种样式
一.CSS三种样式 代码 宽度 高度 实线 颜色 A内联样式是优先级最高的方式 px必须写 A:内联式 弊端:代码多很乱 <body> <div class="divc ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- js或css文件合并的三种方式推荐
源文档 <http://www.jb51.net/article/32834.htm> 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一 ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- CSS:概念和三种样式
简介: CSS(Cascading Style Sheets):层叠样式表,它用来控制HTML标签的样式,给网页结构穿衣服~ CSS的编写格式是键值对的形式 -> 格式:属性名 : 属性值: ...
- css引入页面的三种方法
1.内联式:直接在标签上写样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- [HTML/CSS]创建新元素的三种方法
第一种:通过text/HTML var txt1="<h1>Text.</h1>"; 第二种:通过jQuery var txt2=$("<h ...
- CSS定位——文档流定位
关于CSS的定位机制Ⅰ ㈠概念 对于盒子模型来说,也就是页面元素,这些盒子究竟在页面的什么位置,怎样排列它,那么找到它的位置,确定它的位置,这个就是定位机制所决定的. ㈡分类 文档流, 浮动定位,层定 ...
- 插入css样式表的三种方法
http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...
随机推荐
- 微信小程序--家庭记账本开发--03
组件.标签以及模板的使用 在一个微信小程序中,需要用到大量的组件,一些页面的设计也需要模板,在自己所学课程中,对于一些组件.标签模板的使用有了初步的了解. 1.组件 组件是数据和方法的简单封装,对于微 ...
- 项目之初的模型设计与status状态字段
0X01 开始做一个app的时候,要先做的是流程设计与数据库模型设计. 但做的模型设计往往是设置字段满足当前的需求,缺乏足够的经验,即使为以后的功能预留出位置,也无法考虑周全. 比如,刚开始做用户表, ...
- python面试必问 知识整理
一 数据类型 1 数字 整型与浮点型 #整型int 作用:年纪,等级,身份证号,qq号等整型数字相关 定义: age=10 #本质age=int(10) #浮点型float 作用:薪资,身高, ...
- SQLServer 2014 内存优化表
内存优化表是 SQLServer 2014 的新功能,它是可以将表放在内存中,这会明显提升DML性能.关于内存优化表,更多可参考两位大侠的文章:SQL Server 2014新特性探秘(1)-内存数据 ...
- 动态规划——Valid Permutations for DI Sequence
We are given S, a length n string of characters from the set {'D', 'I'}. (These letters stand for &q ...
- 关于在虚拟机上安装ubuntu输入不了中文的问题
打开终端后,无法输入中文,按照网络上的教程 1.安装语言包 System Settings–>Language Support–>Install/Remove Languages 选中ch ...
- Java 获取当前日期的几种方法
import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calendar; import ja ...
- Java_String
整理一下java中关于String的内容.Spring应该是java中使用最频繁的类了,那么今天我们仔细研究下关于Spring的内容. 定义: String类是一个字符串类型的类,使用" ...
- 利用PIL和Selenium实现页面元素截图
预备 照张相片 selenium.webdriver可以实现对显示页面的截图: from selenium import webdriver dr = webdriver.Firefox() dr.g ...
- javascript的数组之map()
map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的回调函数后返回的结果.新数组 // ES6 let numbers = [1, 5, 10, 15]; let doubles ...