跳至主要內容

CSS盒子模型

Skyme2023/7/3大约 8 分钟前端前端CSS

盒子模型

  1. 标准文档流: HTML语言由标签构成，浏览器的程序会对标签进行解析，每解析一个标签，就会在浏览器窗口中将它“画”出来，即完成元素的布局。
    一个元素，浏览器会把它认为是一个矩形。浏览器会将矩形从左向右，从上向下按照顺序完成对元素的布局，这个顺序流就是标准文档流
  2. 盒子模型: 所有文档元素都生成一个矩形框，描述一个元素在文档布局中所占的空间大小，称为元素盒子(element box)。
    每个框影响着其他元素框的位置和大小，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
    盒子模型定义了盒的每个部分：margin（外边距）, border（边框）, padding（内边距）, content（内容，width+height）。它们合在一起就可以创建我们在页面上看到的内容。

盒子模型的组成

  • Content box: 这个区域是用来显示内容，大小可以通过设置width和height
  • Padding box: 包围在内容区域外部的空白区域； 大小通过padding相关属性设置
  • Border box: 边框盒包裹内容和内边距。大小通过border相关属性设置。
  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过margin相关属性设置
  • img

相关属性:

1.宽和高 width&height


    宽和高

        .box {
            width: 500px;
            height: 500px;
            background-color: yellow;
        }

        .div1 {
            width: 300px;
            height: 100px;
            background-color: red;
        }

        .div2 {
            width: 80%;
            height: 50%;
            background-color: green;
        }

        width: 300px;height: 100px
        wdith: 80%(500 * 0.8);height: 50%(500 * 0.5)
        width: 500px; height: 500px;

2. 边框border

border是border-width（边框粗细）、border-style（边框样式）、border-color（边框颜色）的简写。


    边框

        div {
            width: 100px;
            height: 100px;
            background-color: #ababab;
        }

        .div1 {
            border: 2px solid #ff0000;
        }

        .div2 {
            /* 分开设置 */
            border-width: 2px;
            border-style: dashed;
            border-color: #00ff00;
        }

        .div3 {
            border: 2px solid #ff0000;
            /* 还可以单独设置上、下、左、右 */
            border-top: 2px dotted #0000ff;
            /* 甚至单独一侧的某个属性都可以 */
            border-right-style: groove;
            border-left-color: #ff00ff;
            /* 设置none表示没有边框 */
            border-bottom: none;
        }

3. 内边距 padding

内边距指的是内容到边框之间的距离。通常使用固定值设置。
padding是padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）


    内边距

        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        div>p {
            background-color: #FF8888;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        .div1 {
            /* 四周都是5px */
            padding: 5px;
        }

        .div2 {
            /* 上下：5px，左右10px */
            padding: 5px 10px;
        }

        .div3 {
            /* 上：5px，右：10px，下：15px，左：20px */
            padding: 5px 10px 15px 20px;
        }

        padding: 5px;

        padding: 5px 10px;

        padding: 5px 10px 15px 20px;

4. 外边距


    外边距

        .box {
            width: 100px;
            height: 100px;
            background-color: #FFB5BF;
            border: 5px solid #94E8FF;
            margin: 10px;
        }
  1. 水平居中
  2. margin叠加
  3. margin塌陷

盒子模型大小计算

盒模型分类：

  1. 由于浏览器的差异性，不同浏览器对盒模型的宽高的计算方式不同，故盒模型分为两类：标准盒模型和IE盒模型（这里暂时不考虑IE的情况了）。
  2. 盒模型的类型由box-sizing属性决定：
    • box-sizing: content-box;：标准盒模型（默认）。
    • box-sizing: border-box;：怪异盒模型。 曾经 Firefox 推出过padding-box, 但由于其他浏览器并未跟进，故现在没有padding-box。

标准盒类型：

标准盒模型即我们默认情况下的盒模型：

  • 元素的 width、height只包含内容content，不包含border和padding值。
  • 盒子的大小由元素的宽高、边框和内边距决定。

margin虽然不是盒子本身大小，但是浏览器布局时也会计算它的大小

元素所占大小计算方式如下：
（margin）+ padding + border + width|height

怪异盒模型

  1. 怪异盒模型又称 IE盒模型(最初只有 IE 浏览器使用)，其特征如下：
    • 元素的width、height不仅包括 content，还包括border和padding。
    • 盒子的大小取决于width、height，修改 border和padding值不能改变盒子的大小。
  2. 元素所占大小计算方式如下：
    （margin）+ width|height

CSS元素分类

