前端学习笔记(五)元素定位和background属性

最新推荐文章于 2024-04-24 12:29:08 发布
最新推荐文章于 2024-04-24 12:29:08 发布
阅读量285 收藏
点赞数
分类专栏： html 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45020131/article/details/105227138
版权

定位

文档流
      文档流，是指盒子按照html标签编写的顺序一次从上到下，从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置

关于定位

我们可以使用css中的position属性来设置元素的定位类型，position的设置项如下：

  • relative：生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
  • absolute： 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来定位，如果找不到，则相对于body元素进行定位。
  • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的文职，可以理解为漂浮在文档流的上方，相当于浏览器窗口进行定位。
  • static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
  • inherit：从父元素继承position属性的值。

定位元素的偏移

定位的元素还需要使用left、right、top、bottom来设置参照元素的偏移值

定位元素层级

使用z-index来设置元素的层级，元素层级越高，定位元素就会浮动在正常的文档流之上。
实例：

<!DOCTYPE html>
<html>
<head>
	<title>元素定位层级</title>
	<style type="text/css">
		.con{

			width: 400px;
			height: 600px;
			border:1px solid black;
			margin: 50px auto 0;

			/*将父类元素设置为相对定位*/
			position:relative;
		}

		.con div{
			width: 200px;
			height: 100px;
			/*margin: 10px;*/

			/*将子类元素设置为绝对定位absolute*/
			position: absolute;

		}

		.box01{
			background-color: green;
			left: 20px;
			top: 20px;
			/*使用z-index定义层级*/
			z-index: 10;

		}

		.box02{
			background-color: gold;
			left: 40px;
			top: 40px;
			/*z-index后面写入数字就可以了，数字越高，那么层级也就越高，就会覆盖其他页面上*/
			z-index: 12
		}


		.box03{
			background-color: pink;
			left: 60px;
			top: 60px;
			z-index: 12
		}

		.box04{
			background-color: yellow;
			left: 80px;
			top: 80px;
			
		}


	</style>
</head>
<body>

<div class="con">
    <div class="box01"></div>
    <div class="box02"></div>
    <div class="box03"></div>
    <div class="box04"></div>
</div>
</body>
</html>

浏览器中的打开。
在这里插入图片描述

定位元素特性

绝对定位和固定定位的元素和行内元素会自动转化为行内块元素

相对元素定位实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>相对元素定位</title>

	<style type="text/css">
		.con{

			width: 400px;
			height:600px;
			border: 1px solid black;
			margin: 50px auto 0;

		}

		.box01, .box02{
			width: 200px;
			height: 100px;
			margin:10px;
		}

		.box01{
			background-color: green;

			/*相对定位: 按照父类的大小来设置移动距离*/
			position: relative;
			left: 50px;
			top:50px;
		}

		.box02{
			background-color: gold;
		}

	</style>
</head>
<body>

	<div class="con">
	
		<div class="box01"></div>

		<div class="box02"></div>
	</div>

</body>
</html>

浏览器中打开
在这里插入图片描述

绝对定位元素实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>绝对定位</title>

	<style type="text/css">
		.con{

			width: 400px;
			height:600px;
			border: 1px solid black;
			margin: 50px auto 0;

			/*将父类元素设置为相对定位*/
			position: relative;

		}

		.box01, .box02{
			width: 200px;
			height: 100px;
			margin:10px;
		}

		.box01{
			background-color: green;

			/*绝对定位: 若父类元素没有设置定位，则按照body标签来定位*/
			position: absolute;
			left: 50px;
			top:50px;
		}

		.box02{
			background-color: gold;
		}

	</style>
</head>
<body>

	<div class="con">
		<div class="box01"></div>

		<div class="box02"></div>
	</div>

</body>
</html>

浏览器中打开

在这里插入图片描述

固定元素定位

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>绝对定位</title>

	<style type="text/css">
		.con{

			width: 400px;
			height:600px;
			border: 1px solid black;
			margin: 50px auto 0;

		}

		.box01, .box02{
			width: 200px;
			height: 100px;
			margin:10px;
		}

		.box01{
			background-color: green;

			/*固定定位：生成固定定位元素，元素脱离文档流，不占据文档流的位置
			相当于对于浏览器窗口进行定位。*/
			position: fixed;
			left: 50px;
			top:50px;
		}

		.box02{
			background-color: gold;
		}

	</style>
</head>
<body>

	<div class="con">
		<div class="box01"></div>

		<div class="box02"></div>
	</div>

</body>
</html>

浏览器中打开
在这里插入图片描述

元素定位实例-消息图标

做一个消息提示的小图标

<!DOCTYPE html>
<html>
<head>
	<title>元素定位</title>

	<style type="text/css">
		.con{
			margin: 50px auto 0;
			width: 100px;
			height: 100px;
			background-color: gold;
			position: relative;

			border-radius: 14px;
		}

		.box{
			width: 28px;
			height: 28px;
			background-color: red;
			color:white;
			position: relative;
			text-align: center;
			line-height: 28px;
			left: 86px;
			top: -14px;

			/*css3选择器，圆角属性, 半径为14像素的圆*/
			border-radius: 14px;
			font-family: fantasy;
		}

	</style>


