zoukankan      html  css  js  c++  java

  • CSS面试题总结

    1. 两种盒模型说一下？

    • 在标准的盒子模型（默认）中，width指content部分的宽度

    • 在IE盒子模型中，width表示content+padding+border这三个部分的宽度
    • 想要切换盒模型也很简单，使用css3的  box-sizing  属性：

    box-sizing: content-box 　　是W3C盒子模型

    box-sizing: border-box 　　是IE盒子模型 

     

    2. 如何水平垂直居中？

    这里我介绍三种：

    1) 定位 + 负边距
    <style>
html,
body {
   100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #ccc;
}
div {
   400px;
  height: 400px;
  background-color: red;
  position: absolute;  /*脱离文档流*/
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
　/*transform: translate(-50%, -50%);*/　　/* 这步操作相当于上面两步 */
}
</style>
<body>
    <div></div>
</body>
    View Code

    2) display: flex 弹性布局

     这种方式需要给父元素做  display: flex  

    <style>
html,
body {
   100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #ccc;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
div {
   400px;
  height: 400px;
  background-color: red;
}
</style>
<body>
    <div></div>
</body>
    View Code
    3) display: table-cell
    <style>
html,
body {
   100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #ccc;
}
body {
  display: table;
}
.dv1 {
  display: table-cell;
  vertical-align: middle;
}
.dv2 {
   400px;
  height: 400px;
  background-color: red;
}
</style>
<body>
<div class="dv1">
  <div class="dv2"></div>
</div>
</body>
    View Code

    4) 绝对居中

    原理是当top,bottom为0时，margin-top&bottom设置auto的话会无限延伸沾满空间并平分，当left，right为0时,margin-left&right设置auto会无限延伸占满空间并平分

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
       800px;
      height: 800px;
      background-color: #ccc;
      position: relative;
      margin: 0 auto;
    }

    .inner {
       300px;
      height: 300px;
      background-color: red;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="inner">
    </div>
  </div>
</body>

</html>
    View Code

     

    3. flex怎么用？常用的属性有哪些？详情参考

    flex可用作弹性布局。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

    常用的属性：

    • flex-direction--->决定主轴的方向；
    • flex-wrap--->决定如何换行；
    • flex-flow--->flex-direction属性和flex-wrap属性的简写形式；
    • justify-content--->定义了项目在主轴上的对齐方式；
    • align-items--->定义项目在交叉轴上如何对齐；
    • align-content--->定义了多根轴线的对齐方式；

     

    4. BFC是什么？详情参考

    BFC 即 Block Formatting Context (块格式化上下文)， 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

    简单来说就是一个封闭的黑盒子，里面元素的布局不会影响外部。

    下列方式会创建块格式化上下文：

    • 根元素(<html>)
    • 浮动元素（元素的 float 不是 none）
    • 绝对定位元素（元素的 position 为 absolute 或 fixed）
    • 行内块元素（元素的 display 为 inline-block）
    • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
    • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
    • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
    • overflow 值不为 visible 的块元素
    • display 值为 flow-root 的元素
    • contain 值为 layout、content或 paint 的元素
    • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
    • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
    • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
    • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

    5. 说一说 CSS 选择器优先级

    选择器按优先级先后排列：!important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符（*）

    1. important声明 1,0,0,0
    2. ID选择器 0,1,0,0
    3. 类选择器 0,0,1,0
    4. 伪类选择器 0,0,1,0
    5. 属性选择器 0,0,1,0
    6. 标签选择器 0,0,0,1
    7. 伪元素选择器 0,0,0,1
    8. 通配符选择器 0,0,0,0

    6. 你会几种清除浮动的写法？

    1） 额外标签法

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
    padding: 0;
    margin: 0;
}
.father {
    border: 1px solid red;
     500px;
}
.big {
     100px;
    height: 100px;
    background-color: purple;
    float: left;
}
.small {
     80px;
    height: 80px;
    background-color: blue;
    float: left;
}
.clear {
    clear: both;
    /*如果清除了浮动, 父亲去自动检测孩子的高度 以最高的为准*/
}
.footer {
     400px;
    height: 150px;
    background-color: pink;
}
</style>
</head>
<body>
<div class="father">
  <div class="big"></div>
  <div class="small"></div>
  <div class="clear"></div>  <!--最后一个浮动标签的后面,新添加一个标签 清除浮动-->
