CSS 内容盒子与边框盒子

news2024/11/18 22:56:36

这章比较重要，会不断更新❗

文章目录

  • 👇内容盒子
    • 开发者工具的使用
    • border 边框
    • padding 内边距
    • margin 外边距
    • 盒子整体尺寸
    • 元素默认样式与CSS重置
    • 元素分类
      • 块级标记
      • 行级标记
      • 行内块标记
    • display样式
    • 内容溢出
      • 裁剪掉溢出部分
      • 滚动条
    • 圆角边框 border-radius
  • ✌边框盒子

👇内容盒子

提示：这里可以添加本文要记录的大概内容：

每个HTML元素都是一个矩形盒子，由四个部分组成：

宽度、高度：指的是盒子中装的内容尺寸，并不是盒子整体的尺寸
边框：盒子本身有边框（border）
内边距：盒子里面的内容到盒子边框之间的距离即内边距（padding）
外边距：盒子边框外和其他盒子之间，还有外边距（margin）

在这里插入图片描述

开发者工具的使用

下面的内容用到了开发者工具：右键检查或F12显示
方便对前端代码调试

单击想调试的标签，这里以div举例
js用的是控制台，下面图内代码用的的HTML+CSS，选择的是元素
在这里插入图片描述
单击下面的样式
会看到写的样式代码
在这里插入图片描述
往下看图：
蓝色框就是内容框300px*300px
绿色框就是内边距
最外面的一圈是外边距
在这里插入图片描述
把鼠标放在图内，在左侧效果图内会显示对应的位置
在这里插入图片描述

右键检查后如果代码有删除线，说明代码失效，没用到
在这里插入图片描述

border 边框

边框样式主要有以下几种：

  1. 实线边框：使用border-style: solid;

  2. 虚线边框：使用border-style: dashed;

  3. 边框宽度：使用border-width: Npx;

  4. 双线边框：使用border-style: double;

  5. 无边框：使用border-style: none;

  6. 边框颜色（红）：使用border-color: red;

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
    <style>
        .d1{
            width: 300px;
            height: 300px;
            /* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 */
            /* border 边框样式 solid实线框，dashed-虚线框 */
            border: red 1px solid;
            /* 右边框单独设置粗细 */
            border-right-width: 5px;
            /* 上边框单独设置颜色 */
            border-top-color: #000;
            /* 下边框单独设置样式（虚线） */
            border-bottom-style: dashed;
        }
    </style>
</head>
<body>
    <div class="d1">
        内容
    </div>
</body>
</html>

输出效果
在这里插入图片描述

padding 内边距

padding：内边框，指的是边框和内容的距离，四个方向

padding-left：设置左内边距

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
    <style>
        .d1{
            width: 300px;
            height: 300px;
            /* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 */
            /* border 边框样式 solid实线框，dashed-虚线框 */
            border: red 1px solid;

            /* `padding`：内边框，指的是边框和内容的距离，四个方向 */
            padding-left: 100px;
        }
    </style>
</head>
<body>
    <div class="d1">
        内容
    </div>
</body>
</html>

输出效果及解释：
在这里插入图片描述

