【笔记:CSS基础】

从零构建企业级多智能体系统:LangGraph 全流程实战 + 部署指南(含代码与架构图) > 在大模型应用爆发的今天,如何构建一个可协作、可调试、可部署的多智能体系统?LangGraph 正在成为工程师的新宠。本文从原理剖析、流程建模、代码实战到前后端部署,手把手带你用 LangGraph 构建一个企业级 AI 助理系统,整合财务分析、法务审阅、报告生成与图表可视化等 Agent 模块,全面打通从用户输入到报告输出的全链路闭环。适合有工程思维的 AI 架构师、Agent 研发人员、以及大模型项目实践者。 阅读详情


HTML + CSS + JavaScript

结构 + 表现 + 交互

1. CSS简介

  1. CSS是什么
  2. CSS怎么用
  3. CSS选择器
  4. 美化网页(文字,阴影,超链接,列表)
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画(特效)

1.1 什么是CSS

Cascading Style Sheet层叠级联样式表

CSS:表现(美化网页)

字体、颜色、边距、高度、背景图片、网页定位、网页浮动…

1.2 发展史

CSS1.0

CSS2.0 Div(块) + CSS , HTML与CSS结构分离的思想,SEO

CSS2.1 浮动、定位

CSS3.0 圆角边框、阴影、动画… 浏览器兼容性

1.3 快速介绍

style

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 规范,<style> 可以编写css代码,每一个声明最好使用分号结尾 -->
    <!-- 
        语法:
            选择器{
                声明1;
                声明2;
                声明3;
            }
     -->
    <style>
        h1 {
            color: brown;
        }
    </style>

</head>

<body>

    <h1>我是标题</h1>

</body>

</html>

结构分离

image.png

CSS优势:

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式十分的丰富
  4. 利用SEO,容易被搜索引擎收录

1.4 CSS的3中导入方式

优先级:就近原则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 内部样式 -->
    <style>
        h1 {
            color: brown;
        }
    </style>

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <!-- 行内样式:在标签元素中,编写一个style属性,编写样式即可 -->
    <h1 style="color: red">我是标题</h1>

</body>

</html>

拓展:外部样式两种写法

  • 链接式:html

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">
    
  • 导入式:@import 是CSS2.1特有

    <style>
        /* 导入式 */
        @import url(css/style.css);
    </style>
    

通常建议使用Link式

2. 选择器

作用:选择页面上的某一个或某一类元素

2.1 基本选择器

  1. 标签选择器:选择一类标签 标签{}

        <style>
            /* 标签选择器,会选择到页面上所有的这个标签的元素 */
            h1 {
                color: rgb(63, 212, 105);
            }
    
            p {
                font-size: 80px;
            }
        </style>
    </head>
    
    <body>
        <h1>一二三</h1>
        <p>四五六</p>
        <h1>七八九</h1>
    </body>
    
    
  2. 类选择器:选中所有的class属性一致的标签 .类名{}

        <style>
            /* 类选择器的格式: .class的名称{} */
            /* 好处:可以多个标签归类,是同一个class,可以复用 */
            .one {
                color: rgb(209, 48, 48);
            }
    
            .two {
                color: rgb(48, 240, 199);
            }
        </style>
    </head>
    
    <body>
        <h1 class="one">标题</h1>
        <h1 class="two">标题</h1>
        <h1 class="one">标题</h1>
    
        <p class="two">标签</p>
    </body>
    
  3. Id选择器:全局唯一 # id名{}

        <style>
            /* 
            id选择器  :id必须保证全局唯一
                #id名称{}
            */
            #one {
                color: red;
            }
        </style>
    </head>
    
    <body>
        <h1 id="one">标题1</h1>
        <h1">标题2</h1>
        <h1>标题3</h1>
    </body>
    

不遵循就近原则

优先级:id选择器 > class选择器 > 标签选择器

