对于一个刚刚接触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. Starling项目启动时报错This application is not correctly embedded (wrong wmode value)

    这个其实是Flash报的“ErrorEvent:. text=Error #3702: Context3D 不可用”错误被Starling变了一下. 解决方法:找到项目文件夹中的html-templa ...

  2. prototype.js简介

    prototype.js简介 2007-11-21 14:22 prototype.js是一个很强大的Javascript函数库,它可以让你很轻松的使用一些特效,实现AJAX的功能.虽然prototy ...

  3. fzu1342

    http://acm.fzu.edu.cn/problem.php?pid=1342 dp[i][j]  , i位尾巴为j的概率 const int maxn = 1008 ; double dp[m ...

  4. autoit小贴士

    如何防止程序重复运行? #include <Misc.au3>_Singleton("test") 如何删除脚本程序自身? ;删除脚本程序自身 Run(@ComSpec ...

  5. EX的魔方

    https://www.luogu.org/problem/show?pid=2007 题目背景 常神牛从来没接触过魔方,所以他要借助计算机来玩.即使是这样,他还是很菜. 题目描述 常神牛家的魔方都是 ...

  6. Runtime的几个小例子(含Demo)

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  7. GMM的EM算法实现

    转自:http://blog.csdn.net/abcjennifer/article/details/8198352 在聚类算法K-Means, K-Medoids, GMM, Spectral c ...

  8. JavaScript笔记:变量及其作用域

    一.变量的定义及声明 在javascript中变量仅仅是用来保存值的一个占位符而已,定义变量时要使用关键字var后跟一个变量名,如下所示: var message; //定义一个变量message,像 ...

  9. 删除Json中的不需要的键值

    var json = {'A': 1,  ,'B': 2, 'ccc': 333} delete json['ccc'];

  10. CMakeLists.txt for nginx

    project(nginx) cmake_minimum_required(VERSION 2.8) aux_source_directory(. SRC_LIST) aux_source_direc ...