css定位机制

css有三种基本的定位机制：普通流，浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在html中的位置决定。

块级框从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使水平内边距，边框和外边距调整它们的间距。但是，垂直内边距。边框和外边框不影响行内框的高度。由一行形成的水平框称为行框。行框的高度总是足以容纳它包含的所有行内框。不过设置行高可以增加这个框的高度。

css绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对　　定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

绝对定位的元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，（祖元素必须包裹在绝对定位元素的外部，不一定需要最近的也可以是远处的。）那么它的位置相对于最初的包含块（html）。

对于定位的主要问题是要记住每种定位的意义。

<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>绝对定位</title>

           <style type="text/css">

                .pos_abs{

                          left:100px;

                          top:150px;

                         }

           </style>

</head>

<body>

          <h2 class="pos_abs">带有决对定位的标题</h2>

          <p>通过绝对定位，元素可以放置到页面上的任何位置。下面标题距离页面左侧100px，距离页面顶部150px。</p>

</body>

</html>

css相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进行移动。

如果top设置为20px，那么框将在原位置顶部下面20像素的地方。如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向右移动。但它原来所处的地方也将被保留对于配合绝对定位来讲这是一对好的搭档。

css固定定位

固定定位也属于绝对对定位的一种，使用起来非常简单。但测量需要花时间练习的。

<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>固定定位</title>

           <style type="text/css">

             .one{

              position:fixed;

              left:25px;

              top:30px;

              }

              .two{

                position:fixed;

                   top:30px;

                   right:80px;

}

           </style>

</head>

<body>

             <p class="one">一个段落</p>

             <P class="two">两个段落</p>

</body>

</html>

html进阶css(5)的更多相关文章

  1. html进阶css（４）

    盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  2. html进阶css（3）

    css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...

  3. html进阶css（2）

    选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...

  4. html进阶css（1）

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. HTML5总结整理

    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...

  6. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. 【CSS进阶】试试酷炫的 3D 视角

    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...

  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  9. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

随机推荐

  1. compass模块----Helpers

    Color Stops:在使用CSS3渐变属性生成图片的时候,有时候为了打造更丰富的渐变效果除了声明渐变线上的起始点和终止点的色值,还有声明一些中间点的色值,这些点我们就称之为Color Stops. ...

  2. AVL树插入和删除

    一.AVL树简介 AVL树是一种平衡的二叉查找树. 平衡二叉树(AVL 树)是一棵空树,或者是具有下列性质的二叉排序树:    1它的左子树和右子树都是平衡二叉树,    2且左子树和右子树高度之差的 ...

  3. WIN7下使用.net(C#)监视剪贴板 （转）

    最近需要做一个小程序,需要常驻后台,监视剪贴板变化并提取内容, 在网上查了一些资料,先采用SetClipboardViewer方法实现,具体原理可以参考http://www.cnblogs.com/j ...

  4. [C#][Database]C#通过ODBC以自定义端口连接数据库

    数据库端的配置暂且不说,比较简单,新建用户并开启相应连接权限即可. 通过ODBC连接数据库,重点在于Connection String的书写,在此可以查到几乎所有类型的Data Server的Conn ...

  5. Tomcat 默认应用

    在部署应用时需要更改默认的端口号及应用,以免让别人知道使用的服务器类型而进行攻击.tomca的部署有多种方式,这里简单谈一下.目前想到有三种方式:一.添加 Context在Tomcat的配置文件中,一 ...

  6. oracle 数据库 分割字符串返回结果集函数

    CREATE OR REPLACE FUNCTION "UFN_SPLIT" (      p_list varchar2,      p_sep varchar2 := ',' ...

  7. VS2015打开工程文件卡死

    今天偶然遇到VS2015打开某个工程文件卡死,一直等待无响应: 关闭VS,打开另外一个工程文件是正常的: 开始怀疑是工程文件有问题,用VS2013打开是正常的,排除工程文件问题: 删除对应工程文件下的 ...

  8. 错误记录--更改tomcat端口号方法，Several ports (8005, 8080, 8009)

    启动Tomcat服务器报错: Several ports (8005, 8080, 8009) required by Tomcat v5.5 Server at localhost are alre ...

  9. OpenGL ES 2.0 摄像机与投影

    1.摄像机的设置 摄像机的位置坐标 摄像机的位置 摄像机up方向 Matrix.setLookAtM( mVMatrix, //存储生成矩阵元素的float[]类型数组 0, //填充起始偏移量 cx ...

  10. （原+转）ubuntu终端输出彩色文字

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6066697.html 参考网址: http://www.tuicool.com/articles/jI ...