《CSS盒子模型》笔记总结

张丶大帅

于 2025-10-02 10:54:17 发布

阅读量1.1k

点赞数 30

CC 4.0 BY-SA版权

分类专栏：黑马程序员（bilibili）---HTML 文章标签： css 笔记前端

本文链接：https://blog.csdn.net/2501_93346406/article/details/152324580

黑马程序员（bilibili）---HTML 专栏收录该内容

8 篇文章

订阅专栏

CSS的三大特性

一：继承性
二：层叠性前两个特性见CSS进阶

三：优先级

基本信息：
在这里插入图片描述
eg：

<!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 {
            color: cornsilk;
        }
        .q {
            color: blue;
        }
        #w {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="q" id="w">优先级展示</div>
    <div class="q">优先级展示</div>
</body>
</html>

效果图：
在这里插入图片描述

**tip：**越精准的选择器优先级越高，不用刻意去记很多。

权重叠加计算

基本信息：
在这里插入图片描述
**tip：**这个其实就是一个方便自己看一堆选择器里面谁生效，知道就好。

Chrome调试工具（查错代码）

基本信息： css上一行出错会导致下一行不生效。
使用方法：在谷歌浏览器中右键相应内容。
光标在符号后面时距离距离远的是中文标点，紧贴者的是英文标点。
如果检查时右边都没css的代码，大概率是选择器出错了。

Pxcook工具

基本信息：
一般形式用设计
psd格式则用开发
可以看图片大小，提取颜色等功能。

盒子模型

> 一：盒子模型的介绍

基本信息：
在这里插入图片描述
eg：

<!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: chartreuse;
            /* border边界线 */
            border: 20px solid #e60c0c;
            /* padding内边界,内容与盒子边界的距离 */
            padding: 30px;
            /* margin外边界,盒子外空白区域 */
            margin: 30px;
        }
    </style>
</head>
<body>
    <div>
        基本盒子构造1
    </div>
    <div>
        基本盒子构造2
    </div>
</body>
</html>

效果图：

在这里插入图片描述

> 二：盒子宽高内容

基本信息：
在这里插入图片描述

> 三：盒子的边框(border)

基本信息：

在这里插入图片描述

控制某个方向的边框
在这里插入图片描述
单个属性：

在这里插入图片描述
eg：

<!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: 333px;
            height: 300px;
            background-color: rgb(113, 113, 178);
            border-right: 3px dashed red;
            border-top: 4px dashed red;
        }
    </style>
</head>
<body>
    <div>
        盒子边框
    </div>
</body>
</html>

效果图：
在这里插入图片描述
tip:边框，内边距和外间距都是额外距离，与盒子大小无关会在盒子的基础上增大。

> 四：盒子内边距（paddig）

基本信息：
在这里插入图片描述
eg：

<!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: aqua;
            padding: 30px 20px 12px 22px;
        }
    </style>
</head>
<body>
    <div>
        盒子内边距
    </div>
</body>
</html>

效果的解析图：
在这里插入图片描述

> 五：CSS盒子（自动内减）

基础信息：
在这里插入图片描述
eg：

<!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: aqua;
            border: 10px dashed red;
            padding: 30px;
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div>
        固定盒子大小
    </div>
</body>
</html>

效果图：
在这里插入图片描述

**tip:**相当于就加一行代码（box-sizing：border-box）就可以固定住盒子的大小，也称为CSS的内减模式。

> 六：盒子的外边界（margin）

基本信息：
参考和盒子的内边距。（除了标签名字不一样其他都一样。）
eg：

<!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: 200px;
            background-color: aqua;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        盒子的外边距
    </div>
</body>
</html>

效果图：
在这里插入图片描述

> 七：清除默认内外边距

基础信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除默认内外边距</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <h1>这是一个h1标签</h1>
</body>
</html>

效果图：
在这里插入图片描述

> 八：版心居中

基本信息：
在确定好盒子的宽高大小时，一般内容是放在网页中间加一个margin：0 auto；即可自动居中！
eg：

<!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: 600px;
            background-color: beige;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>盒子版心居中</div>
</body>
</html>

效果图：
在这里插入图片描述

> 九：外边界重叠问题

基本信息：
在这里插入图片描述
eg：

<!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: aqua;
        }
        .ww {
            margin-bottom: 30px;
        }
        .www{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="ww">盒子的间距问题-1</div>
    <div class="www">盒子的间距问题-2</div>
</body>
</html>

效果图：
在这里插入图片描述

> 十：外边界塌陷问题

基本信息：
在这里插入图片描述

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边距塌陷问题</title>
    <style>
        .da {
            width: 300px;
            height: 200px;
            background-color: rgb(175, 124, 48);
            overflow: hidden;
        }
        .xiao {
            width: 100px;
            height: 100px;
            background-color: rgb(158, 22, 22);
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="da">
        <div class="xiao">son</div>
    </div>
</body>
</html