6. CSS（三）

news2025/10/30 23:00:15

目录

一、盒子模型

（一）网页布局的本质

（二）盒子模型组成

（三）边框（border）

（四）表格的细线边框

（五）内边距（padding）

（六）外边距（margin）

1、外边距的典型应用：

 2、外边距合并：

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

（2）嵌套块元素垂直外边距塌陷

 （七）清除内外边距

（八）案例

 （九）总结

二、圆角边框

三、盒子阴影

四、文字阴影

一、盒子模型

页面布局要学习三大核心，盒子模型、浮动和定位

（一）网页布局的本质

网页布局过程：

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

网页布局的核心本质：就是利用CSS摆盒子

（二）盒子模型组成

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

（三）边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

border : border-width || border-style || border-color

属性作用
border-width定义边框粗细，单位是px
border-style边框的样式
border-color边框颜色
<!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;
            border-width: 5px;
            /* 边框的样式，常用的：solid实线边框 dashed虚线边框 dotted点线边框 */
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */
            border-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框简写：（没有顺序）

border: 5px solid pink;

 边框分开写法：

<!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;
            border-top: 5px solid pink;
            border-bottom: 10px dashed purple;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 边框会影响盒子的实际大小：

边框会额外增加盒子的实际大小，因此有两种方案解决：

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

（四）表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法： border-collapse: collapse; 

  • 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 {
            width: 500px;
            height: 200px;
        }
        th {
            height: 35px;
        }
        table,
        th,
        td {
            border: 1px solid pink;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="imgs/down.jpg"/></td>
                <td>345</td>
                <td>123</td>
                <td>
                    <a href="https://tieba.baidu.com">贴吧</a>
                    <a href="https://image.baidu.com/">图片</a>
                    <a href="https://baike.baidu.com/">百科</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="imgs/down.jpg"/></td>
                <td>124</td>
                <td>675432</td>
                <td>
                    <a href="https://tieba.baidu.com">贴吧</a>
                    <a href="https://image.baidu.com/">图片</a>
                    <a href="https://baike.baidu.com/">百科</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="imgs/up.jpg"/></td>
                <td>212</td>
                <td></td>
                <td>
                    <a href="https://tieba.baidu.com">贴吧</a>
                    <a href="https://image.baidu.com/">图片</a>
                    <a href="https://baike.baidu.com/">百科</a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="imgs/up.jpg"/></td>
                <td>23</td>
                <td>7654</td>
                <td>
                    <a href="https://tieba.baidu.com">贴吧</a>
                    <a href="https://image.baidu.com/">图片</a>
                    <a href="https://baike.baidu.com/">百科</a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="imgs/down.jpg"/></td>
                <td>121</td>
                <td>7676</td>
                <td>
                    <a href="https://tieba.baidu.com">贴吧</a>
                    <a href="https://image.baidu.com/">图片</a>
                    <a href="https://baike.baidu.com/">百科</a>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="imgs/up.jpg"/></td>
                <td>576576</td>
                <td>1231421</td>
                <td>
                    <a href="https://tieba.baidu.com">贴吧</a>
                    <a href="https://image.baidu.com/">图片</a>
                    <a href="https://baike.baidu.com/">百科</a>
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="imgs/up.jpg"/></td>
                <td>234</td>
                <td>7686</td>
                <td>
                    <a href="https://tieba.baidu.com">贴吧</a>
                    <a href="https://image.baidu.com/">图片</a>
                    <a href="https://baike.baidu.com/">百科</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

（五）内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

<!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-left: 20px;
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>
</html>

 内边距简写：

padding属性可以有一到四个值

值的个数表达意思
padding: 5px;1个值，代表上下左右都有5px内边距
padding: 5px 10px;2个值，代表上下内边距是5px，左右内边距是10px
padding:5px 10px 20px;3个值，代表上内边距5px，左右内边距10px，下内边距20px
padding:5px 10px 20px 30px;4个值，上5px，右10px，下20px，左30px（顺时针）

内边距会影响盒子的实际大小：

当给盒子指定padding值后，

  • 内容和边框有了距离，添加了内边距
  • padding影响了盒子的实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

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

 也有好处，例如案例-新浪导航栏：

<!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>
        /* 
            相关取值：
            1、上边框3像素，颜色为#ff8500
            2、下边框1像素，颜色为#edeef0
            3、盒子高度为41像素，背景颜色为#fcfcfc
            4、文字颜色为#4c4c4c
         */
         .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
         }
         .nav a {
            /* a属于行内元素，此时必须转换为行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-style: 12px;
            color: #4c4c4c;
            text-decoration: none;
         }
         .nav a:hover {
            background-color: #eee;
            color: #ff8500;
         }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </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>padding不会撑开盒子的情况</title>
    <style>
        h1 {
            /* 因为有width属性所以会撑大盒子，页面下面出现了水平滚动条*/
            width: 100%;
            height: 200px;
            background-color: pink;
            padding: 30px;
        }
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }
        div p {
            /* 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小 */
            /* width: 100%; */
            padding: 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <h1></h1>
    <div>
        <p></p>
    </div>
</body>
</html>

（六）外边距（margin）

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

margin简写方式代表的意义跟padding完全一致。

1、外边距的典型应用：

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1、盒子必须指定了宽度（width）

2、盒子左右的外边距都设置为auto

常见的写法，以下三种都可以：

  • 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>32-外边距的典型应用-块级盒子水平居中</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            /* 行内元素或者行内块元素居中给其父元素添加text-align:center即可 */
            text-align:center
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="imgs/logo.png" alt="">
    </div>
</body>
</html>

 2、外边距合并：

 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

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

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

 解决方案：尽量只给一个盒子添加margin值。

（2）嵌套块元素垂直外边距塌陷

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

 解决方案：

①可以为父元素定义上边框

②可以为父元素定义上内边距

③可以为父元素添加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 {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 1、可以为父元素定义上边框 */
            /* border-top: 1px solid transparent; */
            /* 2、可以为父元素定义上内边距 */
            /* padding: 1px; */
            /* 可以为父元素添加overflow: hidden */
            overflow: hidden
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

 （七）清除内外边距

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

* {
    padding: 0; /* 清除内边距 */
    margin: 0; /* 清除外边距 */
}

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

<!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;
        }
        span {
            background-color: pink;
            margin: 20px;
        }
    </style>
</head>
<body>
    123
    <ul>
        <li>abcd</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</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>
        * {
            margin: 0;
            padding: 0;
            
        }
        body {
            background-color: #f5f5f5;
        }
        a {
            color: #333;
            text-decoration: none;
        }
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }
        .box img {
            /* 图片的宽度和父亲一样宽 */
            width: 100%;
        }
        .review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性，所以padding不会撑开盒子的宽度 */
            padding: 0 28px;
            /* 因为段落有高度，所以不指定padding值(用padding值后，还要计算很麻烦) */
            margin-top: 30px;
        }
        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }
        .info h4 {
            display: inline-block;
            font-weight: 400;
        }
        .info span {
            color: #ff6700;
        }
        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="imgs/img.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于117384232的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>
