1. 全栈程序员必看首页

html练习（5）

全栈程序员-站长 • • 未分类 • 阅读 54

html练习（5）

大家好，又见面了，我是全栈君。

这个练习主要简单的展示了据对定位和相对定位；

在此说下html的定位：

1.static定位

这个是默认的方式。对static而言。left和right是不生效的。

2.relative定位（相对定位）

元素框偏离自身流相应的位置（靠left和top定位），元素仍然保持为定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。

注意：relative的參照点是它原来的位置，进行移动

3.absolute定位（绝对定位）

相当于元素从原来的位置脱离。并让出自己的空间，后面的元素就会占有让出的空间。

注意：absolute定位是相对于离自己近期的那个非标准流盒子而言的。

4.fixed定位

元素框的表现类似于将position设置为absolute，只是其包括块是视窗本身。


代码：

html文件（test5.html）:


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
  <head>
    <title>作者：一叶扁舟</title><!–
/*练习绝对定位和相对定位*/
    –><meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
    <meta http-equiv=”description” content=”this is my page”>
    <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
    <link rel=”stylesheet” type=”text/css” href=”./test5.css”>

  </head>  
  <body>
    <h1>练习html的定位，包含绝对定位和相对定位</h1>
    <div class = “class1”>
   相对定位
    <div class = “style1”>这是第一个方格</div>
    <div class = “style1” id = “style2”>这是第二个方格</div>
    <div class = “style1”>这第三个方格</div>
   <div class = “style1”>这是第四个方格</div>
   </div>
   <div class =”class1″>
   绝对定位
    <div class = “style1”>这是第五个方格</div>
    <div class = “style1” id = “style3”>这是第六个方格</div>
    <div class = “style1”>这第七个方格</div>
   <div class = “style1”>这是第八个方格</div>
   </div>
  </body>
</html>


CSS文件（test5.css）:

.style1 {
width:100px;
height:70px;
background-color:red;
margin-top:12px;
margin-left:3px;
float:left;
}

body {
width:800px;
height:500px;
border:2px solid blue;
background-color:green;

}

#style2 {
/*使用相对定位*/
position:relative;
left:110px;
top:90px;
}

div.class1 {
width:700px;
height:200px;
border:1px solid gray;
}

#style3 {
/*使用绝对定位*/
position:absolute;
left:400px;
top:300px;
}

执行的效果图：

html练习（5）

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/116460.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0

相关推荐

  • ubuntu升级python版本

    ubuntu升级python版本

    ubuntu升级python版本Ubuntu16.04默认安装了Python2.7和3.5请注意，系统自带的python千万不能卸载！输入命令python按Ctrl+D退出python命令行输入命令sudoadd-apt-repositoryppa:jonathonf/python-3.6按Enter确认输入命令sudoapt-getupdate输入命令sudoapt-geti…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月28日
  • 3nf和bcnf分解_如何分解成3nf

    3nf和bcnf分解_如何分解成3nf

    3nf和bcnf分解_如何分解成3nf1.3NF分解先求出正则覆盖Fc对于Fc里面的所有函数依赖a->b,均转化为Ri=ab对于所有的模式Ri如果包含候选码，进行第4如果都不包含候选码，将任意一个候选码添加到模式Ri里面如果一个模式被另一个模式包含，则去掉此被包含的模式。例子：…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月28日
  • mysql数据库设计工具_四种优秀的数据库设计工具

    mysql数据库设计工具_四种优秀的数据库设计工具

    mysql数据库设计工具_四种优秀的数据库设计工具【51CTO.com快译】众所周知，良好的数据库设计能够大幅减少后期的运维工作，同时也能最大程度地减少软件项目出错的可能。由于我们所面临的真实项目需求往往五花八门，因此需要找到合适的设计工具，来实现事半功倍的效果。本文将从如下四个方面和您一起比较四种优秀数据库设计工具的各自优缺点。用户界面可支持的数据库数据工具售价1.DbSchemaDbSchema是一种可用于复杂数据库设计和管理的可视化工具。该…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月11日
  • 信道带宽_信道和带宽的关系

    信道带宽_信道和带宽的关系

    信道带宽_信道和带宽的关系信道包括模拟信道和数字信道。在模拟信道，带宽按照公式W=f2-f1计算；数字信道的带宽为信道能够达到的最大数据速率，两者可通过香农定理互相转换。码元：数字信号中每一个符号的通称。即可以用二进制表示，也可以用其它进制的数表示（例如二进制就是0和1表示两个符号，四进制就是0、1、2和3表示四个符号。四进制又可以用二进制表示，00、01、10、11）。码元传输速率，又称为码元速率或传码率。码元…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月11日
  • 五分钟免费获得自己的永久域名，免费！永久！

    五分钟免费获得自己的永久域名，免费！永久！

    五分钟免费获得自己的永久域名，免费！永久！一分钟教你免费获得自己的域名，由于是免费的，所以可能过程较慢。过程很简单，如果有什么步骤不会可以联系我哦：jenson_97@163.com一、首先进入到Ngrok官网点击右上角的注册，获得账号后登录到该网站进去。二、进入左侧功能栏的隧道管理->开通隧道，选择一个免费的服务器点击购买即可。三、填写基本信息填完基本信息之后点击确定添加，页面跳转之后点击确定开通。四、开通成功之后点击隧道管理就可以看到自己注册的域名了。五、再次进入到Ngrok官网首页，点击客户端下载(选择自己的系统的对

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月2日
  • svn客户端的安装与使用教程(svn汉化教程)

    svn客户端的安装与使用教程(svn汉化教程)

    SVN服务端与客户端安装使用(客户端汉化包)客户端下载地址:https://tortoisesvn.net/downloads.zh.html下载64位SVN安装包和64位简体中文安装包安装SVN打开安装包，直接NextNext选择安装目录，如果是自定义目录要新建一个文件夹，否则会把安装文件散落在盘符(此处不安装命令行工具会导致在idea中无法使用subversio…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月17日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号