css中的定位---lesson12

最新推荐文章于 2019-05-15 21:50:41 发布
最新推荐文章于 2019-05-15 21:50:41 发布
阅读量313 收藏
点赞数
分类专栏： 我的Web前端之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_26994091/article/details/73478071
版权

css中的定位涉及到的属性：

position

display

float

top、right、bottom、left

具体说明：

1、position：relative

相对布局：是相对于自己偏移前的元素进行的相对布局；使用top、left来设置偏移量；虽然偏移了，但是会保留自己未偏移时的空间，其他元素不能占用它。

图中可以看到“相对布局2”的位置偏移了，但是“相对布局3”的并没有紧紧贴着“相对布局1”之后进行放置；

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1{
	position: static;
	background-color: red;
}

.area2{
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

</style>
</head>
<body>

<h4>position: relative;</h4>

<div>
	<p>相对布局1 </p>
	<p class="area2">相对布局2 </p>
	<p>相对布局3 </p>
</div>


</body>
</html>

2、position: absolute;

绝对布局：是基于设置了position为relative、absolute、fixed的父节点进行的绝对布局，使用top、left进行偏移；

偏移的元素不会保留未偏移时的空间大小，其他元素会占用该空间；

图中“绝对布局b”因为没有合乎规则的父节点，所以最终是以body为父节点来进行的绝对定位；

“绝对布局d”有合乎规则的父节点（设置了position: relative;），所以就以该父节点来进行绝对定位；


代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1{
	position: static;
	background-color: red;
}

.area2{
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area3{
	position: absolute;
	background-color: red;
	left: 20px;
	top: 60px;
}

</style>
</head>
<body>

<div>
	<p>相对布局1 </p>
	<p class="area2">相对布局2 </p>
	<p>相对布局3 </p>
</div>

<div>--------------------------------------------------------------</div>

<div>
	<p>绝对布局a </p>
	<p class="area3">绝对布局b </p>
	<p>绝对布局c </p>
	<div style="position: relative;background-color: yellow;">
		ddddddd
		<p class="area3">绝对布局d</p>
	</div>
</div>


</body>
</html>

3、position: fixed;

固定布局：元素是相对于浏览器窗口进行的固定布局，设置了偏移量top、left之后，元素的位置不会随着滚动条的滚动而移动；而且元素不会保留未偏移时的空间大小，其他元素可以占用该空间；

图中可以看到“固定布局II”,是直接基于浏览器的窗口进行的固定布局，而且“固定布局III”占用了“固定布局II”未偏移时的空间；


代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1{
	position: static;
	background-color: red;
}

.area2{
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area3{
	position: absolute;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area4{
	position: fixed;
	background-color: red;
	left: 50%;
	top: 10px;
}

</style>
</head>
<body>

<div>
	<p>相对布局1 </p>
	<p class="area2">相对布局2 </p>
	<p>相对布局3 </p>
</div>

<div>--------------------------------------------------------------</div>

<div>
	<p>绝对布局a </p>
	<p class="area3">绝对布局b </p>
	<p>绝对布局c </p>
	<div style="position: relative;background-color: yellow;">
		ddddddd
		<p class="area3">绝对布局d</p>
	</div>
</div>

<div>--------------------------------------------------------------</div>

<div style="margin-top: 80px;">
	<p>固定布局I </p>
	<p class="area4">固定布局II </p>
	<p>固定布局III</p>
	<div style="position: relative;background-color: yellow;">
		IVIVIVIVIVIV
	</div>
</div>

</body>
</html>

4、display可取值：

display: none;设置元素不可见，不占用空间位置；

display: inline;将一个元素设置为行内元素，行内元素设置width和height是无效的；大小是包裹内容

display: block;将一个元素设置为块级元素，块级元素可以设置width和height；如果不设置宽，默认是与父元素宽度一样，如果不设置高度，默认是包裹高度；

display:inline-block;将一个元素设置为行块元素，具有行内元素的特性，同时可以设置宽高；


代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	border-width: 0px;
}

.area1 {
	position: static;
	background-color: red;
}

.area2 {
	position: relative;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area3 {
	position: absolute;
	background-color: red;
	left: 20px;
	top: 60px;
}

.area4 {
	position: fixed;
	background-color: red;
	left: 50%;
	top: 10px;
}
</style>
</head>
<body>

	<div>-------------------------相对布局-------------------------------------</div>

	<div>
		<p>相对布局1</p>
		<p class="area2">相对布局2</p>
		<p>相对布局3</p>
	</div>

	<div>-------------------------绝对布局-------------------------------------</div>

	<div>
		<p>绝对布局a</p>
		<p class="area3">绝对布局b</p>
		<p>绝对布局c</p>
		<div style="position: relative; background-color: yellow;">
			ddddddd
			<p class="area3">绝对布局d</p>
		</div>
	</div>

	<div>--------------------固定布局------------------------------------------</div>

	<div style="margin-top: 80px;">
		<p>固定布局I</p>
		<p class="area4">固定布局II</p>
		<p>固定布局III</p>
		<div style="position: relative; background-color: yellow;">
			IVIVIVIVIVIV</div>
	</div>

	<div>---------------------display-----------------------------------------</div>

	<div style="margin-top: 10px;">
		<p style="display: inline; height: 60px; background-color: red">pA</p>
		<p style="display: inline; height: 60px; background-color: red">pB</p>
		<p style="display: none; height: 60px; background-color: red">pC</p>
		<div style="width: 80px;height: 80px;background-color: yellow;">
			<p style="background-color: red">pD</p>
			<p style="background-color: red;width: 40px;">pD2</p>
		</div>
		<a style="display: block; height: 60px; width: 60px; background-color: red">aE</a>
		<a style="display: inline-block; height: 60px;width:80px;background-color: red">aF</a>
	</div>

</body>
</html>

5、float可取值left,right

一般用于水平菜单

心之所善兮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-定位
hxy1625309592的博客
11-19 133
11.1 相对定位 什么是相对定位 相对定位就是相对于自己以前在标准流中的位置来移动。 相对定位特点 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间。 在相对定位中同一个方向上的定位属性只能使用一个。 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素。 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。 代码示例 <!DOCTYPE html&
lesson4--html-css基础主要知识点
wywywy_的博客
05-18 148
一、文字溢出处理 1.单行文本溢出处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行文本溢出处理方法</title> <style> *{ margin:0; padding:0; } .text...
lesson2--html-css基础主要知识点
wywywy_的博客
05-15 221
1.浏览器的主要内核（有独立研发的内核）                              &nbsp...
htm-css-lesson
03-21
【文件名称列表】：尽管没有具体的文件名提供，我们可以推测“htm-css-lesson-master”可能是一个主目录或源代码库，可能包含多个子文件夹和文件，如HTML模板、CSS样式单、JavaScript脚本、示例项目、课件或者练习。...
CSS-Lesson:初级CSS代码
05-03
**CSS（层叠样式表）**是网页设计中不可或缺的一部分，它用于定义页面的布局、颜色、字体等视觉样式。...在`CSS-Lesson-main`这个文件中，可能包含了这些概念的实例和练习，建议你打开文件进行深入学习和操作。
lesson-w02d01-css-position
04-06
本教程将深入探讨CSS定位的概念、属性及其在页面布局中的应用。 首先，我们需要了解四种主要的定位模式：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **静态定位...
neogcamp-lesson-3-live:对简单的Web html和CSS进行实时编码
03-29
在本课程"neogcamp-lesson-3-live:对简单的Web html和CSS进行实时编码"中，我们将深入探讨构建Web页面的基本技术，包括HTML（超文本标记语言）和CSS（层叠样式表）。这两个核心元素是任何网页设计的基础，无论你是...
lesson-6---position
03-12
在"lesson-6---position-main"这个文件中，可能包含了关于这些定位技术的实例代码、解释和练习，帮助学习者更深入地理解和掌握CSS中的位置概念。通过实际操作和观察不同定位方式下的元素行为，可以更好地理解这些...
geopandas-0.13.1-py3-none-any.whl
08-31
GeoPandas是一个开源的Python库，旨在简化地理空间数据的处理和分析。它结合了Pandas和Shapely的能力，为Python用户提供了一个强大而灵活的工具来处理地理空间数据。以下是关于GeoPandas的详细介绍： 一、GeoPandas的基本概念 1. 定义 GeoPandas是建立在Pandas和Shapely之上的一个Python库，用于处理和分析地理空间数据。 它扩展了Pandas的DataFrame和Series数据结构，允许在其中存储和操作地理空间几何图形。 2. 核心数据结构 GeoDataFrame：GeoPandas的核心数据结构，是Pandas DataFrame的扩展。它包含一个或多个列，其中至少一列是几何列（geometry column），用于存储地理空间几何图形（如点、线、多边形等）。 GeoSeries：GeoPandas中的另一个重要数据结构，类似于Pandas的Series，但用于存储几何图形序列。 二、GeoPandas的功能特性 1. 读取和写入多种地理空间数据格式 GeoPandas支持读取和写入多种常见的地理空间数据格式，包括Shapefile、GeoJSON、PostGIS、KML等。这使得用户可以轻松地从各种数据源中加载地理空间数据，并将处理后的数据保存为所需的格式。 2. 地理空间几何图形的创建、编辑和分析 GeoPandas允许用户创建、编辑和分析地理空间几何图形，包括点、线、多边形等。它提供了丰富的空间操作函数，如缓冲区分析、交集、并集、差集等，使得用户可以方便地进行地理空间数据分析。 3. 数据可视化 GeoPandas内置了数据可视化功能，可以绘制地理空间数据的地图。用户可以使用matplotlib等库来进一步定制地图的样式和布局。 4. 空间连接和空间索引 GeoPandas支持空间连接操作，可以将两个GeoDataFrame按照空间关系（如相交、包含等）进行连接。此外，它还支持空间索引，可以提高地理空间数据查询的效率。
lxml-5.0.1-cp310-cp310-win_amd64.whl
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。
单片机资料c源码通过矩阵按键与数码管单片机资料c源码通过矩阵按键与数码管
08-31
单片机资料c源码通过矩阵按键与数码管单片机资料c源码通过矩阵按键与数码管提取方式是百度网盘分享地址
本地音乐播放器优化版源码20240831
08-31
本地音乐播放器优化版源码20240831。优化后的界面和使用感觉更好。
使用matlab生成动图与视频，仿真实用小技巧
最新发布
08-31
使用matlab生成动图与视频，仿真实用小技巧
SQLAlchemy-2.0.31-cp39-cp39-manylinux_2_17_aarch64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
监理安全巡视检查记录表.doc
08-31
监理安全巡视检查记录表.doc
lxml-5.0.1-cp27-cp27m-win32.whl
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。
Go语言的包管理与模块化开发.md
08-31
Go语言的包管理与模块化开发，涵盖了Go包的基本概念、导入与使用、以及包的可见性等基础内容。文章接着深入探讨了Go Modules系统的引入背景、结构以及常用的依赖管理命令，解决了Go 1.11之前`GOPATH`管理模式带来的复杂性问题。通过模块系统，开发者可以更好地控制版本管理、优化依赖关系，并实现模块的多版本共存。文章还详细说明了如何进行模块化开发，包括模块划分、封装、依赖管理等，并通过具体的用户管理系统示例展示了模块化开发的实际应用。最后，文章探讨了Go Modules的高级功能，如语义版本控制、私有模块管理、模块代理与镜像等，并提出了模块化开发的最佳实践建议，如保持模块独立性、避免循环依赖、定期更新依赖、锁定版本等。这些内容为开发者提供了关于Go模块化开发的全面指导，旨在提升代码的组织效率和项目的可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值