2.2 层次选择器

  1. 后代选择器:在某个元素的后面 爷爷、爸爸、儿子

    /* 后代选择器 */
    body p {
    	background: red;
    }
    
  2. 子选择器

  3. 子选择器: 一代,儿子

    /* 子选择器 */
    body>p {
        background: green;
    }
    
  4. 相邻兄弟选择器: 第一个弟弟

    /* 相邻兄弟选择器 (只有一个,相邻(向下)) */
    .active+p {
        background: brown;
    }
    
  5. 通用选择器 : 弟弟们

    /* 通用选择器 当前选择元素向下的所有兄弟元素 */
    .active~p {
        background: yellow;
    }
    
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>

    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>

2.3 结构伪类选择器

伪类: 条件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* ul的第一个子元素 */
        ul li:first-child {
            background: red;
        }

        /* ul的最后一个子元素 */
        ul li:last-child {
            background: green;
        }

        /* 选中 p1 : 定位到父元素,选择当前的第一个元素,并且是当前元素才生效 */
        p:nth-child(1) {
            background: yellow;
        }

        /* 选中父元素下的,p元素的第二个类型 */
        p:nth-of-type(2) {
            background: cyan;
        }
    </style>
</head>

<body>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

</html>

image.png

2.4 属性选择器(常用)

id + class 结合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .demo a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 存在id属性的元素 a[]{}*/
        /* 属性名,属性名 = 属性值(正则) */
        /* 
            = : 绝对等于
            *= : 包含这个这个元素
            ^= : 以这个开头
            $= : 以这个结尾
        */
        a[id] {
            background: yellow;
        }

        a[id=second] {
            background: cyan;
        }

        a[class*="links"] {
            background: red;
        }

        /* 选中href中以https开头的元素 */
        a[href^=https] {
            background: black;
        }

        a[href$=pdf] {
            background: brown;
        }
    </style>
</head>

<body>

    <p class="demo">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="" id="second" target="_blank" title="test">2</a>
        <a href="images/123.html" class="links item">3</a>
        <a href="images/123.png" class="links item">4</a>
        <a href="images/123.jpg" class="links item">5</a>
        <a href="abc" id>6</a>
        <a href="/a.pdf">7</a>
        <a href="/abc.pdf">8</a>
        <a href="abc.doc">9</a>
        <a href="abcd.doc" class="links item last">10</a>
    </p>

</body>

</html>

image.png

= : 绝对等于
*= : 包含这个这个元素
^= : 以这个开头
$= : 以这个结尾

3. 美化网页元素

span标签:重点要突出的字,使用span套起来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #title1 {
            font-size: 50px;
        }
    </style>
</head>

<body>
    这个是<span id="title1">重点</span>
</body>

</html>