padding-top：设置上内边距

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
    <style>
        .d1{
            width: 300px;
            height: 300px;
            /* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 */
            /* border 边框样式 solid实线框，dashed-虚线框 */
            border: red 1px solid;
            /* padding：内边框，指的是边框和内容的距离，四个方向 */
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div class="d1">
        内容
    </div>
</body>
</html>

输出效果及解释：
在这里插入图片描述

padding-right：设置右内边距

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
    <style>
        .d1{
            width: 300px;
            height: 300px;
            /* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 */
            /* border 边框样式 solid实线框，dashed-虚线框 */
            border: red 1px solid;

            /* padding：内边框，指的是边框和内容的距离，四个方向 */
            padding-right: 10px;
        }
    </style>
</head>
<body>
    <div class="d1">
        内容
    </div>
</body>
</html>

输出效果及解释：
在这里插入图片描述

padding-bottom：设置下内边距，与上方例子类似，最好四个方法放在一起试

padding: 10px; 意思是：设置上下左右内边距都是10px
padding: 10px 20px; 意思是：设置上下内边距都是10px，左右内边距是20px
padding: 10px 20px 30px 40px; 意思是：设置上内边距是10px，右内边距是20px，下内边距是30px，左内边距是40px，按顺时针方向走，上右下左

margin 外边距

margin：外边距（上右下左）

margin：外边距，盒子与其他盒子边框之间的距离，有四个方向

margin-top：盒子与其他盒子之间上侧距离
margin-right：盒子与其他盒子之间右侧距离
margin-bottom：盒子与其他盒子之间下侧距离
margin-left：盒子与其他盒子之间左侧距离

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
    <style>
        .d1{
            width: 300px;
            height: 300px;
            /* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 */
            /* border 边框样式 solid实线框，dashed-虚线框 */
            border: red 1px solid;
            /* margin：外边距，盒子与其他盒子边框之间的距离，有四个方向 */
            margin-left: 50px;
            margin-top: 100px;
            margin-right: 40px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="d1">
        内容
    </div>
</body>
</html>

输出效果：
在这里插入图片描述
当然也可以四合一：
margin: 10px;：代表四个方向的盒子与其他盒子之间的距离都是10px

margin: 10px 5px;：代表两个盒子之间距离上下是10px，左右是5px

margin: 10px 5px 7px 15px;：代表两个盒子之间距离上是10px，右是5px，下是7px，左是15px。顺时针方向

margin: 0 auto 在父标记中水平居中

margin: 0 auto;

这里的0是上下边距（margin-top 和 margin-bottom）的值
auto是左右边距（margin-left 和 margin-right）的值

使用这个代码，左右的margin将自动设置为相等的值，从而使元素在父元素中水平居中。

【示例代码：】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            box-sizing: border-box;
            width: 300px;
            height: 300px;
            /* width和height指的是盒子内容的尺寸，并不是盒子整体的尺寸 */
            /* border: 边框样式 
            solid实线框  dashed虚线框*/
            border: red 1px solid;

        }
        .d2{
            /* width和height指的是盒子内容的尺寸，并不是盒子整体的尺寸 */
            width: 100px;
            height: 100px;
            /* 三个值：颜色、粗细、样式（三个值之间顺序无所谓） */
            border: solid 2px blue;
            /* 在父标记中水平居中 */
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div class="d1">
        内容
        <div class="d2">
        </div>
    </div>

</body>
</html>

输出效果
在这里插入图片描述
注意：该元素的宽度必须小于父元素的宽度才能实现水平居中。

盒子整体尺寸

盒子总尺寸=border（两个边框宽度）+padding（两个内边距宽度）+内容宽度（width）

盒子模型占用空间=margin（两个外边距宽度）+盒子模型总尺寸

元素默认样式与CSS重置

常用元素默认样式：

  1. 标签的margin为8px
  2. p标签的上下外边距为16px
  3. h1标签的上下外边距为21.440px
  4. ul标签的上下外边距也为16px，左内边距也为40px

CSS重置：在实际开发中，不同的浏览器有着不同的默认样式，这导致了在样式设置时可能会出现兼容性问题。为了解决这个问题，开发者可以使用一些 CSS 重置工具，通过覆盖浏览器的默认样式来统一不同浏览器的表现。这样开发者就可以更加方便地设置自己想要的样式，同时提高网站或应用的兼容性。

重置样式表通常包括以下内容：

/* 重置所有元素的边框、内边距、外边距为零 */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* 标题样式重置 */
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

/* 链接样式重置 */
a {
  color: inherit;
  text-decoration: none;
}

/* 列表样式重置 */
ul, ol {
  list-style: none;
}

/* 表单元素样式重置 */
input, textarea, select {
  font-size: inherit;
  font-family: inherit;
  border-radius: 0;
}

/* 其他元素样式重置 */
img, video {
  max-width:100%; 
  height:auto;
}

重置样式表不是解决所有CSS问题的，而是一种起点。
通过重置样式并自己定义样式，可以确保在所有浏览器中呈现一致的外观和行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 内外边距清0 */
        body,h1,p,ul{
            padding: 0;
            margin: 0;
        }
        a{
           /* 超链接默认下划线去掉 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    内容
    <h1>一级标题</h1>
    <p>段落</p>
    <ul>
        <li>123</li>
        <li>321</li>
    </ul>
    <a href="#">失控</a>
    
</body>
</html>

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

元素分类

块级标记

块级标记有：h1-h6、p、table、form、header、div、ul、ol、dl，等标签都是块级元素

块级标记，独占一行显示

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 块级标记 独占一行显示 */
    </style>
</head>
<body>
    <div>
        块级标记
    </div>
    <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>Document</title>
    <style>
        /* 块级标记 宽度不设置的话默认会撑满父标记 高度不设置的话默认由实际内容决定*/
        div{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        块级标记<br>二哈喇子
    </div>
    <span>范围标记</span>
</body>
</html>

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

块级标记支持设置所有的盒子样式属性

行级标记

  1. 行级标记可以和其他的行标记共处一行，从左向右显示
  2. 行级标记的宽度高度默认都是由实际内容
  3. 行级标记不支持设置宽度和高度，边框可以、内边距可以、左右外边距可以
  4. 常见行标记：span范围、a超链接、strong加粗、i字体图标

span标签就是典型的行级标记

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            background-color: skyblue; 
            /* 行级标记不支持设置宽度和高度 */
            width: 500px;
            height: 600px;
            
            border: 2px solid green;
            padding: 5px;
            margin-right: 200px;
            
            /* 行级标记不支持设置上下外边距 */
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <span>张三</span>
    <span>李四</span>
</body>
</html>

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

行内块标记

它既可以像行内元素一样在文本行内显示，也可以像块级元素一样设置宽高等属性。

  1. 行内块标记：可以和其他的行级标记和行内块标记从左向右共处一行显示
  2. 行内块标记的宽度、高度默认是由实际内容决定
  3. 行内块标记支持设置所有的盒子样式属性
  4. 常见的行内块标记：img、input、select、button、textarea

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        button{
            width: 200px;
            height: 50px;
            border: none;       /* 按钮边框去掉 */
            margin-top: 50px;   /* 上外边距 */
        }
    </style>
</head>
<body>
    <span>范围</span>
    <button>这是一个行内块元素的按钮</button>
    <input type="text">
</body>
</html>

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

display样式

none：隐藏显示

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            display: none;
        }
    </style>
</head>
<body>
    <span>爱上你</span>
    <span>算我失控</span>
</body>
</html>

输出显示什么都没有，只是隐藏了，并不是什么都没有

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

inline-block：显示成行内块

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 3px solid skyblue;
        }
    </style>
</head>
<body>
    <span>爱上你</span>
    <span>算我失控</span>
</body>
</html>

行内块显示
在这里插入图片描述
block：显示成块级标记
把inline-block换成block，则会在一行显示
在这里插入图片描述

inline：显示成行级

宽高失效
在这里插入图片描述

内容溢出

overflow：溢出样式，默认是展示溢出的部分
hidden：裁剪掉溢出的部分
auto：出现滚动条

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div>
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwww
    </div>
</body>
</html>

输出效果： 数据溢出（设计的尺寸装不下实际内容）
在这里插入图片描述

裁剪掉溢出部分

在div{}内加上： overflow: hidden;

把不显示的内容裁掉
在这里插入图片描述

滚动条

在div{}内加上： overflow: auto;

出现滚动条，把溢出部分显示出来
在这里插入图片描述

圆角边框 border-radius

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 3px solid greenyellow;
        }
    </style>
</head>
<body>
    <div>
        爱上你算我失控
    </div>
</body>
</html>

默认的角是直角
在这里插入图片描述
现在角度是直角，如果将区域设置成圆形，要求：宽高一致，边框半径二分之一宽高

另外加上水平居中：text-align: center;与垂直居中：line-height: 300px;

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 3px solid greenyellow;
            /* border-radius 边框半径 */
            /* 越大弧度越明显 */
            border-radius: 150px;   
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 300px; 
        }
    </style>