</html>

 （九）总结

1、布局为何用不同的盒子，不能只用div吗？

标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p。

2、为什么用那么多类名？

类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选盒子更容易，后期维护也方便。

3、到底用margin还是padding？

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

二、圆角边框

在CSS3中，新增了圆角边框样式，这样盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角。

语法：border-radius： length;

原理：（椭）圆与边框的交集形成圆角效果

  •  参数值可以为数值或百分比的形式
  • 如果是正方形，要想设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写50%
  • 如果是个矩形，设置为高度的一半就可以做成圆角矩形
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        .yuan {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50%就是宽度和高度的一半 */
            border-radius: 50%;
        }
        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }
        .radius {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 10px 20px 30px 40px; */
            border-radius: 10px 40px;
        }
    </style>
</head>
<body>
    1、圆形
    <div class="yuan"></div>
    2、圆角矩形
    <div class="juxing"></div>
    3、可以设置不同的圆角
    <div class="radius"></div>
</body>
</html>

三、盒子阴影

CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影。

语法： box-shadow: h-shadow v-shadow blur spread color inset;

值描述
h-shadow必须。水平阴影的位置，允许负值。
v-shadow必须。垂直阴影的位置，允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。
inset可选。将外部阴影（outset）改为内部阴影。

 注意：

1、默认的是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效

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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3); */
        }
        /* 原先盒子没有影子，当鼠标经过盒子就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

四、文字阴影

在CSS3中，可以使用text-shadow属性将阴影应用于文本。

语法：text-shadow: h-shadow v-shadow blur color

<!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 {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div>哈喽呀</div>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何在 Spring Boot 中集成日志框架 SLF4J、Log4j

如何在 Spring Boot 中集成日志框架 SLF4J、Log4j

文章目录 具体步骤附录 笔者的操作环境&#xff1a; Spring Cloud Alibaba&#xff1a;2022.0.0.0-RC2 Spring Cloud&#xff1a;2022.0.0 Spring Boot&#xff1a;3.0.2 Nacos 2.2.3 Maven 3.8.3 JDK 17.0.7 IntelliJ IDEA 2022.3.1 (Ultimate Edition) 具体步骤 因为 …
阅读更多...
【BMC】OpenBMC开发基础2：修改原有程序

【BMC】OpenBMC开发基础2：修改原有程序

修改原有程序 通常情况下我们会需要修改OpenBMC原有的程序来适配我们的项目&#xff0c;本节将介绍一般的流程。 为此首先我们需要了解devtool这个工具&#xff0c;注意它不是前端开发用的那个devtool&#xff0c;而是由OE&#xff08;或者Yocto&#xff1f;&#xff09;提供…
阅读更多...
当肠道免疫系统与微生物共舞：了解肠道免疫细胞和肠道菌群互作

当肠道免疫系统与微生物共舞：了解肠道免疫细胞和肠道菌群互作

谷禾健康 同样暴露在含有致病微生物的环境中&#xff0c;有的人很少生病&#xff0c;有的人却很容易感染并生病。这是因为每个人的机体对潜在的病原体产生的免疫应答不同。 ★ 固有免疫和适应性免疫保护着人体 人体的免疫应答分为固有免疫&#xff08;先天免疫&#xff09;和适…
阅读更多...
AVS3：跨多通道预测PMC

AVS3：跨多通道预测PMC

前面的文章中介绍了TSCPM&#xff0c;它是AVS3中用于intra模式的跨通道预测技术&#xff0c;它利用线性模型根据亮度重建像素预测色度像素&#xff0c; 跨通道预测技术用于去除不同通道间的冗余信息&#xff0c;TSCPM可以去除Y-Cb、Y-Cr通道间的冗余&#xff0c;然而却忽略了…
阅读更多...
# Failed to initialize NVML: Driver/library version mismatch 的解决方法

# Failed to initialize NVML: Driver/library version mismatch 的解决方法

Failed to initialize NVML: Driver/library version mismatch 的解决方法 首发于知乎: https://zhuanlan.zhihu.com/p/643343668 全网同名, 欢迎大家关注我的知乎帐号! 经常电脑好好的, 昨天还可以训练, 第二天忽然驱动就掉了: 这个错误通常表示NVIDIA驱动程序和NVIDIA管理库…
阅读更多...
Octave Conv

Octave Conv

Octave ConvOctave Convolution 代码详解_octconv代码_zghydx1924的博客-CSDN博客 def forward(self, x):X_h, X_l xif self.stride 2:X_h, X_l self.h2g_pool(X_h), self.h2g_pool(X_l)X_h2l self.h2g_pool(X_h)# X_h2l指的是对输入进行下采样&#xff0c;下采样的方法时卷…
阅读更多...
用python做一个小游戏代码,用python制作一个小游戏

用python做一个小游戏代码,用python制作一个小游戏

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;如何用python编写一个简单的小游戏&#xff0c;用python做一个小游戏代码&#xff0c;今天让我们一起来看看吧&#xff01; 今天呢&#xff0c;给大家展示一下Python有趣的小地方&#xff0c;展示给大家看看&#xff0c…
阅读更多...
Android复习（Android基础-四大组件）——Service与Activity通信

Android复习（Android基础-四大组件）——Service与Activity通信

我们前面学会了启动和停止服务的方法&#xff0c;但是服务虽然是在活动里启动的&#xff0c;但是启动服务之后&#xff0c;活动与服务之间基本没什么关系了。正常情况&#xff0c;我们在Activity里调用startService()方法启动MyService这个服务&#xff0c;然后MyService的onCr…
阅读更多...
Openlayers实战：利用turf获取两个多边形的交集、差集、并集

Openlayers实战：利用turf获取两个多边形的交集、差集、并集

在数据统计方面，通常会涉及到图形间的交集、并集、差集等。在Openlayers的实战中，我们显示两个多边形的交集、并集、差集的表现。通过turf的方式，可以快速的实现我们的数据处理，具体的请参考源代码。 效果图 源代码 /* * @Author: 大剑师兰特（xiaozhuanlan），还是大剑师…
阅读更多...
three.js的镜面反射

three.js的镜面反射

three.js做成这种镜面反射的效果。 那就要使用three自带的功能Reflector 1.引入 组件 import { Reflector } from ../../node_modules/three/examples/jsm/objects/Reflector.js; 2.创建反射投影的存在面 let reflectorGeometry new THREE.PlaneBufferGeometry(100, 100); 3…
阅读更多...
Java经典面试题总结（一）

Java经典面试题总结（一）

Java经典面试题总结&#xff08;一&#xff09; 题一&#xff1a;Java编译运行原理题二&#xff1a;JDK&#xff0c;JVM&#xff0c;JRE三者之间的关系题三&#xff1a;谈一下对冯诺依曼体系的了解题四&#xff1a;重载与重写的区别题五&#xff1a;拆箱装箱是指什么&#xff1…
阅读更多...
Spring源码解析(八)：bean后置处理器CommonAnnotationBeanPostProcessor

Spring源码解析(八)：bean后置处理器CommonAnnotationBeanPostProcessor

Spring源码系列文章 Spring源码解析(一)&#xff1a;环境搭建 Spring源码解析(二)&#xff1a;bean容器的创建、默认后置处理器、扫描包路径bean Spring源码解析(三)&#xff1a;bean容器的刷新 Spring源码解析(四)&#xff1a;单例bean的创建流程 Spring源码解析(五)&…
阅读更多...
本地项目如何连接git远程仓库

本地项目如何连接git远程仓库

在本地新建项目后&#xff0c;如何连接git远程仓库呢&#xff1f;步骤如下&#xff1a; 第一步&#xff0c; 首先我们在git上新建仓库&#xff0c;设置模板可勾选Readme文件。&#xff08;readme文件的创建是为了介绍所写代码的一些详细信息,为了之后更好的维护。&#xff09;…
阅读更多...
记录问题: servlet获取项目包绝对路径

记录问题: servlet获取项目包绝对路径

【2023-8-8 23:46:27 星期二】 如何获取在webapp下的路径?而不是target包下的webapp目录 比如这里应该获取到 F:\Tiam\Desktop\freemarker\freemarker-demo01\src\main\webapp 而readPath总是获取到 F:\Tiam\Desktop\freemarker\freemarker-demo01\target\freemarker-demo0…
阅读更多...
Leetcode-每日一题【剑指 Offer 11. 旋转数组的最小数字】

Leetcode-每日一题【剑指 Offer 11. 旋转数组的最小数字】

题目 把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;我们称之为数组的旋转。 给你一个可能存在 重复 元素值的数组 numbers &#xff0c;它原来是一个升序排列的数组&#xff0c;并按上述情形进行了一次旋转。请返回旋转数组的最小元素。例如&#xff0c;数组 [3,4…
阅读更多...
Styletron: 面向组件的样式设计工具包

Styletron: 面向组件的样式设计工具包

styletron官网&#xff1a; styletron的GitHub链接&#xff1a; styletron-react 一. 介绍 Styletron是一个通用的component-oriented&#xff08;面向组件的&#xff09;样式工具。它属于css-in-js类别。Styletron可以很好地与React配合使用&#xff0c;但也可以与其他框架或…
阅读更多...
Allegro172版本无法低亮颜色的解决办法

Allegro172版本无法低亮颜色的解决办法

Allegro172版本无法低亮颜色的解决办法 在用Allegro172版本做PCB设计的时候，高亮颜色是常用的命令，同时将高亮的颜色去高亮也是使用的十分频繁。 有时在去高亮的时候会出现无法去高亮的情况如下图 右边这块铜皮被高亮成了白色 可以看到即便使用去高亮命令，铜皮的颜色仍然还…
阅读更多...
初次使用GPU云服务器

初次使用GPU云服务器

前言&#xff1a; 在体验了GPU云服务器&#xff08;GPU Cloud Computing&#xff0c;GPU&#xff09;后&#xff0c;我认为这是一个非常强大的弹性计算服务。它为深度学习、科学计算、图形可视化、视频处理等多种应用场景提供了强大的GPU算力&#xff0c;能够满足各类用户的计算…
阅读更多...
web集群学习--基于CentOS构建LVS-DR集群、配置nginx负载均衡

web集群学习--基于CentOS构建LVS-DR集群、配置nginx负载均衡

基于CentOS构建LVS-DR集群 环境准备 主机名 ip地址 node1 192.168.1.140 client node2 192.168.1.141 LVS node3 192.168.1.142 RS1 node4 192.168.1.143 RS2配置 1.关闭防火墙和SELinux [rootclient~]# systemctl stop firewalld [rootclient~]# systemctl disabl…
阅读更多...
实现UDP可靠性传输

实现UDP可靠性传输

文章目录 1、TCP协议介绍1.1、ARQ协议1.2、停等式1.3、回退n帧1.4、选择性重传 1、TCP协议介绍 TCP协议是基于IP协议&#xff0c;面向连接&#xff0c;可靠基于字节流的传输层协议 1、基于IP协议&#xff1a;TCP协议是基于IP协议之上传输的&#xff0c;TCP协议报文中的源端口IP…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023