CSS学习笔记05

于 2023-09-02 23:29:17 发布
阅读量567 收藏
点赞数
分类专栏： CSS学习笔记合集 文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53983068/article/details/132644066
版权

CSS笔记05

定位

position

  • CSS 属性position - 用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。position 有以下常用的属性值：
    • position: static; - 默认值。指定元素使用正常的布局行为，即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
    • position: relative; - 相对定位，元素先放置在默认的static位置，再在不改变页面布局的前提下调整元素位置。相对定位的元素不会被移出标准文档流，且元素原先在标准文档流中所占的空间会被保留。
    • position: absolute; - 绝对定位，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置，如果元素没有非static定位的祖先元素，绝对定位元素会相对于初始块容器的位置进行偏移。（初始块容器是一个有着和浏览器视口一样的尺寸的矩形，它包含根元素<html>。）元素绝对定位后会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
    • position: fixed; - 固定定位，通过指定元素相对于浏览器视口（viewport）本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。 元素固定定位后也会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
  • 补充 - 视口（viewport）：在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。
  • 下面我们就来详细演示一下这几种定位方式：

静态定位（默认定位） - static

  • position: static; - 默认值。指定元素使用正常的布局行为，即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

  • 首先我们设计一个页面，它由一个父级div和三个子级div组成，我们不手动设置position属性（即此时的position属性为其默认值position: static;）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默认位置</title>

    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 2px solid black;
        }
        #first {
            background-color: yellow;
            border: 2px dashed orange;
        }
        #second {
            background-color: deepskyblue;
            border: 2px dashed blue;
        }
        #third {
            background-color: lawngreen;
            border: 2px dashed green;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 我们查看默认情况下的网页效果：

在这里插入图片描述

相对定位 - relative

  • position: relative; - 相对定位，元素先放置在默认的static位置，再在不改变页面布局的前提下调整元素位置。相对定位的元素不会脱离标准文档流，且元素原先在标准文档流中所占的空间会被保留。因此，left: 20px; 会向元素的左外边距边界与其包含块左边界之间添加 20 像素的偏移量，其显示效果便是元素相比于默认位置向右移了 20 像素（在左侧留下了 20 像素的空白）。

  • 我们使用position: relative;将上面默认定位网页中的第一个和第三个div设置为相对定位，并使用top，right，bottom 和 left 属性来改变它们的位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>

    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 2px solid black;
        }
        #first {
            background-color: yellow;
            border: 2px dashed orange;
            position: relative; /* 设置定位方式为相对定位 */
            left: 20px;
            top: -20px;
        }
        #second {
            background-color: deepskyblue;
            border: 2px dashed blue;
        }
        #third {
            background-color: lawngreen;
            border: 2px dashed green;
            position: relative; /* 设置定位方式为相对定位 */
            right: 20px;
            bottom: -20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 查看使用相对定位改变元素位置后的网页效果：

在这里插入图片描述

  • 练习：
    • 使用div和超链接a布局页面
    • 每个超链接宽度和高度都为100px，背景颜色为粉色，当鼠标指针移上去时变为蓝色
    • 使用相对定位改变各个超链接的位置

在这里插入图片描述

  • 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            margin: 0 auto;
            padding: 10px;
        }

        a {
            width: 100px;
            height: 100px;
            display: block;
            background-color: pink;
            line-height: 100px;
            font-size: 15px;
            color: white;
            text-align: center;
            text-decoration: none;
        }

        a:hover {
            background-color: blue;
        }

        #second, #fourth {
            position: relative;
            left: 200px;
            top: -100px;
        }

        #fifth {
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>

</head>
<body>

<div id="box">
    <a id="first" href="#">链接1</a>
    <a id="second" href="#">链接2</a>
    <a id="third" href="#">链接3</a>
    <a id="fourth" href="#">链接4</a>
    <a id="fifth" href="#">链接5</a>
</div>

</body>
</html>
  • 查看网页效果：

在这里插入图片描述

