1.文档流
简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)不独占一行。
一般使用margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“距离”。只要不是float和绝对定位方式布局的,都在文档流里面。
2.position属性介绍
3.相对定位
relative生成相对定位的元素,相对于其正常位置进行定位。
相对定位完成的过程如下:
按默认方式(static)生成一个元素(并且元素像层一样浮动了起来)。相对于以前的位置移动,移动的方向和幅度由 left、right、top、bottom 属性确定,偏移前的位置保留不动。
<style type="text/css"> #box1 { margin: 20px; width: 200px; height: 200px; background-color: yellow; } #box2 { margin: 20px; width: 200px; height: 200px; background-color: red; /*position: relative; left: 100px; top: 100px;*/ } </style> <div id="box1"></div> <div id="box2"></div>
其中box2中的注释代码未生效前,是按照文档流进行排序呈现。
但是,当注释代码取消注释生效后,就会相对文档流中应当呈现的位置进行移动。
所以,相对定位的参照物是它本身。
4.绝对定位
绝对定位与相对定位的一大不同之处就是,当我们把一个元素设置成绝对定位,那么这个元素将会脱离文档流,其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置,而参照物则需要根据它祖先元素的定位设置来确定。
所谓根据它祖先元素的定位设置来确定简单理解为:相对于该元素最近的已定位的祖先元素,如果没有一个祖先元素设置定位,那么参照物是body层。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联...
作者 / Krish Vitaldevara,Google Play 信任与安全产品管理总监 多年来,向数十...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个...
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对C...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...
打开软件,我们按快捷键ctrl+n,建立一个新的文件。 点击常用,选择布局。 点击...
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...