前端-CSS-day3

尘心cx2025-07-14 11:01

目录

1、结构伪类选择器-基本使用

2、结构伪类选择器-公式用法

3、伪元素选择器

4、盒子模型-组成

5、盒子模型-边框线

6、盒子模型-单方向边框线

7、盒子模型-内边距

8、盒子模型-内边距-多值写法

9、盒子模型-尺寸计算

10、盒子模型-版心居中

11、清除默认样式

12、元素溢出

13、外边距-合并现象

14、外边距-塌陷问题

15、行内元素的垂直内外边距

16、圆角-基本使用

17、圆角-特殊场景

18、扩展-盒子阴影

19、综合案例1-产品卡片

20、综合案例2-新闻列表

1、结构伪类选择器-基本使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器-基本使用</title>
    <style>
        /* 第一个 */
        li:first-child {
            background-color: green;
        }
        /* 最后一个 */
        li:last-child {
            background-color: yellow;
        }
        /* 任意一个 */
        li:nth-child(4) {
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>
        <li>li 7</li>
        <li>li 8</li>
    </ul>
</body>
</html>

2、结构伪类选择器-公式用法

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器-公式用法</title>
    <style>
        /* 偶数 */
        /* li:nth-child(2n) {
            background-color: green;
        } */

        /* 奇数 */
        /* li:nth-child(2n+1) {
            background-color: yellow;
        } */

        /* 倍数 */
        /* li:nth-child(5n) {
            background-color: green;
        } */

        /* n 从0开始 */
        /* 第5个以后的标签，含有5 */
        /* li:nth-child(n+5) {
            background-color: green;
        } */

        /* 第5个以前的标签，含有5 */
        li:nth-child(-n+5) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>
        <li>li 7</li>
        <li>li 8</li>
        <li>li 9</li>
        <li>li 10</li>
    </ul>
</body>
</html>

3、伪元素选择器

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        div::before {
            content: "老鼠";

            width: 100px;
            height: 100px;
            background-color: brown;
            display: block;
        }
        /* 必须设置 content 属性，没有 content，伪元素选择器不生效 */
        div::after {
            content: "大米";

            width: 100px;
            height: 100px;
            background-color: orange;
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 标签内容：老鼠爱大米 -->
    <div>爱</div>
</body>
</html>

4、盒子模型-组成

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-组成</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 内边距：内容与盒子边缘之间的距离 */
            padding: 20px;
            /* 边框线 */
            border: 1px solid #000;
            /* 外边距：出现在盒子外面，拉开两个盒子之间的距离 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

5、盒子模型-边框线

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-边框线</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 实线 */
            /* border: 1px solid #000; */

            /* 虚线 */
            /* border: 2px dashed red; */

            /* 点线 */
            border: 3px dotted green;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

6、盒子模型-单方向边框线

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-单方向边框线</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            border-top: 1px solid #000;
            border-right: 2px dashed red;
            border-bottom: 5px dotted green;
            border-left: 10px solid orange;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

7、盒子模型-内边距

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* padding: 20px; */

            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 40px;
            padding-left: 80px;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

8、盒子模型-内边距-多值写法

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-padding多值写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 四值：上 右 下 左 */
            /* padding: 10px 20px 40px 80px; */

            /* 三值：上 左右 下 */
            padding: 10px 40px 80px;

            /* 两值：上下 左右 */
            padding: 10px 80px;

            /* 记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样 */
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

9、盒子模型-尺寸计算

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-尺寸计算</title>
    <style>
        div {
            width: 200px;
            height: 200px;

            /* 手动减法 */
            /* width: 160px;
            height: 160px; */

            background-color: pink;
            padding: 20px;

            /* 内减模式：不需要手动减法，加padding和border不会撑大盒子 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

10、盒子模型-版心居中

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-版心居中</title>
    <style>
        div {
            /* 版心居中要求：盒子要有宽度 */
            width: 1000px;
            height: 200px;
            background-color: pink;

            /* 外边距不会撑大盒子 */
            /* margin: 50px; */
            /* margin-left: 100px; */
            /* margin: 50px 100px; */

            /* 设置版心居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>版心内容</div>
</body>
</html>

11、清除默认样式

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除默认样式</title>
    <style>
        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 去掉列表的项目符号 */
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>ppppppp</p>
    <ul>
        <li>li</li>
    </ul>
</body>
</html>

12、元素溢出

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素溢出</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            overflow: hidden;

            /* overflow: scroll; */

            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div>文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试</div>
</body>
</html>

13、外边距-合并现象

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并现象</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-bottom: 80px;
        }

        .two {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

14、外边距-塌陷问题

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距-塌陷问题</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding-top: 50px;
            box-sizing: border-box;

            /* 溢出隐藏 */
            /* overflow: hidden; */

            /* border-top: 1px solid #000; */
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: orange;

            /* margin-top: 50px; */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

15、行内元素的垂直内外边距

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的垂直内外边距</title>
    <style>
        span {
            /* margin 和 padding 属性，无法改变垂直位置 */
            margin: 50px;
            padding: 20px;
            /* 行高可以改变垂直位置 */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <span>span标签</span>
    <span>span标签</span>
</body>
</html>

16、圆角-基本使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角-基本使用</title>
    <style>
        div {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: orange;

            /* border-radius: 20px; */

            /* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */
            
            /* 四值：左上 右上 右下 左下 */
            /* border-radius: 10px 20px 40px 80px; */

            /* 三值：左上 右上+左下 右下 */
            border-radius: 10px 40px 80px;

            /* 两值：左上+右下 右上+左下 */
            border-radius: 10px 80px;
        }   
    </style>
</head>
<body>
    <div></div>
</body>
</html>

17、圆角-特殊场景

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角-特殊场景</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            
            /* border-radius: 100px; */

            /* 最大值是50%，超过50%没有效果 */
            border-radius: 50%;
        }

        div {
            width: 200px;
            height: 80px;
            background-color: orange;

            border-radius: 40px;
        }
    </style>
</head>
<body>
    <!-- 正圆形 头像 -->
    <img src="./images/1.jpg" alt="">

    <!-- 胶囊状 -->
    <div></div>
</body>
</html>

18、扩展-盒子阴影

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            margin: 50px auto;
            width: 200px;
            height: 80px;
            background-color: orange;

            box-shadow: 10px 15px 10px 1px rgba(0,0,0,0.5) inset;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

19、综合案例1-产品卡片

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品卡片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f1f1f1;
        }

        .product {
            margin: 50px auto;
            padding: 40px;

            width: 270px;
            height: 253px;
            background-color: #fff;
            text-align: center;

            border-radius: 10px;
        }

        .product h4 {
            margin-top: 20px;
            margin-bottom: 12px;
            font-size: 18px;
            color: #333;
            font-weight: 400;
        }

        .product p {
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="./images/liveSDK.svg" alt="">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </div>
</body>
</html>

20、综合案例2-新闻列表

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .news {
            margin: 100px auto;
            width: 360px;
            height: 200px;
            /* background-color: pink; */
        }

        .news .hd {
            height: 34px;
            background-color: #eee;
            border: 1px solid #dbdee1;
            border-left: 0;
        }

        .news .hd a {
            margin-top: -1px;
            display: block;
            border-top: 3px solid #ff8400;
            border-right: 1px solid #dbdee1;
            width: 48px;
            height: 34px;
            background-color: #fff;

            text-align: center;
            line-height: 32px;
            font-size: 14px;
            color: #333;
        }

        .news .bd {
            padding: 5px;
        }

        .news .bd li {
            padding-left: 15px;
            background-image: url(./images/square.png);
            background-repeat: no-repeat;
            background-position: 0 center;
        }

        .news .bd li a{
            padding-left: 20px;
            background: url(./images/img.gif) no-repeat 0 center;

            font-size: 12px;
            color: #666;
            line-height: 24px;
        }

        .news .bd li a:hover {
            color: #ff8400;
        }
    </style>
</head>
<body>
    <!-- 新闻区域 包含 标题+内容 -->
    <div class="news">
        <div class="hd"><a href="#">新闻</a></div>
        <div class="bd">
            <ul>
                <li><a href="#">点赞"新农人" 温暖的伸手</a></li>
                <li><a href="#">在希望的田野上...</a></li>
                <li><a href="#">"中国天眼"又有新发现 已在《自然》杂志发表</a></li>
                <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
                <li><a href="#">G9"带货"背后：亏损面持续扩大，竞争环境激烈</a></li>
                <li><a href="#">多地力推二手房"带押过户"，有什么好处？</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
相关推荐
码哥DFS1 分钟前
JS进阶-day1 作用域&解构&箭头函数
前端·javascript
月光番茄9 分钟前
基于AI的智能自动化测试系统：从Excel到双平台测试的完整解决方案
前端
凌览12 分钟前
因 GitHub 这个 31k Star 的宝藏仓库，我的开发效率 ×10
前端·javascript·后端
喝西瓜汁的兔叽Yan13 分钟前
小效果--多行文本溢出出现省略号
前端·css
子林super13 分钟前
doris用户连接数被打满问题
前端
GISer_Jing20 分钟前
LLM对话框项目总结II
前端·javascript·node.js
恰薯条的屑海鸥21 分钟前
前端进阶之路-从传统前端到VUE-JS（第五期-路由应用）
前端·javascript·vue.js·学习·前端框架
子林super23 分钟前
TIDB常用命令手册
前端
好青崧24 分钟前
单页面和多页面的区别和优缺点
前端·vue
TimelessHaze28 分钟前
深入理解 JavaScript Event Loop：从原理到实战全解析
前端·javascript·react.js
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04身弱武修法：玄之又玄，奇妙之门05集群聊天服务器---MySQL数据库的建立06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07浅谈几种js设计模式08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10基于odoo17的设计模式详解---单例模式