绝对定位 - absolute

  • position: absolute; - 绝对定位，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置，如果元素没有非static定位的祖先元素，绝对定位元素会相对于初始块容器的位置进行偏移。（初始块容器是一个有着和浏览器视口一样的尺寸的矩形，它包含根元素<html>。）元素绝对定位后会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
  • 首先我们来测试一下在没有设置非static定位的祖先元素时，使用绝对定位改变元素第二个子div的位置：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>

    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 2px solid black;
        }
        #first {
            background-color: yellow;
            border: 2px dashed orange;
        }
        #second {
            background-color: deepskyblue;
            border: 2px dashed blue;
            position: absolute;
            left: 10px;
            top: 20px;
        }
        #third {
            background-color: lawngreen;
            border: 2px dashed green;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 查看使用相对定位改变元素位置后的网页效果：

在这里插入图片描述

  • 分析：

在这里插入图片描述

  • 接着我们再来测试一下在设置了非static定位的祖先元素后，使用绝对定位改变元素第二个子div的位置：
  • 将第二个子div的父级元素father设置为相对定位 -relative（通常我们都习惯将使用绝对定位的元素的父级元素设置为相对定位 - “ 子绝父相 ” ）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>

    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        /* 设置父级元素为非static定位 */
        #father {
            border: 2px solid black;
            position: relative;
        }
        #first {
            background-color: yellow;
            border: 2px dashed orange;
        }
        #second {
            background-color: deepskyblue;
            border: 2px dashed blue;
            position: absolute;
            left: 10px;
            top: 20px;
        }
        #third {
            background-color: lawngreen;
            border: 2px dashed green;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 查看使用绝对定位改变元素位置后的网页效果：

在这里插入图片描述

  • 分析：

在这里插入图片描述

固定定位 - fixed

  • position: fixed; - 固定定位，通过指定元素相对于浏览器视口（viewport）本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。 元素固定定位后也会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。

  • 下面我们重新写一个例子：在网页中定义两个div，第一个div使用绝对定位移动到初始块容器的右下角，第二个div使用固定定位移动到浏览器视口的右下角：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>

    <style>
        body {
            height: 1000px;
        }
        /* 绝对定位，相对于初始包含块(和浏览器视口大小相等的一个矩形) */
        div:nth-of-type(1) {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /* 固定定位，相对于浏览器视口本身 */
        div:nth-of-type(2) {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>绝对定位div</div>
<div>固定定位div</div>

</body>
</html>
  • 查看网页效果：

在这里插入图片描述

  • 可以看到此时两个div都移动到了右下角。那么它们的区别在哪里呢？
  • 下面我们滑动浏览器侧边的滚动条：

在这里插入图片描述

  • 我们可以发现使用绝对定位的div的位置会随着屏幕滚动而变化；而使用固定定位的div的位置则不会随着屏幕滚动而变化，始终在当前浏览器视口的右下角。

z-index 与 不透明度

  • 首先我们来理解一下什么是图层：

在这里插入图片描述

  • CSS 属性z-index指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上层。
  • 演示：
  • 首先我们写一个 HTML 页面：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="content">
    <ul>
        <li><img src="images/bg.png" alt="bg.png"></li>
        <li class="tipText">快来领养猫咪吧</li>
        <li class="tipBg"></li>
        <li>XX宠物救助中心</li>
    </ul>
</div>

</body>
</html>
  • 它的页面效果是这样的：

在这里插入图片描述

  • 我们给它添加一些样式：

style.css

#content {
    width: 460px;
    margin: 0;
    padding: 0;
    overflow-block: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 设置父级元素相对定位(子绝父相) */
#content {
    position: relative;
}

/* 绝对定位 */
.tipText, .tipBg {
    width: 460px;
    height: 25px;
    position: absolute;
    top: 285px;
}

.tipText {
    color: white;
}

.tipBg {
    background-color: black;
}
  • 此时的页面效果如下：

在这里插入图片描述

  • 我们发现我们的提示背景tipBg覆盖住了我们的提示文字tipText，导致我们看不到我们的提示文字。
  • 我们现在给提示文字tipText设置堆叠顺序，让它的堆叠顺序更高：

style.css

#content {
    width: 460px;
    margin: 0;
    padding: 0;
    overflow-block: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    position: relative;
}

.tipText, .tipBg {
    width: 460px;
    height: 25px;
    position: absolute;
    top: 285px;
}