</head>
<body>
    <div>
        爱上你算我失控
    </div>
</body>
</html>

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

✌边框盒子

提示：这里可以添加本文要记录的大概内容：

默认的盒子类型是内容盒子：content-box
在内容盒子中，width和height是内容尺寸
盒子整体的尺寸=内容的尺寸+两个边框+两个内边距

css3引入了新的盒子类型，边框盒子：border-box
width和height是盒子的整体尺寸

盒子类型的样式：box-sizing

提示：以下是本篇文章正文内容，下面案例可供参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            box-sizing: border-box;
            width: 200px;
            height: 300px;
/* 颜色 宽度 虚实线 */
            border: red 2px solid;
            /* 四个方向的边距都是5px */
            padding: 5px;
            /* 200+10+1=214 */
        }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

输出效果
在这里插入图片描述
右键检查能打开开发者工具会看到：
在这里插入图片描述

下面结合html+css详解
HTML：

<div class="box">
  <h2>这是一个边框盒子</h2>
  <p>这是边框盒子的内容。</p>
</div>

CSS：

.box {
  border: 1px solid black;
  padding: 10px;
  width: 300px;
  height: 200px;
}

上述代码实现了一个简单的边框盒子，其中属性解释如下：

  • border：设置边框，包括边框宽度、样式和颜色。
  • padding：设置盒子内边距，即内容与边框之间的距离。
  • width：设置盒子宽度。
  • height：设置盒子高度。

