HTML&CSS基础-相对定位

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>相对定位</title>

        <style type="text/css">

            .box1{

                width: 200px;

                height: 200px;

                background-color: red;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                /**

                 *     定位:

                 *         定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素

                 *        通过 position属性设置元素定位，常用有以下可选值:

                 *             static:

                 *                 默认值，元素没有开启定位

                 *             relative:

                 *                 开启元素的相对定位

                 *             absolute:

                 *                 开启元素的绝对定位

                 *             fixed:

                 *                 开启元素的固定定位(也是绝对定位的一种)

                 *

                 *

                 */

                /**

                 *     当元素的positon属性设置为relative时，则开启了元素的相对定位

                 *         1>.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化;

                 *         2>.相对定位是相对于元素在文档流中原来的位置进行定位;

                 *         3>.相对定位的位置是不会脱离文档流;

                 *         4>.相对定位会使元素提示一个层级，即它可以覆盖移动后的元素;

                 *         5>.相对定位不会改变元素的性值，块元素还是块元素，内联元素还是内联元素，因为它始终没有脱离文档流;

                 */

                position: relative;

                /**

                 *     当开启了元素的定位(position属性值是一个非static的值)时,可以通过left,right,top,bottom四个属性来设置元素的偏移量:

                 *         left:

                 *             元素相对于其定位位置的左侧偏移量

                 *         right:

                 *             元素相对于其定位位置的右侧偏移量

                 *         top:

                 *             元素相对于其定位的上边的偏移量

                 *         bottom:

                 *             元素相对于其定位位置下边的偏移量

                 *

                 *     通常偏移量只需要使用两个就可以对一个元素进行定位，一般会选择一个水平方向的偏移量和一个垂直方向的偏移量来为一个元素进行定位。

                 */

                left: 100px;

                top:200px

            }

            .box3{

                width: 200px;

                height: 200px;

                background-color: deeppink;

            }

            span{

                position: relative;

                /**

                 *     注意，我们没有显示使用"display: block;"将span变为快标签，span依旧是一个内联标签

                 */

                width: 100px;

                height: 200px;

                background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <span>我是一个span标签</span>

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-相对定位的更多相关文章

  1. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  2. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  3. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

  4. css基础内容

    css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...

  5. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  6. css 基础 - 3

    css 基础 - 3 20161128   一. 元素的距离计算 1,两个水平方向的容器s1,s2之间的距离计算为s: s = s1的margin-right + s2的margin-left(+默认 ...

  7. 两天学会css基础（二）

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

  8. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  9. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

随机推荐

  1. JS正则匹配邮箱格式

    观察一些邮箱格式,有些邮箱格式简单,有些复杂,在网上找了个邮箱的正则表达式,分析一下邮箱的规则.该表达式:/^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/ 拆分:[1 ...

  2. PHP5.2\5.3 Xdebug 调试器配置及应用

    PHP5.2添加的扩展方式:zend_extension_ts=D:\www\Server\php5\ext\php_xdebug-2.1.0-5.2-vc6.dll PHP5.3添加的扩展方式:ze ...

  3. 对ThreadLocal的理解

      参考文档:https://www.cnblogs.com/moonandstar08/p/4912673.html   一.定义:线程本地变量,每个线程中的变量相互独立,互不影响. 官方定义: 1 ...

  4. 利用eclipse导入jar包到本地仓库

    如果不也不想用mvn install xxxxxx 后面跟一大堆的东东,可以让eclipse替代完成导入,看下图 File------->Import 大功告成,可见eclipse还没有废掉,至 ...

  5. gcr 镜像无法下载问题

    GCR Proxy Cache 帮助 GCR Proxy Cache服务器相当于一台GCR镜像服务器,国内用户可以经由该服务器从gcr.io下载镜像. 使用GCR Proxy Cache从gcr.io ...

  6. flask 编码问题

    在我们的flask项目中,通过表单提交对数据库进行更新的时候,数据提交不成功,提示以下内容: sqlalchemy.exc.InternalError: (pymysql.err.InternalEr ...

  7. 【bcrypt】vue项目中bcrypt安装报错

    [报错] 报错时安装方法: npm install bcrypt [解决方法] npm install bcryptjs 用 bcryptjs 替换 bcrypt 即可.

  8. QT中PRO文件解析（转）

    From csdn blog: QT中PRO文件写法的详细介绍,很有用,很重要! 在QT中,有一个工具qmake可以生成一个makefile文件,它是由.pro文件生成而来的,.pro文件的写法如下: ...

  9. SpringBoot项目集成PageHelper使用

    SpringBoot项目集成PageHelper使用 一.开始 ​ 地址:https://github.com/pagehelper/Mybatis-PageHelper ​ 在spring boot ...

  10. Request部分知识点小结

    HTTP: * 概念:Hyper Text Transfer Protocol 超文本传输协议 * 传输协议:定义了,客户端和服务器端通信时,发送数据的格式 * 特点: 1. 基于TCP/IP的高级协 ...