3.1 字体样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 
            font-family:字体
            font-size:字体大小
            ont-weight:字体粗细 
            color:字体颜色

        */
        body {
            font-family: Arial Black, 楷体;
            color: brown;
        }

        h1 {
            font-size: 50px;
        }

        .p1 {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>剧情简介</h1>
    <p class="p1">
        不久的未来,人类的世界早已拥挤不堪,迈向星河、寻找新家园的行动迫在眉睫。
    </p>

    <p class="p2">
        正当一切有条不紊的推进之时,月相异动,脚下的大地爆发了长达数十年、剧烈的地质变化,人类在这场浩劫中所剩无几。当天地逐渐恢复平静,人们从废墟和深渊中重新踏上了这片熟悉而又陌生的大地。习惯了主宰一切的我们是否还是这个世界的主人。
    </p>

    <p>
        a little white thistle moon
          blown over the cold crags and fens:
          a little white thistle moon
          blown across the frozen heather
    </p>
</body>

</html>

image.png

3.2 文本样式

  1. **颜色 **:color rgb rgba
  2. 文本对齐方式 :text-align =
  3. 首行缩进 :text-indent = 2em
  4. 行高: line-height 单行文字上下居中:line-height = hight
  5. 装饰 :text-decoration
  6. 文本图片水平对齐: vertical-align: middle;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 
        颜色:
            单词
            RGB 0~F
            RGBA A(透明度):0~1

        text-align:排版

        text-indent:首行缩进

        line-height:行高
        行高 和 块 的高度一致,就可以上下居中
        */
        h1 {
            color: rgba(0, 255, 255, 0.5);
            /*居中*/
            text-align: center;

        }

        .p1 {
            text-indent: 2em;
        }

        .p3 {
            background: cyan;
            height: 100px;
            line-height: 100px;
        }

        .l1 {
            /* 下划线 */
            text-decoration: underline;
        }

        .l2 {
            /* 中划线 */
            text-decoration: line-through;
        }

        .l3 {
            /* 上划线 */
            text-decoration: overline;
        }

        /* 超链接去下划线 */
        a {
            text-decoration: none;
        }

        /* 水平对齐,参照物, a,b */
        img,
        span {
            vertical-align: middle;
        }
    </style>
</head>

<body>

    <a href="">123</a>

    <p class="l1">123456</p>
    <p class="l2">123456</p>
    <p class="l3">123456</p>

    <img src="images/猫猫.jpg" alt="">
    <span>abcdefg</span>

    <h1>剧情简介</h1>

    <p class="p1">
        不久的未来,人类的世界早已拥挤不堪,迈向星河、寻找新家园的行动迫在眉睫。
    </p>

    <p class="p2">
        正当一切有条不紊的推进之时,月相异动,脚下的大地爆发了长达数十年、剧烈的地质变化,人类在这场浩劫中所剩无几。当天地逐渐恢复平静,人们从废墟和深渊中重新踏上了这片熟悉而又陌生的大地。习惯了主宰一切的我们是否还是这个世界的主人。
    </p>

    <p class="p3">
        a little white thistle moon
          blown over the cold crags and fens:
          a little white thistle moon
          blown across the frozen heather
    </p>
</body>

</html>

image.png

3.3 超链接伪类

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 默认的状态 */
        a {
            text-decoration: none;
            color: black;
        }

        /* 鼠标悬浮的状态 */
        a:hover {
            color: orange;
        }

        /* 鼠标按住未释放的状态 */
        a:active {
            color: green;
        }

        a.visited {
            color: red;
        }
    </style>
</head>

<body>

    <a href="">
        <img src="images/码出高效.jpg" alt="">
    </a>

    <p>
        <a href="#">码出高效:Java开发手册</a>
    </p>

    <p>
        <a href="">作者:孤尽老师</a>
    </p>

    <p id="price">
        ¥99
    </p>
</body>

</html>

3.4 阴影

/* text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径 */
#price {
text-shadow: tomato 10px 0px 2px;
}

image.png

3.5 列表

/* ul li */
/* 
list-style
    none:去掉原点
    circle:空心圆
    decimal:数字
    square:方形
*/
/* ul{
    background: whitesmoke;
} */

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

3.6 背景

  • 背景颜色
  • 背景图片
<style>
        div {
            width: 1000px;
            height: 700px;
            border: 1px solid blue;
            /* 默认全部平铺 */
            background-image: url(images/猫猫.jpg);
        }

        .div1 {
            background-repeat: repeat-x;
        }

        .div2 {
            background-repeat: repeat-y;
        }

        .div3 {
            background-repeat: no-repeat;
        }
  </style>
/*颜,图片,图片位置,平铺方式*/
.title{
    background: red url("...") 200px 10px no-repeat;
}

ul li{
    background-image:url("...");
    background-repeat:no-repeat;
    background-position:200px 2px;    
}

3.7 渐变

渐变色生成网站:https://www.grabient.com/

background-color: #4158D0;
background-image: linear-gradient(303deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

image.png

4. 盒子模型

image.png

  • margin:外边距

  • padding:内边距

  • border:边框

盒子的计算方式:这个元素到底有多大?

  • margin + border + padding + 内部元素

4.1 边框

  • 粗细
  • 样式
  • 颜色

一般浏览器中都对body标签进行默认的margin设置为8px,我们使用时可以对其初始化为0

border:粗细,样式,颜色

<style>
    /* body总有一个默认的外边距 */
    /* 我们可以对他们进行初始化,常见操作 */
    h1,
    ul,
    li,
    a,
    body {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
    }

    h2 {
        font-size: 16px;
        background: rgb(242, 124, 124);
        line-height: 30px;
        margin: 0;
        color: white;
    }

    /* border:粗细,样式,颜色 */
    #app {
        width: 300px;
        border: 1px solid red;
    }

    form {
        background: rgb(22, 132, 22);
    }

    div:nth-of-type(1) input {
        border: 2px solid black;
    }
