css定位

最新推荐文章于 2024-05-17 21:20:19 发布
最新推荐文章于 2024-05-17 21:20:19 发布
阅读量77 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43755916/article/details/101031661
版权

在这里插入图片描述

普通流定位

在这里插入图片描述

浮动定位

float:left/right;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		div{
			width:300px;
			height:200px;
			
		}
		#d1{
			height:200px;
			background:#fa0;
			float:left;
		}
		#d2{
			height:200px;
			background:#f00;
			float:left;
		}
		#d3{
			height:500px;
			background:#ff0;
			float:left;
		}
		#d4{
			height:600px;
			background:#0ff;
			float:left;
		}
		#d5{
			height:200px;
			background:#f0f;
			float:left;
		}
	</style>
	</head>
	<body>
	<!--浮动-->
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		<div id="d4"></div>
		<div id="d5"></div>
	</body>
</html>

清除浮动影响

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		div{
			width:300px;
			height:200px;
			
		}
		#d1{
			height:200px;
			background:#fa0;
			float:left;
		}
		#d2{
			height:300px;
			background:#f00;
			float:left;
		}
		#d3{
			height:200px;
			background:#ff0;
			float:left;
		}
		#d4{
			height:200px;
			background:#0ff;
			float:left;
		}
		#d5{
			height:200px;
			background:#f0f;
			clear:both;
		}
	</style>
	</head>
	<body>
	<!--浮动-->
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		<div id="d4"></div>
		<div id="d5"></div>
	</body>
</html>

高度坍塌
块级元素的高度如果不设置，高度以内部元素内容为准
如果内部元素浮动，浮动元素不占页面控件
父元素的高就没有了
解决方案
在这里插入图片描述

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		#d1{
			width:450px
			background:#fa0;
			border:1px solid #000;
		}
		#d2,#d3,#d4,#d5{
			width:100px;
			height:100px;
			float:left;
		}
		#d2{
			background:#ff0;
		}
		#d3{
			background:#e50;
		}
		#d4{
			background:#c0f2f8;
		}
		#d5{
			background:#8e8e8e;
			clear:left;
		}
		#d6{
			clear:both;
		}
	</style>
	</head>
	<body>
	<!--浮动-->
		<div id="d1">
			
			<div id="d2"></div>
			<div id="d3"></div>
			<div id="d4"></div>
			<div id="d5"></div>
			<div id="d6"></div>
		</div>
	</body>
</html>
高鹏飞白羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端css定位.pdf
07-28
总的来说，CSS定位技术为前端布局提供了强大的控制能力，可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式（标准流、浮动、定位）中的应用，对于前端开发者来说至关重要。在网页布局中，定位通常是在...
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
CSS定位
热门推荐
Ma_jiao的博客
07-14 1万+
定位 是布局中的重要属性，一般用于盖压效果与位置相关效果。 position 给元素设置整体定位，必须同时存在position属性和偏移量属性。 属性值 说明 relative 相对定位 absolute 绝对定位 fixed 固定定位 偏移量属性 定位的元素，在水平或垂直方向需要偏移的距离。 水平：left、right 垂直：top、bottom relstive(相对定位) 参考这个元素原始应该加载的位置。 相对定位没有脱离原始状态（标准流，浮动），它不会让出原来占有的位
CSS定位详解
yjp1240201821的博客
05-17 1386
本节主要讲解CSS定位，从其概念、定位机制、兄弟单位、绝对定位、固定定位等多个方面帮助深刻理解css定位。
css定位属性
weixin_48180273的博客
01-28 4891
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
CSS定位与浮动
m0_49034593的博客
08-18 2201
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
selenium之css定位详解
王大傻的博客
02-22 8226
css定位 css概述： 1、css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。 2、css语言中有css选择器，在selenium中也可以使用这种选择器来进行元素定位。 3、css定位方式比xpath快，而且css的语法也非常强大，所以非常推荐这种方式定位。 css定位策略（方式）： 1、id选择器 2、class选择器 3、元素选择器 4、属性选择器 5、层级选择器 css定位方法：find_element_by_css_selector() 1
CSS定位布局详解
大河之犬的博客
10-03 7165
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
html+css定位练习
08-05
总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
深入理解CSS定位与层叠
12-13
position：static(静态定位) 当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题。所以当没有定义position属性时，并不说明该元素没有...
nodejs之MySQL插入数据
weixin_43755916的博客
09-06 9416
const mysql=require(‘mysql’); //创建链接池 var pool=mysql.createPool({ host:‘127.0.0.1’, port:3306, user:‘root’, password:‘123456’, database:‘course’, //使用的数据库 connectionLimit:20 //设置连接池的数量 }); //插入数据 pool...
nodejs 追加写入appendFile
weixin_43755916的博客
09-03 3513
追加写入appendFile 具有创建文件和追加写入的功能 fs.appendFile（路径，内容，回调函数） fs.appendFileSync（路径，内容） 如果文件不存在会创建文件，如果文件存在会追加到末尾 fs.appendFile(’./data1.txt’,‘hello\n’,(err)=>{ if(err) throw err; console.log(‘写入成功’); });...
nodejs读取文件readFile
weixin_43755916的博客
09-03 3007
nodejs读取文件readFile(路径，回调函数)、fs.readFileSync（路径） 读取的数据格式为buffer //读取文件 fs.readFile(’./data1.csv’,(err,data)=>{ if(err){throw err;} console.log(data); }); 练习：判断文件num.txt是否存在，如果不存在，创建该文件，写入数字0。读取文件中的内...
nodejs定时器
weixin_43755916的博客
08-23 2507
1、一次性定时器 //一次性定时器 var timer=setTimeout(回调函数，时间) var timer=setTimeout(()=>{ console.log(‘哈哈哈！蹦蹦蹦’); },3000); //清除一次性定时器clearTimeout clearTimeout(timer); //周期性定时器var timmer=setInteval(回调函数，时间) var ...
nodejs目录导入，第三方模块导入，核心模块
weixin_43755916的博客
08-23 1932
//目录导入，在目录中加入一个package.json文件，文件中键入{“main”:“test.js”}，意思是包名找test.js var obj=require(’./newdir’); console.log(obj); 第三方模块下载 自动下载地址： https://www.npmjs.com/ 需要已经安装OK的npm，一般安装了nodejs就会默认安装npm 在你的nodejs...
HTML属性和值
weixin_43755916的博客
09-10 925
通过属性和值进行修饰 <标记 属性1=“值1” 属性2=“值2” 属性3=“值3”></标记> 属性必须声明在开始在标记中 属性分类： 1，标准属性（通用属性） 所有元素都支持的属性 id：定义元素在页面中唯一标示 tittle：鼠标悬停在元素上的提示文本 class：css中，引用类选择器 style：css中，定义行内样式 ,2，专用属性，只对一些（某个）标签起作用 &...
nodejs中间件
weixin_43755916的博客
09-05 900
中间件的作用是为主要的业务逻辑所服务 分类： 应用级的中间件 路由级的中间件 内置的中间件 第三方中间件 错误级中间件 1，应用级中间件 每一个中间件就是调用一个函数，需要配合其他的中间件或者路由使用 拦截所有的路由server.use(函数) const express=require(‘express’); var server=express(); server.listen(8888);...
playwright css 定位
最新发布
07-19
对于CSS定位，它本身并不直接提供对CSS定位语法的支持，如`position`, `left`, `top`, `relative`, `absolute`, 或者`fixed`等。然而，当你通过Playwright控制浏览器元素（例如通过`page.$`或`page.selectElement`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值