css 布局和选择器

最新推荐文章于 2024-09-11 10:34:35 发布

抹泪的知更鸟

最新推荐文章于 2024-09-11 10:34:35 发布

阅读量966

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51596354/article/details/122542429

版权

本文详细介绍了CSS布局中的浮动和定位概念，包括Float、Position的四种定位方式及清除浮动的方法。此外，还深入探讨了CSS复杂选择器，如子元素选择器、直接子元素选择器、相邻兄弟选择器、后续兄弟选择器和伪类元素选择器的用法，通过多个案例展示了它们在实际开发中的应用。文章最后总结了属性选择器的使用，帮助读者全面掌握CSS布局和选择器技巧。

摘要由CSDN通过智能技术生成

css布局和选择器

总结：

学习目标

了解定位的概念
掌握如何实现元素的任意布局 重点 难点
掌握实际开发特效的实现 难点
掌握CSS复杂选择器的使用 重点
掌握CSS属性选择器的使用方法
掌握CSS特效制作的方法 重点 难点

CSS Float(浮动)

Float（浮动），只能使元素向左或向右移动，其周围的元素的内容会被浮动的元素的内容挤到周围。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

属性	描述
float	使元素浮动到左边或者右边（left、right）

浮动元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
浮动元素的空间将不存在，所以这个元素后边的元素会占据浮动元素原本的空间，导致浮动元素覆盖后面的元素，后面的元素需要使用clear属性清除浮动的覆盖。

案例01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
     
				float: right;
			}
		</style>
	</head>
	<body>
		<img src="image/avatar.jpg"/>
		觉得很卡机的话那的艰苦撒旦的艰苦撒谎空间大倒萨立刻就发生范德萨浪费
		疯狂的思路发生分类考试的价格快速拉高饿死了咖啡连锁店过的思路开发公
		疯狂的思路发生分类考试的价格快速拉高饿死了咖啡连锁店过的思路开发公
		疯狂的思路发生分类考试的价格快速拉高饿死了咖啡连锁店过的思路开发公
		疯狂的思路发生分类考试的价格快速拉高饿死了咖啡连锁店过的思路开发公
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5hsu9yD-1642407379699)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220115185148838.png)]$

图片浮动到最右边，将正常排版的文字挤到旁边，并不会覆盖住文字。

案例02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
     
				list-style-type: none;
			}
			li{
     
				float: left;
				padding: 20px;
				background-color: #DC143C;
				color: white;
			}
			h4{
     
				background-color: blueviolet;
				color: white;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>家具</li>
			<li>服饰</li>
			<li>汽车</li>
			<li>装饰</li>
			<li>鞋包</li>
			<li>儿童</li>
		</ul>
		<h4>内容</h4>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iArNQ94f-1642407379701)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220115185233032.png)]$

清除浮动

清除浮动的属性一般用于浮动元素后面的元素，用户清除上面浮动元素对其产生的影响

属性	描述
clear	清除上面浮动元素的影响（left、right、both）

案例03

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
     
				list-style-type: none;
			}
			li{
     
				float: left;
				padding: 20px;
				background-color: #DC143C;
				color: white;
			}
			h4{
     
				background-color: blueviolet;
				color: white;
				clear: both;/*清除上面浮动元素的影响，并从新的行开始*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li>家具</li>
			<li>服饰</li>
			<li>汽车</li>
			<li>装饰</li>
			<li>鞋包</li>
			<li>儿童</li>
		</ul>
		<h4>内容</h4>
	</body>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jNxzuOll-1642407379702)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220115185305101.png)]$

总结

浮动的特征：
1. 把任何元素看成：元素 = 空间 + 内容
2. 浮动的元素只能浮动到左边或者右边，不能居中
3. 浮动后的元素的空间不存在，但内容还存在
4. 浮动元素的内容会和下面的元素显示在同一行
5. 浮动元素的内容会把下面的元素的的内容挤压到旁边
清除浮动
1. 想让浮动的元素独占一行，不影响后面的元素排版，需要给后面的第一个元素加clear:bath清除浮动
2. 当一个元素的所有子元素都浮动后，子元素的空间都不存在了，这个元素的高度会变为0px，导致这个元素的背景等看不到，需要给这个元素加overflow:hidden;或者display:inline-block;。

CSS position (定位)

position 属性指定了元素的定位类型。

属性	描述
Static	静态定位，默认值，就是没有定位。
Relative	相对定位，相对当前元素位置
Fixed	固定定位，在页面上固定的位置出现
Absolute	绝对定位，相对于上级已经定位的元素的位置

static 静态定位（默认）

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 固定定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。

案例04

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录