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. Linux脚本检测当前用户是否为root用户

    #/bin/bash if [ $UID -ne 0 ]; then echo Non root user. Please run as root. else echo Root user fi

  2. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  3. Xmanager教程

    简介 Xmanager是市场上领先的PC X服务器,可将X应用程序的强大功能带入Windows环境. 提供了强大的会话管理控制台,易于使用的X应用程序启动器,X服务器配置文件管理工具,SSH模块和高性 ...

  4. IDEA遇到项目包后面出现% classes，% lines covered该怎么解决

    IDEA遇到项目包后面出现% classes,% lines covered该怎么解决 这个问题嘛,我一个同学已经问我第二遍了.这次又是他问的,所以我就写一下教程吧  出现这种问题的原因:就是你点运行 ...

  5. [转帖]14-使用glusterfs做持久化存储

    14-使用glusterfs做持久化存储 https://www.cnblogs.com/guigujun/p/8366558.html 使用glusterfs做持久化存储 我们复用kubernete ...

  6. 数据库基础理解学习-Mysql

    1. 简介 数据库,现代化的数据存储存储手段,是一种特殊的文件,其中存储着需要的数据. 特点: 持久化存储 读写速度极高 保证数据的有效性 对程序支持性非常好,容易扩展 2. Mysql (1)具有数 ...

  7. stm32f103的HSI设置

    HSI基本知识 HSI是8MRC震荡电路,精度1%. PLL的设置必须在其被激活前完成,输出必须被设置温48M或者72M LSE:通过在备份域控制寄存器(RCC_BDCR)里的LSEON位启动和关闭. ...

  8. [二叉树算法]关于判断是否为BST的算法

    //判断是否为BST 搜索树==二叉排序树 1.递归知最大最小值.2.先中序判是否单调 bool IsValidBST(BTNode *p,int low,int high){ if(p==NULL) ...

  9. oracle-3-Linux-11g安装-图形安装

    在安装系统时就安装了图形桌面 参考博客地址:https://www.cnblogs.com/tibit/p/6134150.html 未参考,只是感觉不错:https://blog.csdn.net/ ...

  10. IDEA/WebStorm使用笔记

    1.使用powershell作为默认终端 #改变powershell策略 Set-ExecutionPolicy Unrestricted -Scope CurrentUser 找到系统的powers ...