【CSS3】筑基篇

目录

  • 复合选择器
    • 后代选择器
    • 子选择器
    • 并集选择器
    • 交集选择器
    • 伪类选择器
  • CSS 三大特性
    • 继承性
    • 层叠性
    • 优先级
  • 背景属性
    • 背景色
    • 背景图
    • 背景图平铺方式
    • 背景图位置
    • 背景图缩放
    • 背景图固定
    • 背景复合属性
  • 显示模式
    • 显示模式
      • 块级元素
      • 行内元素
      • 行内块元素
    • 转换显示模式
  • 结构伪类选择器
    • 结构伪类选择器
    • nth-child(公式)
  • 伪元素选择器
  • 盒子模型
    • 组成
    • 边框线
    • 内边距
    • 尺寸计算
    • 外边距
    • 边距问题
      • 外边距-合并现象
      • 外边距-塌陷问题
      • 行内元素-内外边距问题
    • 清除默认样式
    • 元素溢出
    • 圆角
    • 圆角应用
      • 正圆形状
      • 胶囊形状
    • 阴影

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成

作用：更准确、更高效的选择目标元素（标签）

后代选择器

后代选择器：选中某元素的后代元素（所有后代）

格式：

父选择器 子选择器{
    CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div span{
                color: red;
            }
        </style>
    </head>
    <body>
        <span>这是一个span标签</span>
        <div>
            <span>这是div标签中的span标签</span>
        </div>
    </body>
</html>

结果如下：

在这里插入图片描述

子选择器

子代选择器：选中某元素的子代元素

格式：

父选择器>子选择器{
    CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div>span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <span>大儿子span</span>
            <p>
                <span>孙子span</span>
            </p>
            <span>小儿子span</span>
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

并集选择器

并集选择器：选中多组标签设置相同的样式

格式：

选择器1,选择器2,...,选择器N{
    CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div,p,span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>div标签</div>
        <p>p标签</p>
        <span>span标签</span>
    </body>
</html>

结果如下：

在这里插入图片描述

交集选择器

交集选择器：选中同时满足多个条件的元素

格式：

选择器1选择器2{
    CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            p.box{
                color: red;
            }
        </style>
    </head>
    <body>
        <p class="box">p标签，使用了类选择器</p>
        <p>p标签</p>
        <div class="box">div标签，使用了类选择器</div>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：

  1. 选择器之间连写，没有任何符号
  2. 如果交集选择器中有标签选择器，标签选择器必须写在最前面

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式

格式：

鼠标悬停状态：

选择器:hover{
	CSS 属性
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            a:hover{
                font-size: 30px;
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="#">这是没有鼠标悬停的a标签</a>
        <br>
        <a href="#">这是有鼠标悬停的a标签</a>
    </body>
</html>

结果如下：
在这里插入图片描述

伪类-超链接：

超链接一共有四个状态

选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时（激活）

注意事项：如果要给超链接设置以上四个状态，要按 lvha 的顺序书写

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            a:link{
                color: orange;
            }
            a:visited{
                color: black;
            }
            a:hover{
                color:yellow
            }
            a:active{
                color:gray
            }

        </style>
    </head>
    <body>
        <a href="#">这是一段文字</a>
    </body>
</html>

结果如下：

屏幕录制 2025-03-07 171505

CSS 三大特性

继承性

子级默认继承父级的文字控制属性

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            body{
                font-size: 30px;
                font-family: "楷体";
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            樱花飘落的速度是每秒五厘米，而我对你的思念，始终追不上季节的更迭。
        </div>
        <p>
            咖啡杯沿的温度逐渐冷却，书页间夹着的旧车票，还留着那年雨季的褶皱。
        </p>
        <span>
            地铁里陌生人的一个微笑，像极了某个黄昏你转身时发梢掠过的风。
        </span>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：当子级有自己的样式的时候，优先生效自己的样式，就不会对父级的样式生效

层叠性

特点：

  • 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
  • 不同的属性会叠加：不同的 CSS 属性都生效

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                font-size: 30px;
                color: red;
            }
            div{
                color: purple;
                font-family: "楷体";
            }
        </style>
    </head>
    <body>
        <div>
            萤火虫提着灯笼穿过月光，在旧砖墙的皱纹里种下星辰的碎片。
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

优先级

优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效

公式：通配选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < ！important（选中标签的范围越大，优先级越低）

!important 提高权重，将优先级提到最高

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            *{
                color: purple !important;
            }
            .style1{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>这是一段文字1</p>
            <p class="style1">这是一段文字2</p>
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

叠加计算规则：

叠加计算：如果是复合选择器，则需要权重叠加计算

规则：（行内样式，id 选择器个数，类选择器个数，标签选择器个数）

  • 从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较
  • !important 权重最高（在继承中变为无效）
  • 继承权重最低

背景属性

背景色

属性名：background-color

属性：

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red、green、blue…学习测试
rgb 表示法rgb(r, g, b)rgb 表示红绿蓝三原色，取值：0 - 255了解
rgba 表示法rgba(r, g, b, a)a 表示透明度，取值：0 - 1开发使用，实现透明色
十六进制表示法#RRGGBB#000000，#ffcc00，简写：#000，#fc0开发使用（从设计稿复制）

格式：

选择器{
	background-color: red;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            p{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>这是一段文字</p>
    </body>
</html>

结果如下

在这里插入图片描述

背景图

网页中使用背景图实现装饰性的图片效果

属性名：background-image

属性值：url(背景图路径)

格式：

选择器{
    background-image: url(./images/1.png);
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 504px;
                height: 495px;
                background-image: url(./img/1.png);
            }
        </style>
    </head>
    <body>
        <div>这是一段文字</div>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：背景图默认是平铺的效果

背景图平铺方式

属性名：background-repeat

属性值：

  • no-repeat：不平铺
  • repeat：平铺（默认效果）
  • repeat-x：水平方向平铺
  • repeat-y：垂直方向平铺

格式：

选择器{
    background-repeat: no-repeat;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 504px;
                height: 495px;
                background-color: rgb(240, 29, 117);
                background-image: url(./img/1.png);
                background-repeat: no-repeat;
                font-size: 80px;
            }
            p{
                width: 504px;
                height: 495px;
                background-color: rgb(240, 29, 117);
                background-image: url(./img/1.png);
                background-repeat: repeat-x;
                font-size: 80px;
            }
            .y{
                width: 504px;
                height: 495px;
                background-color: rgb(240, 29, 117);
                background-image: url(./img/1.png);
                background-repeat: repeat-y;
                font-size: 80px;
            }
        </style>
    </head>
    <body>
        <div>这是不平铺</div>
        <p>这是水平平铺</p>
        <p class="y">这是垂直平铺</p>
    </body>
</html>

结果如下：
在这里插入图片描述

背景图位置

属性名：background-position

属性值：水平方向位置 垂直方向位置

  • 关键字
    • left：左侧
    • right：右侧
    • center：居中
    • top：置顶
    • bottom：置底
  • 偏移量（数字 + px，正负都可以）
    • 水平方向：正数向右，负数向左
    • 垂直方向：正数向下，负数向上

格式：

选择器{
    background-position: center bottom;
    background-position: 50px -100px;
    background-position: 50px center;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 504px;
                height: 495px;
                background-color: rgb(240, 29, 117);
                background-image: url(./img/1.png);
                background-repeat: no-repeat;
                background-position: right center;
            }
            p{
                width: 504px;
                height: 495px;
                background-color: rgb(240, 29, 117);
                background-image: url(./img/1.png);
                background-repeat: no-repeat;
                background-position: 126px 123.75px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <p></p>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：

  1. background-position: 0 0 和 background-position: left top 为默认的左上角
  2. 关键字取值方式写法，可以颠倒取值顺序
  3. 可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

属性：background-size

属性值：

  • 关键字
    • cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
    • contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
  • 百分比：根据盒子尺寸计算图片大小
  • 数字 + 单位（例如 px）

格式：

选择器{
    background-size: contain;
    background-size: cover;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .size1{
                width: 1500px;
                height: 1500px;
                background-color: rgb(240, 29, 117);
                background-image: url(./img/2.png);
                background-repeat: no-repeat;
                background-size: contain;
            }
            .size2{
                width: 1500px;
                height: 1500px;
                background-color: rgb(240, 29, 117);
                background-image: url(./img/2.png);
                background-repeat: no-repeat;
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <p class="size1"></p>
        <p class="size2"></p>
    </body>
</html>

结果如下：
在这里插入图片描述

背景图固定

作用：背景图不会随着元素的内容滚动

属性名：background-attachment

属性值：fixed

格式：

选择器{
    background-attachment: fixed;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            body{
                background-image: url(./img/3.png);
                background-repeat: no-repeat;
                background-position: center top;
                background-size: contain;
                background-attachment: fixed;
            }
            body p{
                font-size: 20px;
                font-family: "楷体";
                font-weight: bold;
                text-indent: 2em;
            }
            h1{
                font-family: "楷体";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>孔雀东南飞</h1>
        <p>序曰：汉末建安中，庐江府小吏焦仲卿妻刘氏，为仲卿母所遣，自誓不嫁。其家逼之，乃投水而死。仲卿闻之，亦自缢于庭树。时人伤之，为诗云尔。</p>
        <p>孔雀东南飞，五里一徘徊。</p>
        <p>“十三能织素，十四学裁衣，十五弹箜篌，十六诵诗书。十七为君妇，心中常苦悲。君既为府吏，守节情不移。贱妾留空房，相见常日稀。鸡鸣入机织，夜夜不得息。三日断五匹，大人故嫌迟。非为织作迟，君家妇难为！妾不堪驱使，徒留无所施。便可白公姥，及时相遣归。”</p>
        <p>府吏得闻之，堂上启阿母：“儿已薄禄相，幸复得此妇，结发同枕席，黄泉共为友。共事二三年，始尔未为久。女行无偏斜，何意致不厚？”</p>
        <p>阿母谓府吏：“何乃太区区！此妇无礼节，举动自专由。吾意久怀忿，汝岂得自由！东家有贤女，自名秦罗敷，可怜体无比，阿母为汝求。便可速遣之，遣去慎莫留！”</p>
        <p>府吏长跪告：“伏惟启阿母，今若遣此妇，终老不复取！”</p>
        <p>阿母得闻之，槌床便大怒：“小子无所畏，何敢助妇语！吾已失恩义，会不相从许！”</p>
        <p>府吏默无声，再拜还入户。举言谓新妇，哽咽不能语：“我自不驱卿，逼迫有阿母。卿但暂还家，吾今且报府。不久当归还，还必相迎取。以此下心意，慎勿违吾语。”</p>
        <p>新妇谓府吏：“勿复重纷纭。往昔初阳岁，谢家来贵门。奉事循公姥，进止敢自专？昼夜勤作息，伶俜萦苦辛。谓言无罪过，供养卒大恩；仍更被驱遣，何言复来还！妾有绣腰襦，葳蕤自生光；红罗复斗帐，四角垂香囊；箱帘六七十，绿碧青丝绳，物物各自异，种种在其中。人贱物亦鄙，不足迎后人，留待作遗施，于今无会因。时时为安慰，久久莫相忘！”</p>
        <p>鸡鸣外欲曙，新妇起严妆。著我绣夹裙，事事四五通。足下蹑丝履，头上玳瑁光。腰若流纨素，耳著明月珰。指如削葱根，口如含朱丹。纤纤作细步，精妙世无双。</p>
        <p>上堂拜阿母，阿母怒不止。“昔作女儿时，生小出野里。本自无教训，兼愧贵家子。受母钱帛多，不堪母驱使。今日还家去，念母劳家里。” 却与小姑别，泪落连珠子。“新妇初来时，小姑始扶床；今日被驱遣，小姑如我长。勤心养公姥，好自相扶将。初七及下九，嬉戏莫相忘。” 出门登车去，涕落百余行。</p>
        <p>府吏马在前，新妇车在后。隐隐何甸甸，俱会大道口。下马入车中，低头共耳语：“誓不相隔卿，且暂还家去；吾今且赴府，不久当还归。誓天不相负！”</p>
        <p>新妇谓府吏：“感君区区怀！君既若见录，不久望君来。君当作磐石，妾当作蒲苇，蒲苇纫如丝，磐石无转移。我有亲父兄，性行暴如雷，恐不任我意，逆以煎我怀。” 举手长劳劳，二情同依依。</p>
        <p>入门上家堂，进退无颜仪。阿母大拊掌，不图子自归：“十三教汝织，十四能裁衣，十五弹箜篌，十六知礼仪，十七遣汝嫁，谓言无誓违。汝今何罪过，不迎而自归？” 兰芝惭阿母：“儿实无罪过。” 阿母大悲摧。</p>
        <p>还家十余日，县令遣媒来。云有第三郎，窈窕世无双。年始十八九，便言多令才。</p>
        <p>阿母谓阿女：“汝可去应之。”</p>
        <p>阿女含泪答：“兰芝初还时，府吏见丁宁，结誓不别离。今日违情义，恐此事非奇。自可断来信，徐徐更谓之。”</p>
        <p>阿母白媒人：“贫贱有此女，始适还家门。不堪吏人妇，岂合令郎君？幸可广问讯，不得便相许。”</p>
        <p>媒人去数日，寻遣丞请还，说有兰家女，丞籍有宦官。云有第五郎，娇逸未有婚。遣丞为媒人，主簿通语言。直说太守家，有此令郎君，既欲结大义，故遣来贵门。</p>
        <p>阿母谢媒人：“女子先有誓，老姥岂敢言！”</p>
        <p>阿兄得闻之，怅然心中烦。举言谓阿妹：“作计何不量！先嫁得府吏，后嫁得郎君，否泰如天地，足以荣汝身。不嫁义郎体，其往欲何云？”</p>
        <p>兰芝仰头答：“理实如兄言。谢家事夫婿，中道还兄门。处分适兄意，那得自任专！虽与府吏要，渠会永无缘。登即相许和，便可作婚姻。”</p>
        <p>媒人下床去，诺诺复尔尔。还部白府君：“下官奉使命，言谈大有缘。” 府君得闻之，心中大欢喜。视历复开书，便利此月内，六合正相应。良吉三十日，今已二十七，卿可去成婚。交语速装束，络绎如浮云。青雀白鹄舫，四角龙子幡。婀娜随风转，金车玉作轮。踯躅青骢马，流苏金镂鞍。赍钱三百万，皆用青丝穿。杂彩三百匹，交广市鲑珍。从人四五百，郁郁登郡门。</p>
        <p>阿母谓阿女：“适得府君书，明日来迎汝。何不作衣裳？莫令事不举！”</p>
        <p>阿女默无声，手巾掩口啼，泪落便如泻。移我琉璃榻，出置前窗下。左手持刀尺，右手执绫罗。朝成绣夹裙，晚成单罗衫。晻晻日欲暝，愁思出门啼。</p>
        <p>府吏闻此变，因求假暂归。未至二三里，摧藏马悲哀。新妇识马声，蹑履相逢迎。怅然遥相望，知是故人来。举手拍马鞍，嗟叹使心伤：“自君别我后，人事不可量。果不如先愿，又非君所详。我有亲父母，逼迫兼弟兄。以我应他人，君还何所望！”</p>
        <p>府吏谓新妇：“贺卿得高迁！磐石方且厚，可以卒千年；蒲苇一时纫，便作旦夕间。卿当日胜贵，吾独向黄泉！”</p>
        <p>新妇谓府吏：“何意出此言！同是被逼迫，君尔妾亦然。黄泉下相见，勿违今日言！” 执手分道去，各各还家门。生人作死别，恨恨那可论？念与世间辞，千万不复全！</p>
        <p>府吏还家去，上堂拜阿母：“今日大风寒，寒风摧树木，严霜结庭兰。儿今日冥冥，令母在后单。故作不良计，勿复怨鬼神！命如南山石，四体康且直！”</p>
        <p>阿母得闻之，零泪应声落：“汝是大家子，仕宦于台阁。慎勿为妇死，贵贱情何薄！东家有贤女，窈窕艳城郭，阿母为汝求，便复在旦夕。”</p>
        <p>府吏再拜还，长叹空房中，作计乃尔立。转头向户里，渐见愁煎迫。</p>
        <p>其日牛马嘶，新妇入青庐。奄奄黄昏后，寂寂人定初。“我命绝今日，魂去尸长留！” 揽裙脱丝履，举身赴清池。</p>
        <p>府吏闻此事，心知长别离。徘徊庭树下，自挂东南枝。</p>
        <p>两家求合葬，合葬华山傍。东西植松柏，左右种梧桐。枝枝相覆盖，叶叶相交通。中有双飞鸟，自名为鸳鸯。仰头相向鸣，夜夜达五更。行人驻足听，寡妇起彷徨。多谢后世人，戒之慎勿忘！</p>
    </body>
</html>

结果如下：

屏幕录制 2025-03-08 013552

背景复合属性

属性名：background

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（不区分顺序）

格式：

选择器{
    background: red url(./img/1.png) no-repeat right center/cover;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 600px;
                height: 400px;
                background: red url(./img/1.png) no-repeat right center/cover;
            }
        </style>
    </head>
    <body>
        <div>这是一段字</div>
    </body>
</html>

结果如下：
在这里插入图片描述

显示模式

显示模式

显示模式：标签（元素）的显示方式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

块级元素

特点：

  • 独占一行
  • 高度默认是父级的 100%
  • 添加宽高属性生效

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .div1{
                background-color: red;
            }
            .div2{
                height: 60px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div class="div1">这是一段字</div><div class="div2">这是一段字</div>    
    </body>
</html>

结果如下：
在这里插入图片描述

行内元素

特点：

  • 一行可共存多个
  • 宽高跟内容宽高一致
  • 添加宽高属性不生效

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .span1{
                background-color: red;
                font-size: 30px;
            }
            .span2{
                width: 20px;
                height: 60px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <span class="span1">这是span标签</span><span class="span2">这是span标签</span>
    </body>
</html>

结果如下：
在这里插入图片描述

行内块元素

特点：

  • 一行可共存多个
  • 宽高与内容宽高一致
  • 添加宽高属性生效

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .span1{
                background-color: red;
                font-size: 30px;
            }
            .span2{
                width: 20px;
                height: 60px;
                background-color: gray;
            }
            img{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <span class="span1">这是span标签</span>
        <img src="./img/1.png" alt="">
    </body>
</html>

结果如下：

在这里插入图片描述

转换显示模式

属性名：display

属性值：

  • block：块级
  • inline-block：行内块
  • inline：行内

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: red;
                display: inline;
            }
            span{
                width: 200px;
                height: 200px;
                background-color: gray;
                display: inline-block;
            }
            img{
                width: 100px;
                height: 100px;
                display: block;
            }
        </style>
    </head>
    <body>
        <div>这是一段字</div>
        <div>这是一段字</div>
        <span>这是span标签</span>
        <span>这是span标签</span>
        <img src="./img/1.png" alt="">
        <img src="./img/1.png" alt="">
    </body>
</html>

结果如下：

在这里插入图片描述

结构伪类选择器

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器说明
E:first-child查找第一个 E 元素
E:last-child查找最后一个 E 元素
E:nth-child(N)查找第 N 个 E 元素（第一个元素 N 值为 1）

格式：

选择器:first-child{
    background color: red;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            li:first-child{
                background-color: rgb(238, 115, 115);
            }
            li:last-child{
                background-color: rgb(131, 231, 131);
            }
            li:nth-child(2){
                background-color: rgb(174, 174, 235);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>床前明月光，疑是地上霜。—— 李白《静夜思》</li>
            <li>独在异乡为异客，每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》</li>
            <li>欲穷千里目，更上一层楼。—— 王之涣《登鹳雀楼》</li>
        </ul>
    </body>
</html>

结果如下：

在这里插入图片描述

nth-child(公式)

作用：根据元素的结构关系查找多个元素

功能公式
偶数标签2n
奇数标签2n+1，2n-1
找到 5 的倍数的标签5n
找到第 5 个以后的标签n+5
找到第 5 个以前的标签-n+5

格式：

选择器:nth-child(2n){
    background color: red;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            li:nth-child(2n-1){
                background-color: rgb(174, 174, 235);
            }
            li:nth-child(2n){
                background-color: rgb(235, 235, 157);
            }
            li:first-child{
                background-color: rgb(238, 115, 115);
            }
            li:last-child{
                background-color: rgb(131, 231, 131);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>床前明月光，疑是地上霜。—— 李白《静夜思》</li>
            <li>独在异乡为异客，每逢佳节倍思亲。—— 王维《九月九日忆山东兄弟》</li>
            <li>欲穷千里目，更上一层楼。—— 王之涣《登鹳雀楼》</li>
            <li>问君能有几多愁？恰似一江春水向东流。—— 李煜《虞美人》</li>
            <li>大江东去，浪淘尽，千古风流人物。—— 苏轼《念奴娇・赤壁怀古》</li>
            <li>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。—— 李清照《声声慢》</li>
            <li>落红不是无情物，化作春泥更护花。—— 龚自珍《己亥杂诗》</li>
            <li>黑夜给了我黑色的眼睛，我却用它寻找光明。—— 顾城《一代人》</li>
            <li>你站在桥上看风景，看风景人在楼上看你。—— 卞之琳《断章》</li>
        </ul>
    </body>
</html>

结果如下：
在这里插入图片描述

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器说明
E::before在 E 元素里面的最前面添加一个伪元素
E::after在 E 元素里面的最后面添加一个伪元素

注意事项：

  • 必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同

格式：

选择器::before{
    content:" ";
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 275px;
                height: 50px;
                background-color: #f7b7b7;
            }
            div::before{
                content: "寻寻觅觅，";
            }
            div::after{
                content: "凄凄惨惨戚戚。";
            }
        </style>
    </head>
    <body>
        <div>冷冷清清，</div>
    </body>
</html>

结果如下：
在这里插入图片描述

盒子模型

作用：布局网页，摆放盒子和内容

组成

盒子模型重要组成部分：

  • 内容区域：width & height
  • 内边距：padding（出现在内容与盒子边缘之间）
  • 边框线：border
  • 外边距：margin（出现在盒子外面）

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: #f7b7b7;
                padding: 20px;
                border: 2px solid black;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div>
            这是一段文字
            这是一段文字
            这是一段文字
            这是一段文字
        </div>
    </body>
</html>

结果如下：

在这里插入图片描述

边框线

属性名：border

属性值：边框线粗细 线条样式 颜色（不区分顺序）

常用线条样式：

属性值线条样式
solid实线
dashed虚线
dotted点线

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .div1{
                width: 100px;
                height: 100px;
                background-color: #f7b7b7;
                border: 2px solid black;
                display: inline-block;
            }
            .div2{
                width: 100px;
                height: 100px;
                background-color: #f7b7b7;
                border: 2px dashed black;
                display: inline-block;
            }
            .div3{
                width: 100px;
                height: 100px;
                background-color: #f7b7b7;
                border: 2px dotted black;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            这是一段文字
            这是一段文字
            这是一段文字
            这是一段文字
        </div>
        <div class="div2">
            这是一段文字
            这是一段文字
            这是一段文字
            这是一段文字
        </div>
        <div class="div3">
            这是一段文字
            这是一段文字
            这是一段文字
            这是一段文字
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

设置单方向边框线：

属性名：border-方位名词

属性值：边框线粗细 线条样式 颜色（不区分顺序）

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: #f7b7b7;
                border-right: 2px solid black;
                border-top: 4px dotted red;
                border-left: 2px dashed blue;
                border-bottom: 4px solid yellow;
            }
        </style>
    </head>
    <body>
        <div>
            这是一段文字
            这是一段文字
            这是一段文字
            这是一段文字
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

内边距

作用：设置内容与盒子边缘之间的距离

属性名：padding / padding-方位名词

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: #f7b7b7;
                padding-left: 20px;
                padding-right: 40px;
                padding-top: 10px;
                padding-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <div>
            这是一段文字
            这是一段文字
            这是一段文字
            这是一段文字
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

内边距多值写法

取值个数示例含义
一个值padding: 10px;四个方向内边距均为 10px
两个值padding: 10px 80px;上下：10px；左右：80px
三个值padding: 10px 40px 80px;上：10px；左右：40px；下：80px
四个值padding: 10px 20px 40px 80px;上：10px；右：20px；下：40px；左：80px

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: #f7b7b7;
                padding: 10px 20px 40px 80px;
            }
        </style>
    </head>
    <body>
        <div>
            这是一段文字
            这是一段文字
            这是一段文字
            这是一段文字
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对边一样

尺寸计算

默认情况：

  • 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border/padding 会撑大盒子

解决方法：

  • 手动做减法：减掉 border/padding 的尺寸
  • 内减模式：box-sizing:border-box

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: #f7b7b7;
                padding: 20px;
                border: 2px solid black;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div>
            这是一段文字
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: #f7b7b7;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div>
            这是一段文字
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：外边距不会撑大盒子

外边距版心居中

通过左右两边添加相同的外边距使版心居中

格式：

选择器{
    margin: 0 auto 0;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 800px;
                height: 512px;
                background-color: #f7b7b7;
                margin: 0 auto 0;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./img/2.png" alt="">
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：版心居中盒子一定要有宽度

边距问题

外边距-合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中较大值生效

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .div1{
                width: 200px;
                height: 100px;
                background-color: #f0a3a3;
                margin-bottom: 20px;
            }
            .div2{
                width: 200px;
                height: 100px;
                background-color: #b4a3f0;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="div1">这是一段字</div>
        <div class="div2">这是一段字</div>
    </body>
</html>

结果如下：
在这里插入图片描述

外边距-塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .father{
                width: 400px;
                height: 400px;
                background-color: #f0a3a3;
            }
            .son{
                width: 200px;
                height: 100px;
                background-color: #b4a3f0;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">son</div>
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

解决方法：

  • 取消子级 margin，父级设置 padding（规避问题）
  • 父级设置 overflow: hidden
  • 父级设置 border-top

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            .father{
                width: 400px;
                height: 400px;
                background-color: #f0a3a3;
                padding-top: 50px;
                box-sizing: border-box;
            }
            .son{
                width: 200px;
                height: 100px;
                background-color: #b4a3f0;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">son</div>
        </div>
    </body>
</html>

结果如下：
在这里插入图片描述

行内元素-内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            span{
                margin: 50px;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <span>这是一行字</span>
    </body>
</html>

结果如下：
在这里插入图片描述

解决方法：给行内元素添加 line-height 可以改变垂直位置

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            span{
                margin: 50px;
                padding: 20px;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <span>这是一行字</span>
    </body>
</html>

结果如下：
在这里插入图片描述

清除默认样式

清除标签默认的样式，比如：默认的内外边距

格式：

*{
    margin: 0;
    padding: 0;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <h1>标题</h1>
        <p>文本内容</p>
        <ul>
            <li>列表内容</li>
        </ul>
    </body>
</html>

结果如下：
在这里插入图片描述

去掉列表项目符号

格式：

选择器{
    list-style: none;
}

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            li{
                list-style: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>列表内容</li>
            <li>列表内容</li>
            <li>列表内容</li>
            <li>列表内容</li>
        </ul>
    </body>
</html>

结果如下：
在这里插入图片描述

元素溢出

作用：控制溢出元素的内容的显示方式

属性名：overflow

属性值：

  • hidden：溢出隐藏
  • scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
  • auto：溢出滚动（溢出才显示滚动条位置）

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: #f0a3a3;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div>雨丝斜斜地穿过玻璃幕墙，在地面洇开细碎的光斑。咖啡馆里飘着焦糖玛奇朵的甜香，邻座姑娘的笔记本摊开在《雪国》某页，窗外的樱花正与书页上 "银河倾泻进瞳孔" 的句子重叠。地铁报站声从地底传来时，自动贩卖机突然吐出一罐过期的橘子汽水，金属拉环 "咔嗒" 轻响，惊飞了檐下打盹的灰鸽。暮色漫过街道时，修鞋匠终于为最后一只旧皮鞋钉上铜掌，锤子与铁砧碰撞的节奏，恰好吻合十字路口红绿灯交替的频率。</div>
    </body>
</html>

结果如下：

屏幕录制 2025-03-08 175915

圆角

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：（圆角半径）

  • 数字 + px

  • 百分比

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background-color: #42e2ee;
                border-radius: 80px 20px 80px 20px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：从左上角顺时针开始赋值，没有赋值的角与对角的值相同

圆角应用

正圆形状

给正方形盒子设置圆角属性值为宽高的一半（50%）

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background-color: #42e2ee;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：圆角最大值是 50%，超过 50% 不会生效

胶囊形状

给长方形盒子设置圆角属性值为盒子高度的一半

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                margin: 50px auto;
                width: 200px;
                height: 80px;
                background-color: #42e2ee;
                border-radius: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

结果如下：
在这里插入图片描述

阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内/外阴影

注意事项：

  • X 轴偏移量和 Y 轴偏移量必须书写
  • 默认是外阴影，内阴影需要添加 inset

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            div{
                margin: 50px auto;
                width: 200px;
                height: 80px;
                background-color: #42e2ee;
                border-radius: 40px;
                box-shadow: 2px 5px 10px 2px black inset;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

结果如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/984321.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【MySQL】(4) 表的操作

【MySQL】(4) 表的操作

一、创建表 语法&#xff1a; 示例&#xff1a; 生成的数据目录下的文件&#xff1a; 二、查看表结构 三、修改表 语法&#xff1a; 另一种改表名语法&#xff1a;rename table old_name1 to new_name1, old_name2 to new_name2; 示例&#xff1a; 四、删除表 语法&#xf…
阅读更多...
C++：string容器（下篇）

C++：string容器（下篇）

1.string浅拷贝的问题 // 为了和标准库区分&#xff0c;此处使用String class String { public :/*String():_str(new char[1]){*_str \0;}*///String(const char* str "\0") // 错误示范//String(const char* str nullptr) // 错误示范String(const char* str …
阅读更多...
基于Harbor构建docker私有仓库

基于Harbor构建docker私有仓库

Harbor 是一个开源的企业级容器镜像仓库&#xff0c;主要用于存储、签名和扫描容器镜像。Harbor 基于 Docker Registry 构建&#xff0c;并在此基础上增加了许多企业级特性&#xff0c;以满足企业对安全性、可扩展性和易用性的需求。Harbor 的架构由多个组件组成&#xff0c;包…
阅读更多...
阿里发布新开源视频生成模型Wan-Video,支持文生图和图生图,最低6G就能跑,ComFyUI可用!

阿里发布新开源视频生成模型Wan-Video,支持文生图和图生图,最低6G就能跑,ComFyUI可用!

Wan-Video 模型介绍&#xff1a;包括 Wan-Video-1.3B-T2V 和 Wan-Video-14B-T2V 两个版本&#xff0c;分别支持文本到视频&#xff08;T2V&#xff09;和图像到视频&#xff08;I2V&#xff09;生成。14B 版本需要更高的 VRAM 配置。 Wan2.1 是一套全面开放的视频基础模型&…
阅读更多...
运动控制卡--概述学习

运动控制卡--概述学习

目录 概述 技术背景 常见的运动控制卡分类&#xff1a; 国外品牌 国内品牌 各个品牌官网 国外品牌 国内品牌 概述 运动控制卡被称作控制卡&#xff0c;只是因为它做成卡的形式&#xff0c;可以插进工控机主板上&#xff0c;一般走pci或pcie通讯。运动控制卡负责接收计算…
阅读更多...
网络编程-----服务器（多路复用IO 和 TCP并发模型）

网络编程-----服务器（多路复用IO 和 TCP并发模型）

一、单循环服务器模型 1. 核心特征 while(1){newfd accept();recv();close(newfd);}2. 典型应用场景 HTTP短连接服务&#xff08;早期Apache&#xff09;CGI快速处理简单测试服务器 3. 综合代码 #include <stdio.h> #include <sys/types.h> /* See NO…
阅读更多...
Java【网络原理】（3）网络编程续

Java【网络原理】（3）网络编程续

目录 1.前言 2.正文 2.1ServerSocket类 2.2Socket类 2.3Tcp回显服务器 2.3.1TcpEchoServer 2.3.2TcpEchoClient 3.小结 1.前言 哈喽大家好&#xff0c;今天继续进行计算机网络的初阶学习&#xff0c;今天学习的是tcp回显服务器的实现&#xff0c;正文开始 2.正文 在…
阅读更多...
SpringMvc与Struts2

SpringMvc与Struts2

一、Spring MVC 1.1 概述 Spring MVC 是 Spring 框架的一部分&#xff0c;是一个基于 MVC 设计模式的轻量级 Web 框架。它提供了灵活的配置和强大的扩展能力&#xff0c;适合构建复杂的 Web 应用程序。 1.2 特点 轻量级&#xff1a;与 Spring 框架无缝集成&#xff0c;依赖…
阅读更多...
web—HTML

web—HTML

什么是web ●Web:全球广域网&#xff0c;也称为万维网(www World Wide Web),能够通过浏览器访问的网站。 在浏览器中呈现精美的网页。 1.网页由那几部分组成&#xff1f; >文字、图片、视频、音频、超链接&#xff0c;&#xff0c;&#xff0c; 2.我们看到的网页&#xf…
阅读更多...
php虚拟站点提示No input file specified时的问题及权限处理方法

php虚拟站点提示No input file specified时的问题及权限处理方法

访问站点&#xff0c;提示如下 No input file specified. 可能是文件权限有问题&#xff0c;也可能是“.user.ini”文件路径没有配置对&#xff0c;最简单的办法就是直接将它删除掉&#xff0c;还有就是将它设置正确 #配置成自己服务器上正确的路径 open_basedir/mnt/qiy/te…
阅读更多...
INFINI Labs 产品更新 | Easysearch 增加异步搜索等新特性

INFINI Labs 产品更新 | Easysearch 增加异步搜索等新特性

INFINI Labs 产品更新发布&#xff01;此次更新&#xff0c;Easysearch 增加了新的功能和数据类型&#xff0c;包括 wildcard 数据类型、Point in time 搜索 API、异步搜索 API、数值和日期字段的 doc-values 搜索支持&#xff0c;Console 新增了日志查询功能。 INFINI Easyse…
阅读更多...
关于OceanBase与CDH适配的经验分享

关于OceanBase与CDH适配的经验分享

CDH是Cloudera早期推出的一个开源平台版本&#xff0c;它实质上成为了Apache Hadoop生态系统内公认的安装与管理平台&#xff0c;专为企业级需求量身打造。CDH为用户提供了即装即用的企业级解决方案。通过整合Hadoop与另外十多项关键开源项目&#xff0c;Cloudera构建了一个功能…
阅读更多...
解决VScode 连接不上问题

解决VScode 连接不上问题

问题 &#xff1a;VScode 连接不上 解决方案&#xff1a; 1、手动杀死VS Code服务器进程&#xff0c;然后重新尝试登录 打开xshell &#xff0c;远程连接服务器 &#xff0c;查看vscode的进程 &#xff0c;然后全部杀掉 [cxqiZwz9fjj2ssnshikw14avaZ ~]$ ps ajx | grep vsc…
阅读更多...
[Python爬虫系列]bilibili

[Python爬虫系列]bilibili

[Python爬虫系列]bilibili 具体逻辑 bv号 -> 处理多P视频 -> 拿到cid -> sign -> 请求下载&#xff0c;其中sign参考前人算法&#xff08;https://github.com/SocialSisterYi/bilibili-API-collect&#xff09; b站视频下载链接 https://api.bilibili.com/x/pl…
阅读更多...
Linux——工具（3）git——版本控制器

Linux——工具（3）git——版本控制器

一、git的使用意义 在实际项目中&#xff0c;我们往往写一个项目会经历很多个版本进行测试查缺补漏&#xff0c;然后再发行&#xff0c;但如果发行后我们发现仍出现问题&#xff0c;这时我们就需要撤回到上一个版本进行修改&#xff0c;可是如果我们此时不保存上一次的修改就不…
阅读更多...
基于Python的商品销量的数据分析及推荐系统

基于Python的商品销量的数据分析及推荐系统

一、研究背景及意义 1.1 研究背景 随着电子商务的快速发展&#xff0c;商品销售数据呈现爆炸式增长。这些数据中蕴含着消费者行为、市场趋势、商品关联等有价值的信息。然而&#xff0c;传统的数据分析方法难以处理海量、多源的销售数据&#xff0c;无法满足现代电商的需求。…
阅读更多...
对WebSocket做一点简单的理解

对WebSocket做一点简单的理解

1.概念 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输。 HTTP协议和WebSocket协议对比&#xff1a; HTTP是短连接 WebSocke…
阅读更多...
【AI深度学习网络】Transformer时代，RNN（循环神经网络）为何仍是时序建模的“秘密武器”？

【AI深度学习网络】Transformer时代，RNN（循环神经网络）为何仍是时序建模的“秘密武器”？

引言&#xff1a;什么是循环神经网络&#xff08;RNN&#xff09;&#xff1f; 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09; 是一种专门处理序列数据&#xff08;如文本、语音、时间序列&#xff09;的深度学习模型。与传统神经网络不同&#xff0c;R…
阅读更多...
蓝桥杯备考：图论初解

蓝桥杯备考：图论初解

1&#xff1a;图的定义 我们学了线性表和树的结构&#xff0c;那什么是图呢&#xff1f; 线性表是一个串一个是一对一的结构 树是一对多的&#xff0c;每个结点可以有多个孩子&#xff0c;但只能有一个父亲 而我们今天学的图&#xff01;就是多对多的结构了 V表示的是图的顶点集…
阅读更多...
01 SQl注入基础步骤（数字、字符、布尔盲注、报错）

01 SQl注入基础步骤（数字、字符、布尔盲注、报错）

目录 1、SQL注入漏洞的概要 2、SQL注入的常规思路 3、数字型注入 4、字符型注入 5、布尔盲注 6、报错注入 1、SQL注入漏洞的概要 原理&#xff1a;通过用户输入的数据未严格过滤&#xff0c;将恶意SQL语句拼接到原始查询中&#xff0c;从而操控数据库执行非预期操作。 …
阅读更多...
最新文章

Copyright @ 2022~2023