</div>
<div class="footer"></div>
</body>
</html>
    View Code

    2）父级添加 overflow: hidden 方法

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
  padding: 0;
  margin: 0;
}
.father {
  border: 1px solid red;
   500px;
  overflow: hidden;
  /*别加错位置了, 给父亲加*/
  /*不是所有浮动都需要清除 谁影响布局就清除谁*/
}
.big {
   100px;
  height: 100px;
  background-color: purple;
  float: left;
}
.small {
   80px;
  height: 80px;
  background-color: blue;
  float: left;
}
.footer {
   400px;
  height: 150px;
  background-color: pink;
}
</style>
</head>
<body>
<div class="father">
  <div class="big"></div>
  <div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
    View Code

    3）after伪元素清除浮动

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after {
  /*正常浏览器 清除浮动*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
  /*zoom 1 就是ie6 清除浮动方式  * ie7以下的版本才能识别 其他浏览器都不执行(略过)*/
}
.father {
  border: 1px solid red;
   300px;
}

.big {
   100px;
  height: 100px;
  background-color: purple;
  float: left;
}
.small {
   80px;
  height: 80px;
  background-color: blue;
  float: left;
}
.footer {
   400px;
  height: 100px;
  background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
  <div class="big"></div>
  <div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
    View Code

    4）before和after双伪元素清除浮动

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.father {
  border: 1px solid red;
   300px;

}
.big {
   100px;
  height: 100px;
  background-color: purple;
  float: left;
}
.small {
   80px;
  height: 80px;
  background-color: blue;
  float: left;
}
.footer {
   400px;
  height: 100px;
  background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
  <div class="big"></div>
  <div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
    View Code

    7. 纯CSS画三角形/梯形/圆

    利用CSS border 属性

    • 三角形
    div {
   0;
  height: 0;
  border-left: 50px solid transparent;/* transparent是将border设置透明的意思 */
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}
    • 梯形
    div {
   100px;
  height: 0;
  border-left: 50px solid transparent;/* transparent是将border设置透明的意思 */
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}
    • 圆
    div {
   0;
  height: 0;
  border: 100px solid red;
  border-radius: 100px;
}

    8. 边距塌陷

     边距折叠发生在同一BFC的块级元素之间，上下边距是边距较大值而不是边距之和。

    会发生边距折叠的三种情况：

    • 相邻元素之间

    毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>        
    html *{            
        padding: 0;            
        margin: 0;        
    }        
    div {
       200px;
      height: 200px;
      background-color: red;
      margin: 200px;
    }  
</style>
  <div class="left"></div>
  <div class="right"></div>
</body>
</html>
    View Code
    • 父元素与其第一个或最后一个子元素之间

    如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>        
    html *{            
        padding: 0;            
        margin: 0;        
    }        
    .father {
       100%;
      height: 400px;
      background-color: red;
    }
    .son {
      height: 50%;
       100%;
      background-color: green;
      margin-top: 100px; /* 这一步导致父级div和子级div一同移动 */
    } 
</style>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>
    View Code
    • 空的块级元素

    如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    html * {
      padding: 0;
      margin: 0;
    }

    .first {
       100%;
      height: 100px;
      background-color: red;
      margin-bottom: 0;
    }

    .third {
       100%;
      height: 100px;
      background-color: red;
      margin-top: 0;
    }

    .second {
      margin-top: 100px;
      margin-bottom: 200px;
      /* 理论上这块儿的白色区域高应该为100px+200px=300px, 实际上只有200px，.second的height为0，上下边距融合，选取margin-top和margin-bottom中的最大值 */
    }
  </style>
  <div class="first">下边距100px</div>
  <div class="second"></div>
  <div class="third">上边距100px</div>
</body>

</html>
    View Code

    9. 文字截断

    • 单行文本截断 text-overflow
    div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

    10. 响应式布局

    1. 允许网页宽度自适应

    <meta name="viewport" content="width=device-width,initial-scale=1" />
// viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度，原始缩放比例为1.0，网页初始大小占屏幕面积的100%

    2. 不使用绝对宽度

    不指定像素宽度，指定百分比宽度。或者auto

    3. 字体不使用绝对大小px，使用相对大小em

    4. 流式布局。让各个区块的位置都是浮动的，不是固定不变的。

    浮动的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的出现。

    5. 选择加载CSS

    自动探测屏幕宽度，然后加载相应的CSS文件

    <link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device- 400px)"
　　　　href="tinyScreen.css" />

@import url("tinyScreen.css") screen and (max-device- 400px);

    6. CSS的@media规则

    同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

    @media screen and (max-device- 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;
　　　　}
}

    上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（auto），sidebar块不显示（display:none）。

    7. 图片自适应

    img { max- 100%;}

    11. display: none 与 visibility: hidden 区别

    display: none 可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说该元素不但被隐藏了，而且原本占用的空间也会从页面布局中消失。

    visibility: hidden 可以隐藏某个元素，单隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说该元素虽然被隐藏了，但仍然会影响布局。

    12. 隐藏页面中某个元素的方法

    • display:none;
    • visibility:hidden;
    • opacity: 0;
    • position移动到外部
    • z-index涂层遮盖

    13.  display:table  和 本身的table有什么区别？

     display:table; 的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

    为什么不用table系元素，取而代之用div+css？

    1. 用DIV+CSS编写出来的文件k数比用table写出来的要小；
    2. table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示；
    3. 非表格内容用table来装，不符合标签语义化要求，不利于SEO
    4. table的嵌套性太多，用DIV代码会比较简洁

    14. 实现三栏布局

    • 方法一：左右浮动布局

    这种布局方式，必须先写浮动部分，最后再写中间部分，否则右浮动块会掉到下一行。

      • 浮动布局优点：就是比较简单，兼容性也比较好。
      • 浮动布局缺点：具是有局限性的，浮动元素是脱离文档流，会带来很多问题，比如父容器高度塌陷等。
    <!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>
    .left {
      float: left;
       250px;
      height: 200px;
      background-color: red;
    }

    .center {
      height: 200px;
      background-color: green;
    }

    .right {
      float: right;
       250px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></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>Document</title>
  <style>
    .box {
      position: relative;
    }

    .left {
       250px;
      height: 200px;
      background-color: red;
      position: absolute;
      left: 0;

    }

    .center {
      height: 200px;
      background-color: green;
      position: absolute;
      left: 250px;
      right: 250px;
      /* 离左侧 右侧的距离都需设置; */
    }

    .right {
       250px;
      height: 200px;
      background-color: blue;
      position: absolute;
      right: 0;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>

</html>
    •  方法三：flex布局

    需要注意要将中间块放在前面，通过order来控制位置，实际高度会根据内容自适应，三栏高度统一。对父元素用display: flex之后子元素的宽度会失效，也就是无法设置子元素的宽度，可以通过改变flex值来改变宽度。

      • Flex布局的优点：在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。
      • Flex布局的缺点: IE10才开始支持
    <!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>
    .box {
      display: flex;
    }

    .left {
      flex: 1;
      order: 1;
      /*  250px; */   /* 宽度会失效 */
      background-color: red;
    }

    .center {
      flex: 1;
      order: 2;
      height: 200px;
      background-color: green;
    }

    .right {
      flex: 1;
      order: 3;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>

</html>
    • 方法四：Grid布局
      • Grid布局优点:创建网格布局最强大和最简单的工具。实际高度会根据内容自适应，三栏高度统一。
      • Grid布局缺点：唯一的缺点就是兼容性不太好。
    <!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>
    .box {
      display: grid;
      grid-template-columns: 250px auto 250px;
      grid-template-rows: 150px;
       100%;
    }

    .left {
      background-color: red;
    }

    .center {
      background-color: green;
    }

    .right {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

</html>
    •  方法五：表格布局
      • 表格布局优点：兼容性很好，在Flex布局不兼容的时候（一般情况下很少不兼容），可以尝试表格布局。当内容溢出时会自动撑开父元素。
      • 表格布局缺点:
        • 无法设置栏边距
        • 对seo不友好
        • 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。
    <!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>
    .box {
      display: table;
      height: 200px;
       100%;
      /* 需要设置宽高 */
    }

    .left {
      display: table-cell;
       250px;
      background-color: red;
    }

    .center {
      display: table-cell;
      background-color: green;
    }

    .right {
      display: table-cell;
       250px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

</html>

    15. CSS3有哪些新特性？

    1.CSS3边框：

    • border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
    • box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
    • border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;

    　　2.CSS3背景：

    • background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
    • background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

    　　3.CSS3文字效果：

    • text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
    • word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}

    　　4.CSS3 2D转换：

    　　transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

    • translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
    • rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
    • scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
    • skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。
    • matrix() :

      matrix() 方法把所有 2D 转换方法组合在一起。

      matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

    　　5.CSS3 3D转换：

    • rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);
    • rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);

    　　6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。

    　　7.CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

    　　8.CSS3多列：

    • column-count：属性规定元素应该被分隔的列数。
    • column-gap：属性规定列之间的间隔。
    • column-rule ：属性设置列之间的宽度、样式和颜色规则。

    　　9.CSS3用户界面：

    • resize：属性规定是否可由用户调整元素尺寸。
    • box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
    • outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
  • 相关阅读:
    Memcached学习(一)
    了解下SoftReference
    Java Thread UncaughtExceptionHandler
    csdn 不登录浏览全文　chrome 浏览器
    postgresql 主从　patroni
    熔断，限流，降级
    CentOS7.4 源码安装MySQL8.0
    CentOS BIND9安装及配置
    Linux安全之SYN攻击原理及其应对措施
    fping常用参数介绍
  • 原文地址：https://www.cnblogs.com/muzidaitou/p/12541822.html
Copyright © 2011-2022 走看看