</style>

<body>

    <div id="app">
        <h2>会员登录</h2>

        <form action="#">
            <div>
                <span>用户名:</span>
                <input type="text">
            </div>
            <div>
                <span>密码:</span>
                <input type="password">
            </div>
            <div>
                <span>邮箱:</span>
                <input type="email">
            </div>

        </form>
    </div>
</body>

</html>

image.png

4.2 边距

  • margin设为一个值时,表明四个子属性均为此值;
  • 设为两个值时,表明margin-top和margin-bottom将为第一个值,margin-left和margin-right将为第二个值;
  • 设为三个值,表明margin-top取第一个值,margin-left和margin-right取第二个值,margin-bottom取第三个值;
  • 设为四个值,则按照top, right, bottom, left的顺序从第一个值开始设置

padding同理

注:

  • 可以通过对块级元素设置 text-align:center;的方式来实现内联元素(如文本、图片)居中
  • margin:0 auto;可以使盒子居中,text-align:center;可以使此盒子内的内联元素居中,故有时需要两者结合使用才能使得盒子及其中文本一起居中。

4.3 圆角边框

4个角

border-radius:左上 右上 右下 左下 (顺时针)

圆圈: border大小设置为小于长度(宽度)的一半。

<style>
    div {
        width: 100px;
        height: 100px;
        border: 10px solid red;
        /* 左上,右上,右下,左下 (顺时针) */
        /* 圆圈:圆角=宽度 */
        border-radius: 50px 20px 10px 5px;
    }

    img {
        border-radius: 30px;
    }
</style>

<body>
    <div></div>

    <img src="images/猫猫.jpg" alt="">
</body>

image.png

4.4 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset

值说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影(开始时)改变阴影内侧阴影
<style>
    div {
        width: 100px;
        height: 100px;
        border: 10px solid red;
        box-shadow: 10px 10px 10px black;
    }
</style>


<body>
    <div>
    </div>
</body>

image.png

5. display与浮动

标准文档流:

  • 块级元素:独占一行
h1~h6	p	div	列表......
  • 行内元素:不独占一行
span	a	img	strong......

行内元素可以被包含于块级元素中,反之不可行

5.1 display

常用值

block:块元素
inline:行内元素
inline-block:是块元素,但可以有在一行
none:消失

display可能的值

值描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table此元素会作为块级表格来显示,表格前后带有换行符。
inline-table此元素会作为内联表格来显示,表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示
table-header-group此元素会作为一个或多个行的分组来显示
table-footer-group此元素会作为一个或多个行的分组来显示
table-row此元素会作为一个表格行显示
table-column-group此元素会作为一个或多个列的分组来显示)
table-column此元素会作为一个单元格列显示
table-cell此元素会作为一个表格单元格显示
table-caption此元素会作为一个表格标题显示
inherit规定应该从父元素继承 display 属性的值。

5.2 浮动

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

  • 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

  • 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • 浮动元素之后的元素将围绕它。

  • 浮动元素之前的元素将不会受到影响。

  • 如果图像是右浮动,下面的文本流将环绕在它左边:

img
{
    float:right;
}
  • 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
  • clear 属性指定元素两侧不能出现浮动元素。如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
.text_line
{
    clear:both;
}

5.3 父级边框塌陷问题

clear

值描述
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
inherit规定应该从父元素继承 clear 属性的值。

解决方案:

  1. 增加父级元素的高度(不推荐),(元素有了固定宽度就会被限制)

  2. 在父级边框内部最下方,增加一个空的div标签,清除浮动(代码中尽量避免空div)

    <div id = "father">
        ...
        <div class = "clear"></div>
    </div>
    
    .clear{
        clear:both;
        margin:0px;
        padding:0px;
    }
    
  3. overflow:操作简单,但是有一点不好,在有下拉菜单的时候,下拉菜单会显示不出来,下拉的一些场景避免使用。

    /*在父级元素中添加overflow: hidden*/
    overflow:hidden;
    

    overflow可能的值

    值描述
    visible默认值。内容不会被修剪,会呈现在元素框之外。
    hidden内容会被修剪,并且其余内容是不可见的。
    scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit规定应该从父元素继承 overflow 属性的值。
  4. 父类添加一个伪类:after(推荐):写法稍微复杂,但是无副作用,推荐使用。

    #father: after {
    	content: "";
        display: block;
        clear: both;
    }
    

