CSS中的盒子模型

目录

盒子模型介绍

盒子模型组成

盒子边框

边框的基本使用

边框影响盒子大小

盒子内边距

内边距的基本使用

内边距影响盒子大小

内边距不影响盒子大小的情况

盒子外边距

外边距的基本使用

外边距的常见使用

外边距合并问题

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷

清除盒子内外边距（布局页面前的操作）

盒子模型介绍

在网页布局时，主要关注的就是如何利用CSS摆放盒子

一个网页布局过程中：

  1. 先准备好相关的网页元素，网页元素基本都是盒子
  2. 利用 CSS 设置好盒子样式，然后摆放到相应位置
  3. 往盒子里面装内容

盒子模型组成

盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

盒子边框

边框的基本使用

在CSS中使用border可以设置元素的边框。

CSS中的边框有三部分组成：

属性

作用

border-width

定义边框的粗细，单位为px

border-style

边框的样式

border-color

边框颜色

基本语法如下：

选择器 {
    border: border-width || border-style || border-color;
}

其中，边框样式 border-style 可以设置如下值：

  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

其余属性给具体值即可

📌

上面的每一个属性都可以单独进行书写，并且border-width和border-color均有默认值，分别为1px以及#000

示例代码：

<!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 {
            height: 100px;
            width: 200px;
            border-width: 20px;
            border-color: purple;
            border-style: solid;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

边框属性也可以简写为下面的代码：

<style>
    div {
        height: 100px;
        width: 200px;
        border: 20px solid purple;
        background-color: skyblue;
    }
</style>

当需要为某一边设置边框时需要注意设置的顺序，一般需要特殊处理的边放在统一处理完的边的下面进行书写，使用层叠性实现效果，例如需要实现除下边框红色以外其余边框为黑色，宽度均为20px，代码如下：

<!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 {
            height: 100px;
            width: 200px;
            /* 先设置整体边框颜色为黑色，宽度为20 */
            border: 20px solid black;
            /* 再设置下边框颜色为红色，其余内容不变 */
            border-bottom: 20px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

通过对边框的粗细控制，也可以通过边框对单元格边框的粗细进行设置，例如下面的表格：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格单元格粗细设置</title>
</head>

<body>
    <table align="center" border="1" cellspacing="0" cellpadding="0" height="300" width="300">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

效果如下：

使用CSS对表格单元格样式进行设置

为了避免单元格之间的空隙，可以使用border-collapse属性进行设置，基本语法如下：

选择器 {
    border-collapse: collapse;/* 表示相邻边框合并在一起 */
}

结合边框其他属性对上面的表格样式进行重新设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格单元格粗细设置</title>
    <style>
        /* 设置表格外部整体边框 */
        table {
            height: 300px;
            width: 300px;
            /* 合并表格单元格边框，防止出现单元格之间有间隙 */
            border-collapse: collapse;
            /* 设置表格单元格边框粗细、样式以及颜色 */
            border: 1px solid black;
        }

        /* 设置表格单元格边框粗细、样式以及颜色 */
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</body>

</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 {
            height: 100px;
            width: 200px;
            background-color: skyblue;
        }

        .changed {
            /* 改变盒子边框宽度 */
            border: 20px solid purple;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="changed"></div>
</body>

</html>

为添加边框时的盒子宽度：

添加边框后的盒子宽度：

在上面的代码中，因为每一个边框宽度各为20px，所以左右共40px加到宽度200px上导致结果为240px和上下共40px加到高度100px上

所以为了不改变盒子原始大小，再添加边框时应当考虑盒子本身的宽度和高度，因为宽度总共会增加40px，所以为了不改变盒子200px的宽度，需要将原始的200px-40px得到的160px作为新的宽度，对于高度也是同理，修改部分如下：

<style>
    div {
        height: 100px;
        width: 200px;
    }
    .changed {
        /* 改变盒子宽度和高度 */
        height: 60px;
        width: 160px;
    }
</style>

效果如下：

所以，在处理盒子边框问题时，需要考虑采取的方式有：

  • 测量盒子大小的时候,不量边框
  • 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

盒子内边距

内边距的基本使用

在CSS中，当需要调整盒子内部的内容和盒子边框的距离时，可以用到内边距padding属性

基本语法如下：

选择器 {
    padding: 值px 值px 值px 值px;
}

在CSS中，有四种值的个数对padding进行修改：

值的个数

每一个值的含义

padding: 值px;

1个值时，这个值代表上、下、左、右四个内边距都为该值

padding: 值px 值px;

2个值时，第一个值代表上下内边距，第二个值代表左右内边距

padding: 值px 值px 值px;

3个值时，第一个值代表上内边距，第二个值代表左右内边距，第三个值代表下内边距

padding: 值px 值px 值px 值px;

4个值时，第一个值代表上内边距，第二个值代表右内边距，第三个值代表下内边距，第四个值代表左内边距

示例代码：

<!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 {
            height: 100px;
            width: 100px;
            background-color: green;
            color: yellow;
        }

        .red {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div>这是一个内容</div>
    <br />
    <div class="red">这是一个内容</div>
</body>

</html>

效果如下：

对于padding来说，除了上面写在一起的形式，也有每一边分开的写法，语法如下：

padding-top: 值px;
padding-bottom: 值px;
padding-left: 值px;
padding-right: 值px;

内边距影响盒子大小

同边框一样，当为盒子设置了内边距之后，会出现下面的情况：

  1. 内容和边框有了距离，添加了内边距（希望的效果）
  2. padding影响了盒子实际大小（意外的效果）

例如下面的代码：

<!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 {
            height: 100px;
            width: 100px;
            background-color: green;
            color: yellow;
        }

        .red {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div>这是一个内容</div>
    <br />
    <div class="red">这是一个内容</div>
</body>

</html>

对于没有修改的盒子来说，宽度和高度并没有改变：

对于修改的盒子来说，宽度和高度会发生改变，并且改变的方式和边框类似：

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子，所以需要使用内边距时考虑下面的解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

内边距不影响盒子大小的情况

当遇到子盒子没有写高度或宽度中的某一个属性或者两个属性，默认和父盒子一样的宽度，此时指定padding不会超出父盒子的高度和宽度，但是如果子盒子指定了其中的某一个属性，那么就会出现超出父盒子原始大小的部分，例如下面的代码：

<!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: 100px;
            background-color: green;
        }

        div .unchange {
            /* 子盒子不指定宽度时不超出盒子大小 */
            padding: 30px;
            background-color: red;
        }

        div .change {
            /* 子盒子指定宽度时超出盒子大小 */
            width: 200px;
            padding: 30px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <p class="unchange"></p>
    </div>

    <div>
        <p class="change"></p>
    </div>
</body>

</html>

效果如下：

盒子外边距

外边距的基本使用

当需要在网页中控制盒子与盒子之间的距离时，可以使用margin 属性设置外边距

基本语法如下：

选择器 {
    margin: 值px 值px 值px 值px;
}

与padding类似，margin的简写方式也存在四种取值方式：

值的个数

每一个值的含义

margin: 值px;

1个值时，这个值代表上、下、左、右四个外边距都为该值

margin: 值px 值px;

2个值时，第一个值代表上下外边距，第二个值代表左右外边距

margin: 值px 值px 值px;

3个值时，第一个值代表上外边距，第二个值代表左右外边距，第三个值代表下外边距

margin: 值px 值px 值px 值px;

4个值时，第一个值代表上外边距，第二个值代表右外边距，第三个值代表下外边距，第四个值代表左外边距

同样，margin也支持分开写法：

padding-top: 值px;
padding-bottom: 值px;
padding-left: 值px;
padding-right: 值px;

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
    <style>
        .top {
            margin-bottom: 20px;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div></div>
</body>

</html>

效果如下：

外边距的常见使用

在实际开发中，一般使用外边距将已经存在的盒子处于页面的中间位置

外边距可以让块级盒子水平居中的两个条件：

  • 盒子必须指定了宽度width（高度height可以不指定，但是盒子中必须包含内容）（因为需要计算当前盒子在总共宽度的中间位置）
  • 盒子左右的外边距都设置为 auto （计算中间位置）

示例代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距使当前盒子居中</title>
    <style>
        .box {
            /* 必须指定宽度和高度 */
            width: 200px;
            background-color: skyblue;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box">这是一个内容</div>
</body>

</html>

效果如下：

对于控制外边距使得盒子居中的代码常见的有下面三种：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

📌

以上方法是让块级元素水平居中

当需要使行内元素或者行内块元素水平居中，则需要给其父元素添加 text-align:center 即可。

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距使当前盒子居中</title>
    <style>
        .box {
            /* 必须指定宽度和高度 */
            width: 200px;
            background-color: skyblue;
            margin: auto;
            /* 使行内元素居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">这是一个内容</div>
</body>

</html>

效果如下：

外边距合并问题

对于外边距合并问题包括两种：

  1. 相邻块元素垂直外边距的合并
  2. 嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并

对于两个垂直方向相邻的盒子来说，如果需要将两个盒子分开，则需要指定盒子的外边距，但是如果两个盒子都指定外边距时就会出现合并的问题，例如下面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相邻块元素垂直外边距合并</title>
    <style>
        .up {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 对上面的盒子指定外边距的下部分 */
            margin-bottom: 10px;
        }

        .down {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 对下面的盒子指定外边距的上部分 */
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="up"></div>
    <div class="down"></div>
</body>

</html>

在上面的代码中，上面的盒子指定其下方的外边距为10px，而下面的盒子指定其上方的外边距为20px，如果直接思考会认为这两个盒子的间隙为30px，但是实际上结果为20px，如下图所示：

因为20px的外边距是第二个盒子设置的外边距，所以此时相当于上盒子并没有设置外边距

所以对于相邻块元素垂直外边距的合并问题来说，解决方案如下：尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值，例如下面的代码：

当只改变父元素的外边距时，显示结果没有问题：

<!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 {
            height: 500px;
            width: 500px;
            background-color: skyblue;
            /* 父盒子指定外边距为50 */
            margin-top: 50px;
        }

        .son {
            height: 200px;
            width: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="father">
        <div class="son"></div>
    </div>

</body>

</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 {
            height: 500px;
            width: 500px;
            background-color: skyblue;
            /* 父盒子指定外边距为50 */
            margin-top: 50px;
        }

        .son {
            height: 200px;
            width: 200px;
            background-color: blue;
            /* 子盒子指定外边距为50 */
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="father">
        <div class="son"></div>
    </div>

</body>

</html>

效果如下：

在上面的代码中，父元素改变了上外边距使其上边界距离网页边缘50px，但是当需要将子元素相对父元素向下移动100px时，此时也改变了父元素相对于网页边缘上外边距，并且改变的大小同样遵循大的边距值为主，这个问题即为嵌套块元素垂直外边距的塌陷问题

解决方案有下面的三种，但是常见的是第三种，因为第一种和第二种都涉及到更改盒子边框，而改变盒子边框存在使盒子撑大的问题：

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加 overflow:hidden

采用第三种方案后代码如下：

<!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 {
            height: 500px;
            width: 500px;
            background-color: skyblue;
            /* 父盒子指定外边距为50 */
            margin-top: 50px;
            overflow: hidden;
        }

        .son {
            height: 200px;
            width: 200px;
            background-color: blue;
            /* 子盒子指定外边距为50 */
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="father">
        <div class="son"></div>
    </div>

</body>

</html>

效果如下：

清除盒子内外边距（布局页面前的操作）

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距

清除代码如下：

* {
    padding: 0;
    margin: 0;
}

因为上面的代码会清除所有可以清除的内外边距，所以一般上面的代码位于第一部分语句

📌

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

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

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

相关文章

Qt - 窗口

Qt - 窗口

目录 1. 前言 2. 菜单栏(QMenuBar) 2.1. 创建菜单栏 2.1.1. 方式一 2.1.2. 方式二 2.2. 在菜单栏中添加菜单和创建菜单项 2.3. 在菜单项之间添加分割线 2.4. 综合示例 3. 工具栏(QToolBar) 3.1. 创建工具栏 3.2. 设置停靠位置 3.2.1. 方式一 3.2.2. 方式二 3.3. 设…
阅读更多...
【前端】input输入框输入文字加文字轮廓效果

【前端】input输入框输入文字加文字轮廓效果

【前端】input输入框输入文字加文字轮廓效果 两种方案 方案一 输入框文字轮廓DEMO1通过文字阴影实现 <!DOCTYPE html> <html lang"en"> <head><title>输入框文字轮廓DEMO1通过文字阴影实现</title> <meta charset"UTF-8&quo…
阅读更多...
【Linux进阶之路】高级IO

【Linux进阶之路】高级IO

一、 铺垫 I&#xff0c;即input为输入&#xff1b;O&#xff0c;即output为输出&#xff0c;IO&#xff0c;即input output为输入输出。IO一般是基于网卡&#xff0c;磁盘&#xff0c;光盘&#xff0c;U盘&#xff0c;磁盘&#xff0c;磁带等毫秒级别的外存&#xff0c;相较…
阅读更多...
《QT实用小工具·三十一》基于QT开发的访客管理平台demo2

《QT实用小工具·三十一》基于QT开发的访客管理平台demo2

1、概述 源码放在文章末尾 该项目为访客管理平台demo&#xff0c;包含主界面、系统设置、警情查询、调试帮助、用户退出功能。 项目部分代码如下&#xff1a; #pragma execution_character_set("utf-8")#include "frmmain.h" #include "ui_frmmain…
阅读更多...
SpringBoot + Redis实现用户信息登录的缓存

SpringBoot + Redis实现用户信息登录的缓存

&#x1f34e;前言 &#x1f350;项目的背景 背景&#xff1a;&#x1f349;当我们在完成用户信息登录时&#xff0c;我们往往每次都会在数据库中查询用户的记录&#xff0c;生成token并返回给前端&#xff0c;不过这样会有一定的问题。 &#x1f350;造成的问题 问题&#xf…
阅读更多...
Linux 用户和组

Linux 用户和组

理解Linux 用户和组的概念 掌握passwd 文件的组成以及作用 掌握shadow 文件的组成以及作用 了解group 文件的内容 1.用户分类&#xff1a; 超级管理员&#xff08;root&#xff09; 普通用户 程序用户 1.用户信息文件 /etc/passwd 文件中存储了所有用户信息。 1.passwd 格…
阅读更多...
python中中英文打印对齐解决方案

python中中英文打印对齐解决方案

在python中&#xff0c;有时候会出现中英文混合输出的情形&#xff0c;但是由于中文默认是全角格式&#xff08;一个中文字符占用两个字符宽度&#xff09;&#xff0c;这会对python原生的print函数带来一些障碍。尤其是用户用print对齐输出的时候&#xff0c;这种差异会导致文…
阅读更多...
月球地形数据介绍（LOLA）

月球地形数据介绍（LOLA）

月球地形数据介绍 LOLA介绍LOLA数据的处理与发布数据类型和格式投影坐标系SIMPLE CYLINDRICALPOLAR STEREOGRAPHIC 数据下载与浏览 LOLA介绍 目前最新的月球地形高程数据来源于美国2009年发射的LRO探测器。 “月球勘测轨道器”(Lunar Reconnaissance Orbiter&#xff0c;LRO)…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （240）-- 算法导论17.3 6题

文心一言 VS 讯飞星火 VS chatgpt （240）-- 算法导论17.3 6题

六、证明&#xff1a;如何用两个普通的栈实现一个队列(练习10.1-6)&#xff0c;使得每个 ENQUEUE 和 DEQUEUE 操作的摊还代价为 O(1) 。练习10.1-6的内容是&#xff1a;说明如何用两个栈实现一个队列&#xff0c;并分析相关队列操作的运行时间。如果要写代码&#xff0c;请用go…
阅读更多...
【MIT6.824】lab2C-persistence, lab2D-log compaction 实现笔记

【MIT6.824】lab2C-persistence, lab2D-log compaction 实现笔记

引言 lab2C的实验要求如下 Complete the functions persist() and readPersist() in raft.go by adding code to save and restore persistent state. You will need to encode (or “serialize”) the state as an array of bytes in order to pass it to the Persister. Us…
阅读更多...
el-table使用show-summary合计，但只需要合并某一列

el-table使用show-summary合计，但只需要合并某一列

el-table使用show-summary合计&#xff0c;但只需要合并某一列 这里有两种方法&#xff0c;一种是网上的&#xff0c;我会引用他的链接给你们看。 一种是我自己看源码发现的 方法一 这个就是方法一的链接 点击我跳转方法一 方法二 不需要计算的列 去掉prop 然后用插槽显示即可…
阅读更多...
比特币叙事大转向

比特币叙事大转向

作者&#xff1a;David Lawant 编译&#xff1a;秦晋 要理比特币解减半动态&#xff0c;最关键的图表是下面这张&#xff0c;而不是价格图表。它显示了自 2012 年以来&#xff0c;矿业总收入与比特币现货交易量的比例&#xff0c;并标注了三个减半日期。 虽然矿工仍然是比特币生…
阅读更多...
Python八股文：基础知识Part2

Python八股文：基础知识Part2

1. Python中变量的保存和访问 Python中的变量实际上是一个指向对象的引用&#xff0c;每个对象都有一个唯一的标识符&#xff08;即内存地址&#xff09;。对于一些不可变对象&#xff0c;如字符串和整数&#xff0c;因为它们的值不可更改&#xff0c;所以当多个变量引用相同的…
阅读更多...
OSPF大型实验

OSPF大型实验

OSPF大型实验 实验拓扑图 实验思路 1、R4为ISP&#xff0c;其上只配置IP地址&#xff1b;R4与其他所直连设备间均使用公有IP&#xff1b; 2、R3-R5、R6、R7为MGRE环境&#xff0c;R3为中心站点&#xff1b; 3、整个OSPF环境IP基于172.16.0.0/16划分&#xff1b;除了R12有两…
阅读更多...
Java精品项目--第8期基于SpringBoot的宠物用品商城的设计分析与实现

Java精品项目--第8期基于SpringBoot的宠物用品商城的设计分析与实现

项目使用技术栈 SpringBootThymeleafMyBatisMySQLAopJavajdk1.8 项目介绍 项目截图
阅读更多...
JAVA 集合框架(一) Collection集合详解和常用方法

JAVA 集合框架(一) Collection集合详解和常用方法

Java集合框架&#xff08;Java Collections Framework&#xff09;是一个强大的、高度灵活的数据结构库&#xff0c;它为Java应用程序提供了组织、存储和操作对象集合的标准方法。 集合类体系结构 接口类&#xff1a; Collection: 是单例集合类的顶层接口&#xff0c;包括Lis…
阅读更多...
移动端适配之viewport

移动端适配之viewport

目录 盒模型&#xff1a;widthcontent&#xff08;padding border&#xff09; class"content-box"内容盒模型&#xff08;W3C盒&#xff09; class"border-box"边框盒模型&#xff08;IE 盒&#xff09; scroll滚动 window浏览器视窗&#xff1a;包括…
阅读更多...
MySQL高级（索引-性能分析-explain执行计划）

MySQL高级（索引-性能分析-explain执行计划）

explain 或者 desc 命令获取 MySQL 如何执行 select 语句的信息&#xff0c;包括在 select 语句执行过程中表如何连接和连接的顺序。 -- 直接在 select 语句之前加上关键字 explain / desc explain select 字段列表 from 表名 where 条件 &#xff1b; explain select * …
阅读更多...
自养号测评：如何提高国际站，敦煌网的店铺销量？

自养号测评：如何提高国际站，敦煌网的店铺销量？

随着互联网技术的迅猛进步&#xff0c;电子商务已经成为现代商业领域中不可或缺的一环。敦煌网&#xff0c;作为专注于中国文化艺术产品的电商平台&#xff0c;成功吸引了大量消费者的目光。然而&#xff0c;对于商家而言&#xff0c;如何进一步提升敦煌网的销售业绩&#xff0…
阅读更多...
用这些工具搭建企业内部知识库，原来这么轻松

用这些工具搭建企业内部知识库，原来这么轻松

在快速发展和信息爆炸的时代&#xff0c;为企业构建一个内部知识库变得十分重要。它不仅有助于保存关键信息&#xff0c;促进知识传承&#xff0c;还能提高企业的整体效率和响应能力。今天&#xff0c;我们将探讨三款非常适合搭建企业内部知识库的工具&#xff0c;它们各具特色…
阅读更多...
最新文章

Copyright @ 2022~2023