</head>
<body>
	<div class="con">
		<div class="box">5</div>
	</div>
</body>
</html>

运行程序，效果如下：
在这里插入图片描述

元素定位小实例二–弹窗列表

<!DOCTYPE html>
<html>
<head>
	<title>定位实例</title>

	<style type="text/css">
		
		.list{

			height: 80px;
			width: 960px;
			background-color: gold;
			top: 0;
			left: 0;
			/*元素定位, 固定元素定位*/
			position: fixed;
			left: 50%;
			margin-left: -480px;

			line-height: 80px;
			z-index: 10;
		}

		.con p{
			text-align: center;
		}

		.popup{

		width: 500px;
		height: 300px;
		border:1px solid #000;
		background-color: #fff;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -251px;
		margin-top: -151px;
		z-index: 9999;

		}

		.popup h2{
			background-color: gold;
			height: 40px;
			margin:10px;
		}

		.bg{
			position: fixed;

			width: 100%;
			height: 100%;
			background-color: #000;
			z-index: 9998;
			left: 0;
			top:0;

			/*设置透明度*/
			opacity: 0.5;

		}

		.popup_bg{
			display: none;
		}

		.all:hover .popup_bg{
			display: block;
		}

	</style>
</head>
<body>

	<div class="con">
		<div class="all">
		<!-- 制作弹框 -->
			<h3>弹窗</h3>
			<div class="popup_bg">
			<div class="popup"><h2>弹窗列表</h2></div>
			<div class="bg"></div>

			</div>
		</div>


		<!-- 第一：制作固定在顶部的水平居中的菜单栏 -->
		<div class="list">菜单</div>

		<!-- 第二：制作浮动的菜单列表 -->
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<p>菜单列表</p>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />


	</div>

</body>
</html>

效果如下；
在这里插入图片描述

background属性

属性解释
background属性时css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个符合属性，它可以分解成如下几个设置项：

  • background-color: 设置背景颜色

  • background-img：设置背景图片， 用url(img_path)来设置图片地址

  • background-repeat：设置背景图片如何重复平铺(repeat-y/x)

  • background-position:设置图片位置(left top)

  • background-attachment: 设置背景图片是固定还是随着页面滚动条滚动

    实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：‘background:url(images/a.jpg) blue no-repeat center center;’，这里面的blue是设置background-color，url(images/a.jpg)是设置背景图片，no-repeat是设置background-repeat，说明只重复一次， center center是设置background-position的位置。各个设置项用空格隔开，有的设置项也可以不用写，它会使用默认值。
    background属性实例

<!DOCTYPE html>
<html>
<head>
	<title>背景图片实例</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			border:5px solid #000;

			margin:50px auto 0;
			
			/*
			background-image: url(images/阴阳怪气的先报警再说.jpg);
			background-repeat: no-repeat;
			background-position: -10px -200px;
			*/

			/*以上操作一句话完成*/
			background: url(images/阴阳怪气的先报警再说.jpg) no-repeat -10px -200px;

		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

原图片
在这里插入图片描述
代码运行之后的图片:
在这里插入图片描述

雪碧图制作

做一个

<!DOCTYPE html>
<html>
<head>
	<title>雪碧图案列</title>

	<style type="text/css">

		.box{
			width: 300px;
			height: 305px;
			margin: 50px auto 0;
			padding:0;
			/*background: cyan;*/
		}

		.box li{
			list-style: none;
			height: 60px;
			border-bottom: 1px #000 dotted; 
			line-height: 60px;

			/*首行缩进*/
			text-indent: 50px;

			/*插入图片*/

			background: url(images/bg01.png) left 10px no-repeat;
		}

		.box .bg01{
			background: url(images/b g01.png) 0px -71px no-repeat;
		}

		.box .bg02{
			background: url(images/bg01.png) 0px -153px no-repeat;
		}

		.box .bg03{
			background: url(images/bg01.png) 0px -235px no-repeat;
		}

		.box .bg04{
			background: url(images/bg01.png) 0px -315px no-repeat;
		}


	</style>

</head> 
<body>
	<ul class="box">
    <li>美人鱼</li>
    <li class="bg01">琅琊榜</li>
    <li class="bg02">基尼太美</li>
    <li class="bg03">大副</li>
    <li class="bg04">肖申克的救赎</li>
</ul>

</body>
</html>

效果如下：
在这里插入图片描述

