杂项 飘浮 (内外边距)

2023-10-12 18:30
文章标签 杂项 外边 飘浮

本文主要是介绍杂项 飘浮 (内外边距)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

absolute
绝对定位，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
1.有祖先 靠近的
2.没有祖先 <body

relative
相对定位，相对于其正常位置进行定位。
1.参照自身 ，原位置保留 (自己走了别人也不能用)

fixed
固定定位，相对于浏览器窗口进行定位。
**

要求案例 实现下图（1）（2）

**
在这里插入图片描述

         ** 分割线       代码+运行结果图**

<html>
<head>
<title>制作网页</title>
<style type="text/css">.box{position: absolute;top: 50%;margin-top: -100px;left: 50%;margin-left: -425px;}
.div1{position: relative;top: 400px;left: 500px;
}
.div5{position: fixed;top: 500px;right: 50px;
}</style>
</head><body>
<div class="box" style="width: 850;height: 800px;background: #666666;border:1px solid#000;"><div class="div1"  style="width: 300;height: 100px;background: rgba(255,0,0); float: left;">1</div><div class="div2"  style="width: 500;height: 200px;background: rgba(0,0,255); float: right;">2</div><div class="div3"  style="width: 200;height: 300px;background: rgba(0,255,0); float: right;">3</div><div class="div4"  style="width: 400;height: 400px;background: rgba(0,0,0);   float: right;">4</div>
</div>
<div class="div5"  style="width: 100;height: 400px;background: rgba(66,66,0);">5</div></body>
</html>

在这里插入图片描述


<html>
<head>
<title>制作网页</title>
<style type="text/css">
.shangce1{float: left;top: 20;left: 20;
}
.shangce2{float: left;top: 20;
}
.shangce3{float: left;top: 20;
}
.zhongjian1{float: left;
}
.zhongjian2{float:right;
}
.zhongjian3{float: right;
}</style>
</head><body><div class="box" style="width: 780;height: 450px;background: rgb(236, 169, 169);border:2px solid#000;"><div class="shangce1" style="width: 200;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>1</p></div><div class="shangce2" style="width: 100;height: 300px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>2</p></div><div class="shangce3" style="width: 300;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>3</p></div><div class="zhongjian1" style="width: 400;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>4</p></div><div class="zhongjian2" style="width: 300;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>5</p></div><div class="zhongjian3" style="width: 400;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>6</p></div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
<style type="text/css">
.shangce1{
position:absolute;
left: 20px;
top: 20px;
}
.shangce2{
position:absolute;
top:20px;
left:140px;
}
.shangce3{
position:absolute;
top:20px;
left:260px;
}
.zhongjian1{
position:absolute;
left:20px;
top:90px;
}
.zhongjian2{
position:absolute;
left:140px;
top:90px;
}
.zhongjian3{
position:absolute;
left:260px;
top:90px;
}
.xiamian1{
position:absolute;
left:20px;
top:160px;
}
.xiamian2{
position:absolute;
left:140px;
top:160px;
}
.xiamian3{
position:absolute;
left:260px;
top:160px;
}
</style>
</head>
<body>
<div class="box" style="width: 380px;height: 230px;background:#F9C;border:2px solid#000;">
<div class="shangce1" style="width: 100px;height: 50px; border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 50px; border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 100px;height: 50px; border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 100px;height:50px;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width:100px;height:50px;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width:100px;height:50px;border:1px solid#000;"><p>6</p></div>
<div class="xiamian1" style="width:100px;height:50px;border:1px solid#000;"><p>7</p></div>
<div class="xiamian2" style="width:100px;height:50px;border:1px solid#000;"><p>8</p></div>
<div class="xiamian3" style="width:100px;height:50px;border:1px solid#000;"><p>9</p></div>
</div>
</body>
</html>

在这里插入图片描述

第2种方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
<style>.box{padding :10px;}
</style>
</head>
<body>
<div class="box" style="width: 380px;height: 230px;background:#F9C;border:2px solid#000;">
<div class="shangce1" style="width: 100px;height: 50px;float:left; margin:10px;border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 50px;float:left; margin:10px;border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 100px;height: 50px;float:left; margin:10px;border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width: 100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width: 100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>6</p></div>
<div class="xiamian1" style="width:100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>7</p></div>
<div class="xiamian2" style="width:100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>8</p></div>
<div class="xiamian3" style="width:100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>9</p></div>
</div>
</body>
</html>

在这里插入图片描述

未成功版本


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
</head>
<body>
<div class="box" style="width: 740px;height: 430px;background:#F9C;padding:5px;border:2px solid#000;">
<div class="shangce1" style="width: 200px;height: 100px;float:left; margin:5px ;border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 300px;float:left; margin:5px ;border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 300px;height: 100px;float:left; margin:5px ;border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 400px;height:100px;float:left;margin:5px ;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width: 300px;height:100px;float:left;margin:5px ;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width: 400px;height:100px;float:right;margin:5px ;border:1px solid#000;"><p>6</p></div>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
</head>
<body>
<div class="box" style="width: 740px;height: 430px;background:#F9C;padding:5px;border:2px solid#000;">
<div class="shangce1" style="width: 200px;height: 100px;float:left; margin:5px ;border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 300px;float:left; margin:5px ;border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 300px;height: 100px;float:left; margin:5px ;border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 400px;height:100px;float:left;margin:5px ;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width: 300px;height:100px;position:absolute;top: 330px;left: 15px; margin:5px ;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width: 400px;height:100px;position:absolute;top: 330px;left: 330px; margin:5px ;border:1px solid#000;"><p>6</p></div>
</div>
</body>
</html>