5.4 对比

  • display
    • 方向不可控制
  • float
    • 方向可控
    • 浮动起来会脱离标准文档流,要解决父级边框塌陷的问题

6. 定位

属性值

值描述
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
sticky粘性定位,该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit规定应该从父元素继承 position 属性的值。
initial设置该属性为默认值

默认状态

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid black;
            padding: 0px;
        }

        #first {
            background-color: cyan;
            border: 1px dashed black;
        }

        #second {
            background-color: green;
            border: 1px dashed black;
        }

        #third {
            background-color: red;
            border: 1px dashed black;
        }
    </style>
</head>

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

</html>

image.png

6.1 相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

相对原来的位置进行指定的偏移,相对定位后,仍然在标准文档流中,原来的位置会被保留

position: relative;
top: -20px;
left: -20px;
bottom: -20px;
right: -20px;
#first {
    background-color: cyan;
    border: 1px dashed black;

    /* 相对定位: */
    position: relative;
    top: -20px;
    left: -20px;
}

#second {
    background-color: green;
    border: 1px dashed black;
}

#third {
    background-color: red;
    border: 1px dashed black;
    position: relative;
    bottom: -20px;
    right: -20px;
}

image.png

6.2 绝对定位

  1. 没有父级元素定位的前提下,相对于浏览器进行定位
  2. 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内

相对父级或浏览器的位置进行指定的偏移,绝对定位后,不在标准文档流中,原来的位置不会被保留

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

例:

#second {
    background-color: green;
    border: 1px dashed black;
    position: absolute;
    right: 20px;
}

image.png

6.3 固定定位fixed

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

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

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            height: 1000px;
        }

        /* 绝对定位,相对于浏览器 */
        div:nth-of-type(1) {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        /* fixed:固定定位 */
        div:nth-child(2) {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: fixed;
            right: 0;
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div>div1</div>
    <div>div2</div>
</body>

</html>

动画.gif

6.4 z-index,透明度

默认是0,最高999

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

**注释:**元素可拥有负的 z-index 属性值。

**注释:**Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

说明

该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

可能的值

值描述
auto默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值。

透明度

opacity: value|inherit;
值描述
value规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
inherit应该从父元素继承 opacity 属性的值。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="content">
        <ul>
            <li><img src="images/猫猫.jpg" alt=""></li>
            <li class="tipText">看猫</li>
            <li class="tigBg"></li>
            <li>时间:2099-01-01</li>
            <li>地点:月球一号基地</li>
        </ul>
</body>
</div>


</html>
#content{
    width: 150px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid; 
}

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

#content ul{
    position: relative;
}

.tipText, .tigBg{
    position:absolute;
    width: 150px;
    height: 25px;
    top:127px;
}

.tipText{
    color: white;
    /* 堆叠顺序 */
    /* 越高,层级越靠上,覆盖下面的东西 */
    z-index: 999;
}

.tigBg{
    background: black;
    /* 透明度 */
    opacity: 0.5;
}

image.png

Cadence IC5141保姆级教程:Bandgap电路四大仿真(稳定性/噪声/启动/PSRR)完整流程与调参心得 本文提供Cadence IC5141中Bandgap电路的四大仿真(稳定性仿真、噪声仿真、启动仿真、PSRR仿真)的完整流程与调参心得。从原理图检查到ADE L配置,详细解析各仿真步骤的关键参数设置与优化策略,帮助工程师高效完成电路设计与性能调优。 阅读详情

相关推荐

代码复现——SymAgent:一种用于知识图谱复杂推理的神经符号自学习Agent框架

根据《SymAgent: A Neural-Symbolic Self-Learning Agent Framework for Complex Reasoning over Knowledge Graphs》(《SymAgent:一种用于知识图谱复杂推理的神经符号自学习Agent框架》)论文思路,简单复现代码,以实现SymAgent中的Agent-Planner和Agent-Executor模块。Agent-Planner利用大语言模型的归纳推理能力从知识图谱中提取符号规则,指导高效的问题分解。

