对于一个刚刚接触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. 黑马程序员_ Objective-c 面向对象笔记详解

    1)类,对象,方法 类 类名: 1) 类名的第一个字母必须是大写 2) 不能有下划线 3) 多个英文单词,用驼峰标识 类的声明和实现 类的声明 @interface 类名 : NSObject { @ ...

  2. Manually enable Appear Offline in Lync 2013 Preview via Registry

    refer to http://www.shudnow.net/2012/09/18/manually-enable-appear-offline-in-lync-2013-preview-via-r ...

  3. ubuntu 13.10 monodevelop3 安装

    版本 ubuntu 13.10 桌面模式默认:unity :文件管理器:nautilus

  4. js插件添加打印功能

    <%@ page language="java" %> <%@ page contentType="text/html; charset=gb2312& ...

  5. 十五、polygon API

    How polygons are handled internally The five basic polygonal API classes Construction History and Tw ...

  6. Java class file format specfication

    Java class file format spec Link: https://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html Her ...

  7. JavaScript笔记基础篇(三)

    针对前段JS获取当前时间或者对时间数据处理方法汇总: javascript 字符串转化为日期 Java代码   var s="2010-5-18 12:30:20"; var t= ...

  8. .vimrc vim 配置大全

    map <F9> :call SaveInputData()<CR>func! SaveInputData() exec "tabnew" exec 'no ...

  9. CentOS 7部署OpenStack(二)—安装keystone服务

    1.创建数据库 [root@controller ~]# mysql -u root -p [root@controller ~]# CREATE DATABASE keystone; [root@c ...

  10. 网站压力测试工具webbench使用说明

    一.webbench简介        Webbench是有名的网站压力测试工具,它是由Lionbridge公司(http://www.lionbridge.com)开发.它的帮助文件和文档请到:ww ...