块级元素 block

  1. 特征：
    • 宽度默认为100%。
    • 独占一行展示（即使宽度不是100%，也会独占一行）。
    • 可以设置width/height属性。
    • margin-top和margin-bottom值有效
    • 块级元素常见标签：div（含HTML5语义化标签：main,aside,footer,header,section等等）、h1~h6、p、ul、ol、li、dl、dt、dd。

行内元素 inline

  1. 特征：
    • 在同一行中展示，一行内放置不了之后自动换行。
    • width/height属性设置后无效，只能通过内容、padding、line-height来撑开元素。
    • margin-top、margin-bottom属性无效果。
    • 行内元素常见标签：span、a、label、mark、短语标签（em、strong、code等等）。

行内块元素 inline-block

  1. 也称为内联块元素，其含有以上两者的综合特征：
    • 不会独占一行、在同一行中展示，一行内放置不了之后自动换行。
    • 可以设置width/height属性。
    • margin-top和margin-bottom值有效。
    • 行内块元素常见标签：img、input、select、textarea。

display属性的使用

  1. 使用display属性可以修改元素的分类，即可以把div变成行内或者行内块元素：
    • display: block;：把元素变为块级元素。
    • display: inline;：把元素变为行内元素。
    • display: inline-block;：把元素变为行内块元素。
    • display: none;：（重点）不显示元素，浏览器不布局该元素，既不在文档流中占任何空间，可以理解成隐藏元素。
    • display: flex;：（后面学习）使用弹性盒子布局。
    • display: grid;：（后面学习）使用网格布局。
.div1 {
    /* 改为行内块元素 */
    display: inline;
}

.span1 {
    /* 改为块级元素 */
    display: block;
}

.span2,.a1 {
     /* 改为行内块元素 */
     display: inline-block;
}

.hidden {
    /* 隐藏元素 */
    display: none;
}

表格:

表格用于数据的展示，在现在的情形之下表格已经不再被用于页面布局。

定义表格的时候，我们应该先定义行，然后再在行中定义列。

以下是表格相关的标签：

<table>...</table>：表格标签，定义表格。
<tr>...</tr>：行标签，在表格中定义一行。
<th>...</th>：列头标签，在行中定义列头，表格第一行中的列可以作为列头。
<td>...</td>：列标签，在行中定义普通的列。
<caption>...</caption>：标题标签，定义表格的标题。
<thead>...</thead>：表头标签，语义化标签。
<tbody>...</tbody>：表体标签，语义化标签。
<tfoot>...</tfoot>：表尾标签，语义化标签。

    表格的使用

            成绩表

                    姓名
                    语文
                    数学
                    英语

                    胡正
                    70
                    80
                    90

                    王魏辉
                    80
                    70
                    90

                    王彦琪
                    90
                    90
                    90

                    平均
                    80
                    80
                    90

样式美化:


    表格样式美化

        .table, .table th, .table td {
            border: 1px solid #FF7777;
            /* 收紧单元格之间的边框 */
            border-collapse: collapse;
        }

        /* 单元格，可以设置文字的颜色 */
        .table th,.table td {
            padding: 6px;
            color: #444444;
        }

        /* 隔行效果：奇数行 */
        .table>tbody>tr:nth-child(odd) {
            background-color: #77FF77;
        }

        /* 隔行效果：偶数行 */
        .table>tbody>tr:nth-child(even) {
            background-color: #7777FF;
        }

        /* 鼠标浮动，改变行的背景色 */
        .table>tbody>tr:nth-child(n):hover {
            background-color: #FF00FF;
        }

            成绩表

                    姓名
                    语文
                    数学
                    英语

                    胡正
                    70
                    80
                    90

                    王魏辉
                    80
                    70
                    90

                    王彦琪
                    90
                    90
                    90

                    杜明均
                    80
                    80
                    80

                    平均
                    80
                    80
                    90

表单:

表单域其它属性:

属性名属性值格式描述
name设置当前表单域提交时的参数名（重要属性）如果表单域没有设置该值，那么用户填写的值不会进行提交。 该属性对textarea和select标签同样有效。
value输入的值如果填写了该属性的值，那么表现为文本框填充的默认值。 该属性对textarea标签和绝大部分input标签有效。 type为submit、button、reset时，表现为按钮中的文字。
checked是否勾选该属性没有值，直接写该属性即可。 该属性适用于type值为checkbox或者radio。
size可视的文本输入字符数适用于text、password等文本框类型
maxlength能输入的最大字符数（重要属性）适用于text、password等文本框类型。 注意：开发时记得加上该属性，避免用户胡乱输入内容。
alt输入域描述适于text类型
src图像的URL适于image类型
tabindextab键次序
路的尽头依旧是路
Copyright © 2026 Skyme