qq_60040306的博客 1607

CSS零基础入门笔记:狂神版

1.后代选择器(Descendant Selector)语法ancestor descendant { /* 样式规则 */ }作用:选择指定祖先元素内部的所有后代元素,无论它们嵌套在什么层级中。特点:作用范围最广,会选择所有符合条件的后代元素。2.子选择器(Child Selector)语法parent > child { /* 样式规则 */ }作用:选择指定父元素的直接子元素,不会选择更深层次的后代元素。特点:作用范围较窄,只选择直接子元素。3.

sherlockMa的博客 1234

【项目立项管理、项目整合管理】30天通过软考高项-第二天

①项目或阶段的概述;②范围目标、范围的评估标准,证明达到完⼯标准的证据;③质量目标、项目和产品质量的评估标准、相关核实信息和实际里程碑交付日期以及偏差原因;④成本目标,包括可接受的成本区间、实际成本,产⽣任何偏差的原因等;⑤最终产品、服务或成果的确认信息的总结;⑥进度计划目标,包括成果是否实现项目预期效益:如果在项目结束时未能实现效益,则指出效益实现程度并预计未来实现情况;

weixin_42520723的博客 1003

Django学习笔记:CSS基础

CSS基础 css概述 CSS是一组格式设置规则,用于控制Web页面的外观。例如,让HTML中的某个div或者span元素北京颜色改为黑色,或者设置图片元素img的长、宽、显示位置等,这些外观的设置功能都可以通过CSS来控制。在Web开发浅短中,HTML用来控制页面的内容,而CSS用来控制页面内容的显示方式。 CSS中的内容一般与HTML中的元素绑定起来,由选择符和属性组成,选择符后面跟着属性,但被一对花括号所包围。属性和值由冒号分隔,每个属性生命以分号结尾。典型的CSS样式设计代码如下 body{

那么大圆筒的博客 1296

Mac上IDEA的PlantUML插件报错‘找不到Graphviz’?手把手教你用Homebrew搞定(附阿里云镜像避坑)

本文详细解决了Mac上IDEA的PlantUML插件报错‘找不到Graphviz’的问题,通过Homebrew安装Graphviz并配置阿里云镜像源,特别针对Apple Silicon芯片用户提供了优化方案。文章还涵盖了IDEA中PlantUML插件的正确配置和常见问题排查,帮助开发者高效使用PlantUML进行UML图表设计。

weixin_42619742的博客 469

LangChain开发避坑指南:为什么Pylance总提示‘无法解析导入‘?实测7种修复方案

本文深入解析了在VS Code中使用LangChain开发时,Pylance频繁提示‘无法解析导入’的根本原因——Python解释器与语言服务器的环境路径不一致。文章提供了从基础排查到深度配置的7种实测修复方案,包括切换解释器、配置extraPaths、使用pyrightconfig.json等,旨在帮助开发者彻底解决此问题,提升AI应用开发效率。

weixin_28826521的博客 447

学习笔记:CSS基础

CSS基础 1. 边距 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ATPz3Bio-1595323527783)(G:\06 blog\内边距外边距.png)] 黑色与白色的字为元素内容,三个矩形加粗的黑色部分为边框;黄色区域为外边距,红色区域和蓝色区域为内边距 **内边距(padding):**控制着元素内容与border之间的空隙大小 **外边距(margin):**控制元素的边框与其他元素之间的距离 **注意:**上面两者均可为负数,具体效果要自己多尝试;上面

Box 261

利用人工神经网络在Abaqus中实现本构模型的网格粗化计算框架:详细指南与实践

在这篇文章中,我们详细介绍了如何在Abaqus中实现基于人工神经网络(ANN)的本构模型以进行网格粗化的计算框架。我们通过两个主要模块——数据生成器模块和ANN训练模块,实现了这一计算框架,并将训练好的ANN集成到Abaqus的用户材料子程序(UMAT)中,创建了一个基于ANN的本构模型。我希望这篇文章能帮助到那些希望在Abaqus中实现基于ANN的本构模型的读者,同时,我也非常欢迎大家提出宝贵的意见和建议,让我们共同进步。

