css选择器，5个定位

菜鸟张小花

已于 2022-12-08 16:52:53 修改

阅读量894

点赞数 1

文章标签： css html 前端

于 2022-12-08 16:51:45 首次发布

本文链接：https://blog.csdn.net/weixin_64289861/article/details/128230835

版权

前言

什么是css？——css是描述HTML文档样式的语言，css描述应该如何显示HTML元素

为什么要使用css样式？——可以修饰当前网页呈现不同维度和效果

css解决的问题？代码格式乱，便于维护阅读节省大量的工作

css的语法规则——选择器，声明块（声明块用花括号分开有很多个声明块；每个声明块用分号隔开）

一、css的选择器

1.基本选择器

1.1、元素选择器

1.2、id选择器（使用前要在id名前加上#例如：#id{} 注意：id名不能以数字开头）优先级：id选择器>元素选择器

1.3、类选择器（使用前要在class名前加上.例如：.class{} ）优先级：类选择器>元素选择器

1.4、通用选择器（使用*选择页面上所有的html元素）优先级：元素选择器>通用选择器

1.5分组选择器（选取所有具有相同样式定义的html的元素例如：p,#id,.class{}）

2.组合选择器

2.1后代选择器（以空格分隔）优先级：后代选择器>分组选择器

2.2子元素选择器（以大于号>分割）子元素选择器只能某元素的直接的一级子元素容器具有选择性（容器可以存放东西例如：div是容器可以存放内容；p标签并不是容器，不能存放）

div是容器没有语义

具有语义的容器：header表示页头 footer表示页尾 artrcle整篇内容 section通常用于表示文章章节 aside侧边栏内容

优先级：分组选择器>子代选择器

2.3兄弟选择器

相邻兄弟元素（例如：div + p, div +p + p, div + p +p+....）

后续兄弟选择器(后续兄弟选择器包含（大于）相邻兄弟选择器；用法：div ~p)

3：属性选择器

元素[attribute="值"]{},注意元素和[]之间不能有空格

a标签有四种状态：

1. link点击之前

2 .hover移入的样式

3. action点击时的样式

4. visited浏览过后

<!--错误情况-->
<style>
    p [class="a"]{
        color: yellow;
    }
</style>
<p class="a">欧诺拉万人演唱会</p>
<!--标签和属性框之间不能有空格-->

二、定位

1position：static（静态）默认

<style>
    .dw{
        position: static;
        border:1px solid pink;
    }
</style>
<body>
    <div class="dw">你好哇</div>
</body>

2.relative:相对定位

3.felx：固定定位（相对于视口）视口大于窗口

4.absolute：绝对定位相对于最近的定位先祖元素定位，如果没有最近的先祖元素就像对于body

5.sticky：元素根据用户的滚动位置进行定位(相对和固定定位之间相互切换）

<style>
    .sticky{
        position：sticky;
        top: 0;
        background-color:pink;
     }
</style>

<body>
    <div class="sticky">顶部导航</div>
</body>

注意：当父级是绝对定位置时会被影响

重叠元素

z-index=“值”可以用值的正负来设置堆叠顺序

四个定位的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.a{
			position: absolute;
			top: 0px;
			z-index:1;
			width: 20%;
			height: 400px;
			background-color: antiquewhite;
		}
		.r{
			position: relative;
			bottom: 0px;
			z-index: -1;
			width: 20%;
			height: 2400px;
			background-color: aqua;
		}
		.f{
			position: fixed;
			top: 20px;
			right: 0px;
			width: 10%;
			height: 100px;
			background-color: brown;
		}
		.s{
			position: sticky;
			top: 0px;
			width: 100%;
			height: 40px;
			background-color: green;
			z-index: 2;
		}
	</style>
	<body>
		<div class="s">默认定位</div>
		<div>
			<div class="a">绝对定位</div>
		</div>
		<div class="r">相对定位</div>
		<div class="f">固定定位</div>
	</body>
</html>