在这里插入图片描述

这篇关于杂项 飘浮 (内外边距)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/197663。

相关文章

Python 技术网址，杂项笔记等

Python 技术网址，杂项笔记等

官网 Numpy: https://numpy.org NumPy（Numerical Python）是Python的一种开源的数值计算扩展。 这种工具可用来存储和处理大型矩阵，比Python自身的嵌套列表（nested list structure)结构要高效的多（该结构也可以用来表示矩阵（matrix））， 支持大量的维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库。 Scipy
阅读更多...
div+css之 css框模型 内边距 边框 外边距 外边距合并

div+css之 css框模型 内边距 边框 外边距 外边距合并

1、CSS 框模型: 术语翻译 ·        element : 元素。 ·        padding : 内边距，也有资料将其翻译为填充。 ·        border : 边框。 ·        margin : 外边距，也有资料将其翻译为空白或空白边。     元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边
阅读更多...
C++基础之杂项

C++基础之杂项

目录 思维导图： 学习内容： 1. Lambda表达式 1.1 基本概念 1.2 定义格式 1.3 常用情况 二、异常处理 2.1 什么是异常处理 2.2 何时使用异常处理 2.3 异常处理的格式 2.4 异常实例 2.5 构造和析构中的异常  2.6 系统提供异常类  三、C++中文件操作 3.1 文件流对象的介绍 3.2 关于文件的操作 四、C++中线程支
阅读更多...
从0开始学杂项 第八期：流量分析(2) 数据提取

从0开始学杂项 第八期：流量分析(2) 数据提取

Misc 学习（八） - 流量分析：数据提取 这一期，我们主要写一下如何进行比较繁多的数据的提取。 使用 Tshark 批量提取数据 有时候，我们会需要从多个包中提取数据，然后再进行截取和组合，比如分析一个布尔盲注的流量文件等，这时，Tshark就派上了它的用场。 Tshark 是 Wireshark 的命令行版，可以高效快捷地提取数据，从而省去了繁杂的脚本编写。 tshark.exe
阅读更多...
前端开发_HTML5_CSS部分-内外边距(padding/margin)

前端开发_HTML5_CSS部分-内外边距(padding/margin)

内外边距(padding/margin) 1.引入    我们在之前的学习中学习了边框，我们发现只要是页面的标签元素，都可以实现边框的效果，那么接下来我们来讲解一个比较重要的知识点，边距，边距分为内边距和外边距，它们和边框一起是我们后面学习盒子模型的重要基础。 2.内外边距理解    为了更好的帮助广大的学习者理解所讲授的知识点，我们使用现实生活中的一个例子来帮助理解border、padd
阅读更多...
Qt杂项功能实现

Qt杂项功能实现

本文介绍Qt杂项功能实现。 1.隐藏鼠标指针 1)整个应用程序都不显示鼠标指针 可在“QApplication a(argc, argv);”之后添加： QApplication::setOverrideCursor(Qt::BlankCursor); 这在带触摸屏的应用中非常有用。 2)某个窗口不显示鼠标指针 可在窗口的构造函数中调用： QWidget::setCursor(QC
阅读更多...
第137天：横向移动-Linux_ssh工具杂项Linux靶场环境搭建

第137天：横向移动-Linux_ssh工具杂项Linux靶场环境搭建

实验环境及图解： 通过网盘分享的文件：137-Linux内网环境镜像文件 链接: https://pan.baidu.com/s/1W_5DvhbkGYMqML4mi1rjQA?pwd=ad6r 提取码: ad6r 一般情况下SSH密钥存放在~/.ssh/目录下，也可以文件中搜索已保存的SSH凭证 ~/.ssh/config ~/.ssh/known_hosts ~/.bash_
阅读更多...
【CSS in Depth 2 精译_021】3.4 负的外边距 + 3.5 外边距折叠

【CSS in Depth 2 精译_021】3.4 负的外边距 + 3.5 外边距折叠

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第一章 层叠、优先级与继承（已完结） 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位（已完结） 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型 3
阅读更多...
OpenCV杂项图像变换(2)线性混合函数blendLinear()的使用

OpenCV杂项图像变换(2)线性混合函数blendLinear()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C++11 算法描述 执行两个图像的线性混合： dst ( i , j ) = weights1 ( i , j ) ∗ src1 ( i , j ) + weights2 ( i , j ) ∗ src2 ( i , j ) \texttt{dst}(i,j)
阅读更多...
OpenCV杂项图像变换(1)自适应阈值处理函数adaptiveThreshold()的使用

OpenCV杂项图像变换(1)自适应阈值处理函数adaptiveThreshold()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C++11 算法描述 函数对数组应用自适应阈值。 该函数根据以下公式将灰度图像转换为二值图像： 对于 THRESH_BINARY: t e x t d s t ( x , y ) = { maxValue 如果 src ( x , y ) > T ( x ,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2