HTML&CSS基础-相对定位
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基础-相对定位的更多相关文章
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
- css基础内容
css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- css 基础 - 3
css 基础 - 3 20161128 一. 元素的距离计算 1,两个水平方向的容器s1,s2之间的距离计算为s: s = s1的margin-right + s2的margin-left(+默认 ...
- 两天学会css基础（二）
接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
随机推荐
- Nginx - upstream sent invalid chunked response while reading upstream 异常问题
一个 post 的请求,直接调接口服务数据正常返回,但是通过 nginx 代理后, 什么都没有返回. nginx 配置如下: 使用 postman 调用,返回如下: 于是检查日志报错信息,如下: ng ...
- IE11的变化 navigator.userAgent中不再包含“MSIE”关键字
IE升级了,让人好头疼,升级个东西,我们也要跟着升级,程序猿压力大呀.... 1.navigator.userAgent中不再包含“MSIE”关键字 2.用javascript的判断是否是IE11的方 ...
- Shell脚本运行报错Bad substitution解决办法
环境Ubuntu18.4.02 脚本运行报错 # sh test.sh test.sh: 2: test.sh: Bad substitution 原因 从 ubuntu 6.10 开始,ubuntu ...
- redis 队列模式
1.插入队列(生产者) private static RedisClient client = new RedisClient("127.0.0.1", 6379, null);c ...
- 爬虫存储介质之MongoDB存储
常用数据库 mongoDB4.0: 下载:https://www.mongodb.com/ windows安装.Linux安装见: https://www.runoob.com/mongodb/mon ...
- ipv6 地址说明
开篇我们先简单介绍下ipv4 地址 IPv4 地址: ipv4地址一共32位,用点分十进制表示,每一个部分是8位.子网掩码有两种表示 192.168.1.3 / 24 表示ip的前24位是网络位,后8 ...
- [转帖]运维必读：Linux 的内存分页管理
运维必读:Linux 的内存分页管理 https://cloud.tencent.com/developer/article/1356431 内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在 ...
- tp5 关键字模糊查询 日期查询 小于大于某范围等查询的优点
挺不错,用熟了这tp5封装的很方便. 类似上边一个查询多个操作,基本在model 一个方法搞定代码也不用很多, 首先要学会用scope 网上搜tp scope 有几个例子可以借鉴 model 内添加 ...
- Spring Boot 入门（九）：集成Quartz定时任务
本片文章续<Spring Boot 入门(八):集成RabbitMQ消息队列>,关于Quartz定时任务请参考<Quartz的基本使用之入门(2.3.0版本)> spring ...
- 定期备份和清理gitlab文件
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019-12-05 14:39 # @Author : Anthony # @Emai ...