通过上述代码，我们创建了一个宽度为300px，高度为200px的边框盒子，并设置了1px的黑色实线边框和10px的内边距。在盒子内部，我们加入了一个标题和一段文字。

边框盒子常用来作为容器，将其他元素放在其内部，以便于布局和样式设置。除了上述常用属性外，还可以设置边框圆角、阴影、透明度等效果。

边框盒子是HTML中最基本的盒子之一，它是由内容区域、内边距、边框和外边距组成的矩形区域。在CSS中，我们可以使用以下属性来控制边框盒子的各个部分：

  1. width和height属性用于控制内容区域的大小。例如：
div {
  width: 200px;
  height: 100px;
}
  1. padding属性用于控制内边距的大小。例如：
div {
  padding: 10px;
}
  1. border属性用于控制边框的样式、宽度和颜色。例如：
div {
  border: 1px solid #000;
}
  1. margin属性用于控制外边距的大小。例如：
div {
  margin: 10px;
}

在实际应用中，我们还可以使用其他属性来进一步定制边框盒子的样式，例如：

  1. border-radius属性用于控制边框的圆角半径。例如：
div {
  border-radius: 10px;
}
  1. box-shadow属性用于向边框盒子添加阴影效果。例如：
div {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
  1. background属性用于控制内容区域的背景色或背景图像。例如：
div {
  background: #f00;
}

最终，我们可以将上述属性组合起来，创建各种不同样式的边框盒子。例如，下面的代码会创建一个宽度为300px、内边距为20px、边框为2px实线边框、圆角半径为10px、阴影效果和灰色背景的边框盒子：

div {
  width: 300px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  background: #ccc;
}

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

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

相关文章

【MySQL数据库】MMM高可用架构

【MySQL数据库】MMM高可用架构

目录 一 、MMM简介1.1MMM&#xff08;Master-Master replication manager for MvSQL&#xff0c;MySQL主主复制管理器&#xff09;1.2关于 MMM 高可用架构的说明如下 二、搭建mysql MMM架构2.1实验环境2.2搭建多主多从2.3安装配置 MySQL-MMM 一 、MMM简介 1.1MMM&#xff08;M…
阅读更多...
【Linux系统编程】粘滞位详解

【Linux系统编程】粘滞位详解

文章目录 1. 背景2. 准备问题引出 3. 粘滞位4. 思考粘滞位的存在是否是必要的谁可以删除 上一篇文章我们学习了Linux权限相关的内容&#xff0c;这篇文章&#xff0c;我们再来学习一个知识点——粘滞位。 1. 背景 那为了让大家更容易理解粘滞位的概念&#xff0c;首先我们要来…
阅读更多...
【国产虚拟仪器】基于ZYNQ7045+V7 FPGA的多通道数据同步采集设计方案（一）

【国产虚拟仪器】基于ZYNQ7045+V7 FPGA的多通道数据同步采集设计方案（一）

多通道数据采集设备在当前信息数字化的时代应用广泛&#xff0c;各种被测量的信息 如光线、温度、压力、湿度、位置等&#xff0c;都需要经过多通道信号采集系统的采样和 处理&#xff0c;才能被我们进一步分析利用[37]。在一些对采集速率要求较高的军事、航天、 航空、工业制造…
阅读更多...
uniapp radio如何实现取消选中

uniapp radio如何实现取消选中

uniapp 内置radio组件明确表示&#xff0c;不能取消选中&#xff0c;那如果要实现取消选中呢&#xff1f; 只要在外层加上label或者其他标签包裹&#xff0c;或者直接加入click事件然后加入事件控制radio的值改变即可 <label class"radio" click"changeAll&…
阅读更多...
记录--Threejs-着色器实现一个水波纹

记录--Threejs-着色器实现一个水波纹

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 hree.js 是一个基于 WebGL 的 JavaScript 3D 库&#xff0c;用于创建和渲染 3D 图形场景。 一、 图像渲染过程 1、webGL webGL: WebGL 是一种基于 JavaScript API 的图形库&#xff0c;它允许在浏览器…
阅读更多...
【STM32智能车】电机控制

【STM32智能车】电机控制

【STM32智能车】电机控制 PWMPWM基本用法&#xff1a; 电机驱动基本控制基本状态 欢迎收看由咸鱼菌工作室出品的STM32系列教程。本篇内容主要电机控制 PWM 我们要控制电机&#xff0c;就要先了解一下PWM。 PWM(Pulse Width Modulation)控制——脉冲宽度调制技术&#xff0c;通…
阅读更多...
全开源的 agv 小车

全开源的 agv 小车

最近github 有 一个开源的stm32 大荷载小车&#xff0c;从pcb 到代码到cad 文件全部开源 代码在 git 小车的实物图 小车的cad 模型 小车的 abaqus 力学分析模型 pcb 图 控制板接线图 全开源小车 代码在 git
阅读更多...
港科夜闻｜香港科大(广州)与特斯联共建研究中心,打造国际领先的创新联合体...

港科夜闻｜香港科大(广州)与特斯联共建研究中心,打造国际领先的创新联合体...

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大(广州)与特斯联共建研究中心&#xff0c;打造国际领先的创新联合体。6月27日&#xff0c;“数字世界”联合研究中心正式揭牌成立&#xff0c;这个由香港科大(广州)与特斯联共同打造的研究中心&#xff0c;旨在推…
阅读更多...
hive中的datagrip和beeline客户端的权限问题

hive中的datagrip和beeline客户端的权限问题

hive中的datagrip和beeline客户端的权限问题 使用ranger和kerberos配置了hadoop和hive&#xff0c;今天想用来测试其权限 测试xwq用户&#xff1a; 1.首先添加xwq用户权限&#xff0c;命令如下&#xff1a; useradd xwq -G hadoop echo xwq | passwd --stdin xwq echo xwq …
阅读更多...
【笔记】EDA学习笔记

【笔记】EDA学习笔记

网课&#xff1a;立创EDA&#xff08;专业版&#xff09;电路设计与制作快速入门 资料&#xff1a;pan.baidu.com/s/1UlcfvAZ13s_wOHo3cvNQxA?pwdb9x8 提取码&#xff1a;b9x8 解压密码&#xff1a;123456 1.创建项目 略 2.原理图设计环境设置 2.1设置 默认网格尺寸&#…
阅读更多...
阿里云云效 流水线发布spring cloud项目及Vue项目

阿里云云效 流水线发布spring cloud项目及Vue项目

1. 单体spring boot 项目流水线主机部署 1.1 创建流水线 页面地址 我们选择模板,当然也可以自己新建一个 1.2 添加流水线源 这里是根据自己的代码仓库决定的,我用的gitee,需要添加服务连接 添加服务连接 新建服务授权/证书 点击新建自动跳转至gitee认证页面,同意授权即可 授权…
阅读更多...
网安等保 | 主机安全之KylinOS银河麒麟服务器配置优化与安全加固基线文档脚本分享...

网安等保 | 主机安全之KylinOS银河麒麟服务器配置优化与安全加固基线文档脚本分享...

欢迎关注「全栈工程师修炼指南」公众号 点击 &#x1f447; 下方卡片 即可关注我哟! 设为「星标⭐」每天带你 基础入门 到 进阶实践 再到 放弃学习&#xff01; “ 花开堪折直须折&#xff0c;莫待无花空折枝。 ” 作者主页&#xff1a;[ https://www.weiyigeek.top ] 博客&…
阅读更多...
线程不安全举例

线程不安全举例

1、举例说明集合类线程不安全 &#xff08;1&#xff09;查看源码可证明 看ArrayList源码 没有sync、lock&#xff0c;线程不安全 &#xff08;2&#xff09;创建多个线程写入读取数据 List<String> list new ArrayList<>(); for (int i 1; i <30 ; i) {n…
阅读更多...
2023年Web安全学习路线总结！430页Web安全学习笔记（附PDF）

2023年Web安全学习路线总结！430页Web安全学习笔记（附PDF）

关键词&#xff1a;网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线、web安全攻防笔记、渗透测试路线图 网络安全的范畴很大&#xff0c;相较于二进制安全等方向的高门槛、高要求&#xff0c;Web安全体系比较成熟&#xff0c;在现阶段来看&#xff0c;但凡有自己…
阅读更多...
k8s下安装redis

k8s下安装redis

一、使用helm安装redis 执行以下命令添加redis的repo helm repo add bitnami https://charts.bitnami.com/bitnami 创建的master和replica pod的默认size是8Gi&#xff0c;如果k8s的node没有足够的空间&#xff0c;会抛出如下错误&#xff1a;default-scheduler 0/3 nodes …
阅读更多...
安全防御 --- SSL VPN

安全防御 --- SSL VPN

附&#xff1a;无线项目介绍 SSL VPN 有浏览器的设备就可以使用SSL&#xff0c;进而使用SSL VPN。无需担心客户端问题&#xff0c;所以SSL VPN也称为无客户端VPN。SSL VPN在client to lan场景下特别有优势。 实际实现过程&#xff08;基于TCP实现&#xff09; &#xff08;1&…
阅读更多...
Nginx SSL使用自制证书

Nginx SSL使用自制证书

1. 生成证书 keytool -genkey -v -alias <Alias别名> -keyalg RSA -keystore <KeyStore文件> -validity <有效期> keytool -genkey -v -alias nginx -keyalg RSA -keystore nginx.keystore -validity 36500 alias别名为 nginxkeystore文件为 nginx.keystore…
阅读更多...
C/C++内存管理（内存分布、动态内存分配、动态内存分配与释放、内存泄漏等）

C/C++内存管理（内存分布、动态内存分配、动态内存分配与释放、内存泄漏等）

喵~ 内存之5大区&#xff08;栈区、堆区、静态区、常量区、代码区&#xff09;C/C中各自的内存分配操作符内存泄露?内存泄漏检测方法 内存之5大区&#xff08;栈区、堆区、静态区、常量区、代码区&#xff09; 1、栈区&#xff08;stack&#xff09;&#xff1a;由编译器自动分…
阅读更多...
避雷投稿！这3本SCIE期刊处于On Hold状态！有剔除风险！

避雷投稿！这3本SCIE期刊处于On Hold状态！有剔除风险！

今年3月份科睿唯安剔除的大量期刊中&#xff0c;有几本期刊之前被WOS数据库标记为“On Hold”状态&#xff0c;后面也出现了一些期刊解除“On Hold”状态的情况。 目前&#xff0c;WOS数据库查询有3本SCIE期刊正处于“On Hold”状态&#xff0c;这是什么信号呢&#xff1f;对于…
阅读更多...
org.apache.thrift.transport.TTransportException: GSS initiate failed

org.apache.thrift.transport.TTransportException: GSS initiate failed

hive配置kerberos發現錯誤&#xff0c;就所有的配置都配好了&#xff0c;但是使用datagrip連接hive時報錯如下&#xff1a; org.apache.thrift.transport.TTransportException: GSS initiate failed 後面是沒有認證的原因&#xff0c;使用kinit 認證即可 還有一種情況是 我使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023