CSS盒模型

本次笔记记录于2025.10.29，星期五晚上十点半，是一个下午只有一节课的晚上
本次笔记是第一次用这样的方式记录，之后也会继续坚持

1.核心概念

在CSS中，每个元素都被表示为一个矩形的盒子（Box）。这个盒子由内到外由四个部分组成：
内容区（content）、内边距（padding）、边框（border） 和 外边距（margin）。

2.解决了什么问题

提供了设计和布局的基础，可以将任何元素视为一个能调整的“盒子”
调整内外边距以及各种属性，可以实现很多效果，比如卡片和按钮
结合伪类（还没细学，比如hover）可以实现简单的交互效果

3.代码示例

html结构不写了你到时候复习的时候想看效果自己补

/* 代码 */  
        *{
            box-sizing: border-box;
        }
        .card{
            width: 300px;
            padding: 30px;
            border: 1px solid pink;
            box-shadow: 1px 1px 4px 2px blue;
            background-color: white;
            border-radius: 10px;
        }
        .button{
            /* ib按钮可调整大小,block占整行，inline行内，none直接不显示 */
            display: inline-block;
            width: 50px;
            height: 25px;
            background-color: greenyellow;
            /* 圆角 */
            border-radius: 10px;
            /* 文字居中 */
            text-align: center;
            font-size: 15px;
            /* 文字颜色 */
            color: black;
            border: 1px solid blue;
            margin: 0 auto;
            box-shadow: 1px 1px 2px 3px yellowgreen;
            /* 影响鼠标移动上去的指针变化 */
            cursor: pointer;
            transition: 0.3s background-color;
            /* 还有underline下划线 overline上划线 line-through删除线 */
            text-decoration: none;
        }
        /* 令鼠标移动上去之后会产生变化 */
        .button:hover{
            background-color: darkgreen;
        }

4.注意事项/常见误区

注意区分display在不同属性下按钮的生成位置，以及各种属性是否生效
注意盒模型大小的计算，或者直接用box-sizing: border-box

5.相关链接

DeepSeek对话:CSS盒模型基础教学与示例

6.本次学习总结

虽然有些拖延，但是你已经非常成功的学习了盒模型的基础！而不是像之前一样半吊子只会一丢丢了
这份笔记就是这次学习很完美的证明，你能充分理解上面的代码并且知道他们的作用
之后每次学习一个新概念就像这样记录下来吧，之后无论在什么地方都会派上用场！

这份笔记从现在就已经开始创造价值了。 坚持下去，这个知识花园会让你受益匪浅的。加油！