/* z-index - 设置元素的堆叠顺序 */
.tipText {
    color: white;
    z-index: 99;
}

.tipBg {
    background-color: black;
}
  • 此时的页面效果如下：

在这里插入图片描述

  • 补充：为了让页面更美观，我们还可以使用opacity属性设置元素的不透明度：
#content {
    width: 460px;
    margin: 0;
    padding: 0;
    overflow-block: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    position: relative;
}

.tipText, .tipBg {
    width: 460px;
    height: 25px;
    position: absolute;
    top: 285px;
}

.tipText {
    color: white;
    z-index: 99;
}

/* opacity - 设置元素的不透明度(0.0 ~ 1.0) */
.tipBg {
    background-color: black;
    opacity: 0.5;
    /* filter: alpha(opacity=50); - IE8以及更早版本支持使用filter设置元素的不透明度 */
}
  • 此时的页面效果如下：

在这里插入图片描述

Bald Monkey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习
weixin_42498439的博客
02-19 483
CSS学习 1.什么是CSS 1.1.CSS的简单介绍 css全称（Cascading Style Sheets）层叠样式表，它是一种标记语言。为美化网页用的。 css选择器 什么是css选择器 h1{ color:red; } h1就是选择器，color为属性，red为值，color:red;为生命 标签选择器（如：body,div,p,ul,li）。 类选择器（如：class=“head”,class=“head_logo”） 。 ID选择器（如：id=“name”,id=“name_
CSS 学习笔记
09-25
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
css经典学习笔记.zip
11-01
css经典学习笔记
HTML+CSS学习笔记.zip
最新发布
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
css学习
苏不易染的博客
11-17 406
css复习笔记
CSS 学习（上）
lvmengzou的专栏
06-30 432
2网页的血肉：CSSHTML 决定了网页中包含哪些内容，而CSS 则决定了这些内容呈现的样式CSS  为层叠样式表 2.1 基本结构CSS 语法的基本结构由两部分组成：选择器（selector），样式（style）。选择器指定了CSS作用的目标DOM元素，样式决定了在目标元素上应用何种样式，包括样式名（property）和样式值（value）。例：h2{        color:blue}2.2...
学习CSS（一）
qq_56994594的博客
04-12 169
小白学习CSS（一）
JavaWeb中基本的CSS的使用
weixin_33705053的博客
06-19 232
动图CSS：页面美化和布局控制 一. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 二. 好处： 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 三. CSS的使用：CSS与html结合方式 1. 内联...
CSS入门学习
m0_74991285的博客
05-14 198
CSS的主要适用场景就是美化网页，布局页面的.基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签，比如p不能差异化选择较多类选择器可以选出一个或者多个标签可以根据需求选择一般多id选择器一次只能选择一个标签ID属性只能在每个HTML文档中出现一次一般和js搭配通配符选择器选择所有标签选择的太多，有部分不需要特殊情况使用属性表示注意点font-size字号通常用的单位是px 像素，一定要跟上单位字体实际工作中按照团队约定来写字体字体粗细。
CSS入门学习 —（全基础合集）
lerrel1的博客
07-28 957
CSS ( Cascading Style Sheets，层叠样式表 ），是一种用来为结构化文档（ 如 HTML 文档或 XML 应用 ）添加样式，字体，间距和颜色等的计算机语言
CSS全面学习
以码平川的博客
03-01 581
CSS全面学习 课程内容 HTML 和CSS基础知识 html元素的分类和特性 html元素的默认样式和定制化 CSS选择器全解析 CSS常见属性逐一讲解 CSS布局实战 布局属性和组合解析 常见布局方案介绍 三栏布局案例 国内大站布局方案解析 动画和效果专题讲解 多背景多投影特效 3D特效编写实践 过渡动画和关键帧动画实践 动画细节和原理深入解析 框架集成和CSS过程化 预处理器作用和原理 Less和Sass代码实践 Bootstrap原理和用法 CSS过程化实践方式 JS框
html5&css3学习笔记下载
09-21
HTML5（HyperText Markup Language 5）是一种用于构建和呈现网页内容的标准的最新版本。... ...其中一些突出的特点包括： ... ...它不仅可以用于构建传统的网页和博客，还可以用于开发移动应用、游戏、视频播放器等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值