qq_38334677的博客 1717

笔记:前端自学基础之CSS基础

目录 CSS代码书写位置 常见样式声明 选择器 简单选择器 选择器的组合 选择器的并列 层叠 css:层叠样式表 应用 继承 属性值的计算过程---页面渲染的过程 盒模型 CSS代码书写位置 1、内部样式表 <head>中书写<style>元素 2、内联样式表 <h1 style="..."> 3、外部样式表(更常用) 将...

qq_38349067的博客 395

PCL DBSCAN密度聚类【2026最新版】

点云密度聚类的PCL代码实现,与matlab自带的密度聚类算法进行对比验证,结果一致。3万多个点能再2秒左右运行出结果,算法效率尚可。

点云侠的博客 5682

第五天 Labview数据记录(5.4 EXCEL文件读写)

Excel 文件读写在数据处理、自动化办公、数据分析等领域具有重要的意义。以下是 Excel 文件读写的主要应用场景和意义:1. 数据管理和整理;2. 自动化办公;3. 数据分析和可视化;4. 系统集成;5. 报表生成;6. 教育和培训;7. 实际应用场景。Excel 文件读写的意义在于提高数据处理的效率、减少人工操作、支持自动化办公、促进数据分析和可视化,以及实现系统之间的数据交互。无论是企业、组织还是个人,都可以通过 Excel 文件读写实现数据的高效管理和利用。

weixin_38637405的博客 1263

CSS学习笔记2:CSS基础选择器

在Word文档中,如果想给标题加粗、标红、居中,我们首先需要选中标题,再更改Word最上方工具栏中相应的标签即可。相似的,CSS要想给页面添加绚丽多彩的样式,第一步就要选中需要改变的样式的内容,我们叫CSS选择器。CSS选择器种类很多,在上篇文章《CSS学习笔记1:初始CSS及其常见属性》 里所说的CSS基本语法中的使用的选择器,只是其中的一种——“标签选择器”。下面这两篇文章,咱们就聊聊CSS选择

全栈码农,专注java项目实战教程分享、大学生项目辅导开发讲解。 792

Vue2 - 详细实现接入使用海康威视监控云端显示及控制功能,网站集成安装海康监控及实时监控显示、回放、放大缩小画面、视频画面截图、截屏抓拍、摄像头控制,实时推流及播放器解决延迟卡顿等问题(详细代码)

vue2,nuxt2,海康威视,海康监控,摄像头监控,vue对接海康处理接口认证规则,监控实时预览和回放功能,海康api接口,安全认证,海康开放平台,官方文档,播放海康摄像头的监控视频,海康实时监控播放详细步骤,web,黑屏,特别卡不流畅怎么办,解决无法推流,录像,连接不上,vue,海康,vue海康视频监控,海康开放平台,实时监控画面,海康插件,视频播放,回放,视频流地址,取流协议,视频sdk播放,hik,rtsp,rtmp,hls,ws,网站,网页,h5页面,后台管理系统,vue2对接海康监控设备,无法连

🏆 前端领域优质创作者 8248

CSS笔记:CSS 基础选择器

CSS 基础选择器 1、类选择器 class,如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器. 语法: .类名 { 属性1: 属性值1; ... } 例如: <head> <style> .red { width: 100px; height: 100px; background-color: red; } </style> </head> <body&g

weixin_42643070的博客 145

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

Fullstack 面试复习笔记:HTML / CSS 基础梳理

本来是想把H5C3JS的东西放一起整理的,然后看了下有点长……毕竟主自用,还是先拆开来方便自己复习了。

GoldenaArcher的博客 1645

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

笔记:css基础

css

weixin_48554465的博客 410

慕课笔记:CSS基础

CSS语法;CSS样式基础知识;CSS样式基础知识;CSS样式基础知识;CSS样式基础知识;CSS样式基础知识;盒模型;CSS布局模型;

初夏的博客 393

CSS:权威指南读书笔记 第一章 CSS基础

元素是包含样式表的一种方式,它写在文档中: ...

weixin_42590873的博客 1104

CSS学习笔记:基础语法

