对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制。

  position:static | relative | absolute | fixed

  适用于:除 <' display '> 属性定义为「table-column-group | table-column」之外的所有元素。

  继承性:无。

  归类总结一下定位的四种属性特点:

  

  绝对定位:

  1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的。

  2:盒子嵌套的时候,如果父盒子设置了定位,那么子盒子是以父盒子左上角为基准设置定位的。如果父盒子没有设置定位,那么子盒子以浏览器左上角为基准设置定位的。

  3:设置了绝对定位的盒子,不占原来的位置。

  4:设置了绝对定位的盒子可以实现模式的转换)

  相对定位:

  1:以自己左上角为基准设置定位。

  2:相对定位占原来的位置

  3:相对定位不能实现模式的转换

  4:子绝父相(子元素设置绝对定位,父元素设置相对定位))

  固定定位(1:固定定位不占位置;

  2:可以实现模式的转换;

  3:以浏览器为基准进行定位;

  4:在屏幕上的位置固定不动。

  静态定位:(元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

  尤其有一点要说明的是z-index:设置元素的堆叠顺序,只有设置了绝对定位或者相对定位的元素才会使z-index的值起作用。

  那么定位和浮动又有什么关系和区别呢?

  首先,定位和浮动都会使元素脱离标准文档流,定位往往会更加精确的使元素在某个特定的区域显示,而浮动则会有许多不确定性。这些不确定性往往会使页面产生一下超出我们预期范围的影响。

  而且浮动往往是针对网页中盒子布局的时候使用,或者在li标签中。定位往往针对的是某个具体的元素或者块。

  总而言之,不管白猫黑猫能够抓到老鼠的就是好猫,所以,不管浮动还是定位,能够达到预期效果的都是可取的。所以要多看多写代码,将这些结构布局熟记于心,才能更加流畅的运用。

  

CSS中定位机制的想法的更多相关文章

  1. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

  2. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  3. css中定位

    一切皆为框div.h1或p元素尝尝被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和strong等元素称为“称为”行内元素“,这是因为他们的内容显示在行中,即”行内框“. ...

  4. CSS中定位position

    毋庸置疑的是,pisition是css中是最重要的属性之一. 一共有四种定位方式,static.relative.absolute.fixed. 默认的定位方式static 页面中所有的元素默认都是s ...

  5. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  6. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  7. css中定位功能的特性

    它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...

  8. CSS 中定位方式有几种,说明他们的意义

    1.static  默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位)  他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...

  9. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

随机推荐

  1. double四舍五入,商品金额大小写转换,设置货币的小数位数跟格式输出,进制转化

      1:计算double值四舍五入的方法 对小数数值进行四舍五入,首先应该确认保留小数位, 如果数值的小数精度大于保留小数位,那么开始四舍五入计算.四舍五入的方法非常简单,在所有要丢失精度的小数位中加 ...

  2. 初级Bug率,随时受不了

    一听到初级Bug这个名字,很多开发工程师都会觉得很头痛,还有那个“初级Bug率”,让人随时受不了. 初级Bug这个概念,在多数缺陷跟踪工具中,是不存在的,可以说是淘宝研发部的特色.初级Bug对应Bug ...

  3. C#调用java类、jar包方法(转)

    一.将已经编译后的java中Class文件进行打包:打包命令JAR 如:将某目录下的所有class文件夹全部进行打包处理: 使用的命令:jar cvf test.jar -C com/ . 其中tes ...

  4. 向架构师进军--->如何编写软件架构文档

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 问:为什么要编写软件架构文档,它的好处是什么? 答: 有文档的架构有助于不同利益相关 ...

  5. 使用Fluent配置表关系

    转载MS官方文档:https://msdn.microsoft.com/zh-cn/data/jj591620 Configuring Relationships with the Fluent AP ...

  6. tp框架总结(四)

    一 ajax的返回 调用实例: $this->ajaxReturn(返回数据,提示信息,操作状态); $this->ajaxReturn(返回数据,‘json’); js: <scr ...

  7. JTAG 学习 -SVF格式

    yxr注: 主要zt,附上自己的心得如下: 1)反观SVF文件,除了设置必要的条件之外(初始条件和TIR等四条命令),真正的运行命令就两条,SIR向JTAG TAP状态机的IR寄存器送命令,SDR往J ...

  8. 解决低版本chrome浏览器不支持es6 Array.find()

     if (!Array.prototype.find) {  Array.prototype.find = function(predicate) {    'use strict';    if ( ...

  9. css响应有media,js响应有这种

    比如,我不想在移动端执行某js特效可以参考(function(doc, win) { var screenWidth = 0, size = 'M', root = doc.documentEleme ...

  10. HPUX 只取syslog.log当前三天的信息

    LOG_DAYS=1todays_date=`date +%m:%d:%Y`current_date=`echo $todays_date | sed 's/://g'`day=`echo $toda ...