mr.ocean
关注
专栏目录
前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法
qq_41363062的博客
01-05 1878
一、 background背景元素 1. background-color背景颜色 可以简写 background；默认值是transparent。（透明） 不能继承 2. background-image背景图片 可以简写background url（“图像的url路径地址”）图像的URL； none 表示背景上没有设置任何图像，这是默认值； inherit 指定背景图像应该从父元素继承 b...
web前端学习笔记6
最新发布
hanq2016的博客
05-06 832
web前端学习笔记，持续更新，非常完整，position定位
CSS之定位，background属性
Mr_zhang的博客
03-20 382
定位关于定位 我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素...
background 定位
weixin_30243533的博客
08-22 275
1.background : 　　background-image : ul(链接的图片地址);默认横向平铺,纵向平铺. 　　background-repeat : repeat ; 默认; 　　　　　　　　　　　no-repeat : 不平铺; 　　　　　　　　　　　repeat-x : 横向平铺; 　　　　　　　　　　 repeat-y : 纵向平铺; 　　backgrou...
关于background定位
u011927449的博客
05-03 149
直到刚刚我才发现我小瞧了background定位 因为项目里需要显示隐藏的按钮上有两个图标 开始想了几种方法都不行，然后突然就想到了background定位 果断试了一下 1 <input type="button" class="layui-display-1" value="显示"> 1 /* 显示隐藏 */ 2 .layui-display-1{ 3 ...
background的属性和背景图片定位的实例
08-20 752
本文内容： 　　1.背景图片定位示例 　　2.background常用的属性值 　　3.background-repeat新增的round、space属性 　　4.background-size的属性值（着重介绍contain、cover） 　　5.background-origin属性值（borde-box、padding-box、content-box） 　　6.多背景图...
一位大学生的前端学习笔记
01-22
在本文中，我们将深入探讨一位大学生在前端学习过程中的笔记，涵盖了许多基本但至关重要的概念。 1. **HTML基础知识**： - HTML（HyperText Markup Language）是构建网页的基础，它通过标签来描述网页内容和结构。...
web前端基础学习笔记
01-08
### Web前端基础学习笔记 #### 一、HTML ##### 1. HTML简介 - **网站与网页**: 网页是使用HTML标记语言编写的文件，用于描述同一范畴内的信息或数据。多个网页组成一个网站。 - **HTML**: 超文本标记语言，是一种...
web前端学习笔记2
hanq2016的博客
04-24 1230
web前端笔记，持续更新，非常完整
web前端学习笔记23-Node节点方法、元素节点方法、属性节点方法
WPF调用摄像头（借用WPFMediaKit库）
07-30 282
一、Node节点对象的基本方法
CSS background-position 背景定位的用法
Pandakingli的博客
05-01 1851
网页中很多图片素材被合成在一张图片上，然后使用背景定位来获取对应的图标。要实现CSS抠图，只需要用到一个属性：background-position。小ICON在大图中，想提取出来，需要用background-position属性，这个属性相当于大图片不动，把div的顶点进行移动，移动到目标小图的顶点位置background-position属性，它有两个参数，分别是水平方向移动的像素、竖直方向移动
Css定位与background 属性
路虽远，行则必至！
04-26 361
关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型， postion 的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置不变， 元素本身相对文档流的位置进行偏移。 absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位 置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或 者绝对或者固定定位的父级元素来进行定位，如果找不到，...
CSS3背景定位
CH_Y的博客
10-24 2342
针对某个容器的某个角落，使用了background-position和使用calc()函数对背景图片进行偏移定位，解决了CSS3背景定位问题。
CSS定位背景图片 background-position
潇潇的博客
09-18 1632
1、使用目的 就是减少http请求次数，节省时间和带宽。 2、background-position参数分析 background-position：x y;一般来说是水平位移和垂直位移。通过%或者像素来定位图片。 3、如何定位？ 一般来说：用图片作为背景的时候，css要这样写，以div容器举例子，也可以是body、td、p等的背景，道理一样。 div{ background:#FFF
实例：background-position定位
anyw3c的博客
05-08 580
实例：background-position定位 我们在写页面时经常会用到小图标，例如酱紫的[红色框内图标]! 我们使用的时候有的下载好是单个的矢量图，但是也有下载的是这样的模板矢量图! 场景：我们现在需要用到上图中灰色背景的垃圾箱小图标。 1.首先需要用工具量出小图标的大小，推荐工具是markman markman下载地址，和Photoshop CC，我这边测出长是17px，宽是15px...
html页面背景位置,background位置
weixin_42315537的博客
06-03 2083
css问题：如何用background定位我看一些大的网站上面，好多地方有用到图标的地方，都是将这些小图标整background:url(图片地址); background-position:12px -12px; //显示图片的X坐标 和Y坐标 简单的，你找一下background-position的用法，很多介绍的。css怎么调整背景图片的位置？background:url(/../../im...
border与background定位
超级丹的专栏
04-25 594
border与background定位
php background,CSS BACKGROUND定位背景上下左右偏移
weixin_39812465的博客
03-10 2327
css中我们经常使用background加载图片作为背景，这个背景图片可以通过具体属性的设置调整其上下左右偏移，调整背景图的上下左右偏移可以通过设置background属性或background-position属性来实现。我们以div加背景图片来举例子，其他的容器也都一样。主要来介绍一下背景background/background-position的几个属性。background语法格式：[p...
html背景定位,css background-position center left right top bottom代表意思
weixin_39633917的博客
06-07 3136
background-position:center right这里center right分别代表什么,引入对图片背景定位介绍background-position是用于定位背景图片中对象中显示定位，比如图片作为背景时在对象内什么位置开始显示，显示样式等。比如让一个图片作为对象背景距离对象左边或右边多少间距开始显示，距离对象上边或下边多少间距开始显示，或者用常见left、right、center...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值