简介 CSS 指层叠样式表 (Cascading Style Sheets); 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 如: <!DOCTYPE html> <html> <head> <style> /*这是个注释*/ p { color:red; /*这是个注释*/ text-align:center; } </style> </head> <body> <h1&gt

未来来 242

CSS初学笔记:盒模型基础:

CSS初学笔记: 盒模型基础知识: 1.1盒模型的初步认识 一个盒模型应该具有:宽度,高度,边框,内边距,外边距。 内容宽:width;内容高:height;边框:border 内边距:padding;外边距:margin(盒子和盒子之间的距离); 书写内容区域:width:内容宽 height:内容高; 例如: .box{ width: 300px; height: 200px; ...

qq_43955202的博客 283

CSS Master读书笔记:CSS 基础

<br /> <br />在样式表中使用特殊性<br />在编写CSS时,特殊性可以对一般的元素应用一般样式,然后再更特殊的元素上覆盖他们。假设希望站点上大多数表单的宽度是30em,但是搜索表单的宽度只有15em:<br />form {width: 30em;}<br />form#search {width: 15em;}<br />但在大型站点上,例外情况会越来越多。每当创建更特殊的样式时,可能需要覆盖一些一般规则,可能需要一些额外的代码。而且,因为元素可以从许多地方获得样式,情况可能变得非常复杂。<

HOME 1524

CSS笔记1:基础选择器

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <!-- css选择器 --> <!-- 1.基础选择器 ————标签选择器,类选择器,id选择器,通配符选择器 2.复合选择器 --> </head> <style> /* 1.标签选择器 */ ..

weixin_46037153的博客 160

CSS笔记:三种基础选择器

css笔记:三种基础选择器CSS语法规范2.1CSS选择器的作用2.2选择器分类2.3标签选择器2.4类选择器课堂案例:类选择器画盒子2.4类选择器-多类名2.5id选择器2.6通配符选择器2.7 基础选择器总结 CSS语法规范 首先,在《head》标签里添加一个《style》标签,将样式定义在style里。 代码: <style> p{ color:red; font-size:12px; } &

m0_58331488的博客 587

前端基础(HTML,CSS,JavaScript)知识笔记,附:前端基础面试题!!

前言 HTML,CSS,JavaScript 是前端入门必须学习的知识,也是最基础的知识。文章主要分享包括 (HTML,CSS,JS)前端基础知识笔记,学习路线图,最后附前端基础面试题。 HTML 知识点 1. html基本结构 html标签是由 <> 包围的关键词。 html标签通常成对出现,分为标签开头和标签结尾。 有部分标签是没有结束标签的,为单标签,单标签必须使用 / 结尾。 页面所有的内容,都在 html 标签中。 html标签分为三部分:标签名称,标签内容,标签属性。 html

QXXXD的博客 2万+

Python学习笔记:22 HTML5基础和CSS基础

了解一些HTML5的基础知识和CSS基础知识有助于爬虫的学习,在学习这些基础知识之前,首先要安装HBuiderX工具。直接到官网下载标准版即可。 HTML基础 可以到HTML教程学习一下HTML基础知识。 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 打开HBuiderX工具,新建项目 在index.html中写入如下代码: <!-- HTML:超文本标记语言 --> <!-- HTML后缀名:.html /

qq_44733409的博客 307

CSS学习笔记之一:CSS基础

一 HTML与CSS的关系 HTML 标签原本被设计用来定义文档内容。 之所以把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题。 二 使用外部CSS文件的优势 外部的 .css 文件,使你有能力通过仅仅编辑一个简单的 CSS 文档,同时改变站点中所有页面的布局和外观。 三 多重样式的层叠规则 当同一个 HTML 元素被不止一个样式...

weixin_33877885的博客 75

<电子幽灵>前端第二件:CSS基础笔记下

之前,通过HTML和CSS基础的学习,语法、常用属性等等已经明晰了。现在,我们应当以更加结构化、专业化的视角,去看待CSS的"画板"——也就是各种(显示在网页上的)HTML标签。

2301_78388387的博客 2259
上一篇: 【笔记:HTML基础】
下一篇: 【JavaScript:快速入门】
莱布尼杰
博客等级 码龄9年 3粉丝 28原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值