浮动

为何需要浮动？

　　浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

浮动问题？

为何要清除浮动？

　　很多情况下父盒子不方便给高度

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .father {
  8.         border: 1px solid red;
  9.         width: 300px;
  10.     }
  11.     .big {
  12.         width: 100px;
  13.         height: 100px;
  14.         background-color: purple;
  15.         float: left;
  16.     }
  17.     .small {
  18.         width: 80px;
  19.         height: 80px;
  20.         background-color: blue;
  21.         float: left;
  22.     }
  23.     .footer {
  24.         width: 400px;
  25.         height: 100px;
  26.         background-color: pink;
  27.     }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="father">
  32.         <div class="big"></div>
  33.         <div class="small"></div>
  34.     </div>
  35.     <div class="footer"></div>
  36. </body>
  37. </html>

清除浮动

　　清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .father {
  8.         border: 1px solid red;
  9.         width: 300px;
  10.  
  11.     }
  12.     .big {
  13.         width: 100px;
  14.         height: 200px;
  15.         background-color: purple;
  16.         float: left;
  17.     }
  18.     .small {
  19.         width: 80px;
  20.         height: 80px;
  21.         background-color: blue;
  22.         float: left;
  23.     }
  24.     .footer {
  25.         width: 400px;
  26.         height: 100px;
  27.         background-color: pink;
  28.     }
  29.     .clear {
  30.         clear: both;
  31.         /*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
  32.     }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="father">
  37.         <div class="big"></div>
  38.         <div class="small"></div>
  39.         <div class="clear"></div>  <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
  40.     </div>
  41.     <div class="footer"></div>
  42. </body>
  43. </html>

　　额外标签法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .father {
  8.         border: 1px solid red;
  9.         width: 300px;
  10.  
  11.     }
  12.     .big {
  13.         width: 100px;
  14.         height: 200px;
  15.         background-color: purple;
  16.         float: left;
  17.     }
  18.     .small {
  19.         width: 80px;
  20.         height: 80px;
  21.         background-color: blue;
  22.         float: left;
  23.     }
  24.     .footer {
  25.         width: 400px;
  26.         height: 100px;
  27.         background-color: pink;
  28.     }
  29.     .clear {
  30.         clear: both;
  31.         /*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
  32.     }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="father">
  37.         <div class="big"></div>
  38.         <div class="small"></div>
  39.         <div class="clear"></div>  <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
  40.     </div>
  41.     <div class="footer"></div>
  42. </body>
  43. </html>

　　overflow 清除浮动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .big {
  8.         width: 100px;
  9.         height: 100px;
  10.         background-color: purple;
  11.         float: left;
  12.     }
  13.     .small {
  14.         width: 80px;
  15.         height: 180px;
  16.         background-color: blue;
  17.         float: left;
  18.     }
  19.     .footer {
  20.         width: 400px;
  21.         height: 100px;
  22.         background-color: pink;
  23.     }
  24.     .father {
  25.         border: 1px solid red;
  26.         width: 300px;
  27.         overflow: hidden;   /*别加错位置了，给 父亲加*/
  28.         /*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/
  29.     }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="father">
  34.         <div class="big"></div>
  35.         <div class="small"></div>
  36.     </div>
  37.     <div class="footer"></div>
  38. </body>
  39. </html>

 　　使用after伪元素清除浮动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .father {
  8.         border: 1px solid red;
  9.         width: 300px;
  10.  
  11.     }
  12.     .big {
  13.         width: 100px;
  14.         height: 100px;
  15.         background-color: purple;
  16.         float: left;
  17.     }
  18.     .small {
  19.         width: 80px;
  20.         height: 80px;
  21.         background-color: blue;
  22.         float: left;
  23.     }
  24.     .footer {
  25.         width: 400px;
  26.         height: 100px;
  27.         background-color: pink;
  28.     }
  29.     .clearfix:after {  /*正常浏览器 清除浮动*/
  30.         content:"";
  31.         display: block;
  32.         height: 0;
  33.         clear: both;
  34.         visibility: hidden;
  35.     }
  36.     .clearfix {
  37.         *zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
  38.     }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="father clearfix">
  43.         <div class="big"></div>
  44.         <div class="small"></div>
  45.     </div>
  46.     <div class="footer"></div>
  47. </body>
  48. </html>

　　使用before和after双伪元素清除浮动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .clearfix:before, .clearfix:after {
  8.         content: "";
  9.         display: table;
  10.     }
  11.     .clearfix:after {
  12.         clear: both;
  13.     }
  14.  
  15.     .clearfix {
  16.         *zoom: 1;
  17.     }
  18.     .father {
  19.         border: 1px solid red;
  20.         width: 300px;
  21.  
  22.     }
  23.     .big {
  24.         width: 100px;
  25.         height: 100px;
  26.         background-color: purple;
  27.         float: left;
  28.     }
  29.     .small {
  30.         width: 80px;
  31.         height: 80px;
  32.         background-color: blue;
  33.         float: left;
  34.     }
  35.     .footer {
  36.         width: 400px;
  37.         height: 100px;
  38.         background-color: pink;
  39.     }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="father clearfix">
  44.         <div class="big"></div>
  45.         <div class="small"></div>
  46.     </div>
  47.     <div class="footer"></div>
  48. </body>
  49. </html>

<ul><li>布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         .service-bd {
  8.             margin-top: 40px;
  9.         }
  10.         .service-bd li {
  11.                 width: 200px;
  12.                 height: 200px;
  13.                 background-color: #ffd800;
  14.                 float: left;
  15.                 border: 1px solid #e7e8e9;
  16.             }
  17.        .yingxiao {
  18.             margin: 0 45px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="service-bd">
  24.         <ul>
  25.             <li></li>
  26.             <li class="yingxiao"></li>
  27.             <li></li>
  28.         </ul>
  29.     </div>
  30. </body>
  31. </html>

　　取消li 的小点

  1. li {
  2.     list-style: none; /*  取消li 的小点 */
  3. }

相对定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         div {
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: pink;
  11.         }
  12.         .top {
  13.             position: relative;/*相对定位*/
  14.             top: 100px;
  15.             left: 100px;
  16.         }
  17.         .bottom {
  18.             background-color: red;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="top"></div>
  24.     <div class="bottom"></div>
  25. </body>
  26. </html>

　　相对定位和浮动的区别：相对定位后原来的位置还继续保留，浮动后原来的位置不继续保留。

　　定位使用：top、bottom、left、right  切不可混用margin-top　

绝对定位

position: absolute; 

1.绝不占位置，跟浮动一样。

2.绝对定位是将元素依据最近的已经定位的父元素（祖先）进行定位。

父亲没定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .father {
  8.         width: 500px;
  9.         height: 500px;
  10.         background-color: pink;
  11.         margin: 100px;
  12.     }
  13.     .son {
  14.         width: 200px;
  15.         height: 200px;
  16.         background-color: purple;
  17.         position: absolute;
  18.         top: 50px;
  19.         left: 50px;
  20.         /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
  21.     }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="father">
  26.         <div class="son"></div>
  27.     </div>
  28. </body>
  29. </html>

父亲有定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     .yeye {
  8.         width: 800px;
  9.         height: 800px;
  10.         background-color: skyblue;
  11.         position: absolute;
  12.     }
  13.     .father {
  14.         width: 500px;
  15.         height: 500px;
  16.         background-color: pink;
  17.         margin: 100px;
  18.         /*position: absolute;*/
  19.     }
  20.     .son {
  21.         width: 200px;
  22.         height: 200px;
  23.         background-color: purple;
  24.         position: absolute;
  25.         top: 50px;
  26.         left: 50px;
  27.         /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
  28.     }
  29.     </style>
  30. </head>
  31. <body>
  32. <div class="yeye">
  33.     <div class="father">
  34.         <div class="son"></div>
  35.     </div>
  36. </div>
  37.  
  38. </body>
  39. </html>

子绝对定位父相对定位

　　给儿子绝对定位：不占有原来的位置，才能压住别人

　　给父亲相对定位：占有原来的位置

　　子绝父绝带来的问题：由于绝对定位不占用位置，当给父亲绝对定位时，下面的div元素会占用父亲的位置。

　　子绝父相是最合适的搭配

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     div {
  8.         width: 310px;
  9.         height: 190px;
  10.         border: 1px solid #ccc;
  11.         margin: 100px auto;
  12.         padding: 10px;
  13.         position: relative;
  14.     }
  15.     .top {
  16.         position: absolute;
  17.         top: 0;
  18.         left: 0;
  19.     }
  20.  
  21.     .bottom {
  22.         position: absolute;
  23.         right: 0;
  24.         bottom: 0;
  25.     }
  26.  
  27.     </style>
  28. </head>
  29. <body>
  30.     <div>
  31.         <img src="data:images/top_tu.gif" alt="" class="top">
  32.         <img src="data:images/br.gif" alt="" class="bottom">
  33.         <img src="data:images/adv.jpg" height="190" width="310" alt="">
  34.     </div>
  35. </body>
  36. </html>

定位和浮动

加了定位 浮动的的盒子 margin 0 auto 失效了

  1. /*margin: 100px auto;*/
  2. /*float: left;*/
  3. position: absolute;
  4. /*加了定位 浮动的的盒子  margin 0 auto 失效了*/

加了定位的盒子居中对齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     div {
  8.         width: 200px;
  9.         height: 200px;
  10.         background-color: pink;
  11.         /*margin: 100px auto;*/
  12.         /*float: left;*/
  13.         position: absolute;
  14.         /*加了定位 浮动的的盒子  margin 0 auto 失效了*/
  15.         left: 50%;
  16.         margin-left: -100px;
  17.         top: 50%;
  18.         margin-top: -100px;
  19.     }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div></div>
  24. </body>
  25. </html>

实战练习

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         li {
  14.             list-style: none;
  15.             /*  取消li 的小点 */
  16.         }
  17.  
  18.         .father {
  19.             width: 1259px;
  20.             height: 472px;
  21.             margin: 100px auto;
  22.             background-color: red;
  23.             position: relative;
  24.         }
  25.  
  26.         .son {
  27.             width: 960px;
  28.             height: 80px;
  29.             background-color: #000;
  30.             position: absolute;
  31.             bottom: 0;
  32.             left: 50%;
  33.             margin-left: -480px;
  34.         }
  35.  
  36.         .son li {
  37.             float: left;
  38.             width: 160px;
  39.             height: 80px;
  40.         }
  41.  
  42.         .son li a {
  43.             width: 160px;
  44.             height: 80px;
  45.             display: block;
  46.             text-align: center;
  47.             line-height: 80px;
  48.             color: #fff;
  49.             text-decoration: none;
  50.         }
  51.  
  52.         .son li a:hover {
  53.             background-color: #fff;
  54.             color: #000;
  55.         }
  56.     </style>
  57.     <body>
  58.         <div class="father">
  59.             <div class="son">
  60.                 <ul>
  61.                     <li><a href="#">快递查询</a></li>
  62.                     <li><a href="#">快递查询</a></li>
  63.                     <li><a href="#">快递查询</a></li>
  64.                     <li><a href="#">快递查询</a></li>
  65.                     <li><a href="#">快递查询</a></li>
  66.                     <li><a href="#">快递查询</a></li>
  67.                 </ul>
  68.             </div>
  69.         </div>
  70.     </body>
  71. </html>

 CSS的margin: 7px auto 含义是什么？

　　顺序为：上、右、下、左；（顺时针）

淘宝轮播图

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         li {
  12.             list-style: none;
  13.         }
  14.         .tb {
  15.             width: 520px;
  16.             height: 280px;
  17.             background-color: pink;
  18.             margin: 100px auto;/* 顺序为：上、右、下、左；*/
  19.             position: relative;/* 父相对定位*/
  20.         }
  21.         .tb a {
  22.             width: 24px;
  23.             height: 36px;
  24.             display: block;
  25.             position: absolute;/* 子绝对定位*/
  26.             top: 50%;
  27.             margin-top: -18px;
  28.         }
  29.         .left {
  30.             left: 0;
  31.             background: url(images/left.png) no-repeat;
  32.         }
  33.         .right {
  34.             right: 0;
  35.             background: url(images/right.png) no-repeat;
  36.         }
  37.         .tb ul {
  38.             width: 70px;
  39.             height: 13px;
  40.             background: rgba(255, 255, 255, .3);
  41.             position: absolute; /* 子绝对定位*/
  42.             bottom: 18px;
  43.             left: 50%; /*水平走父容器的一半*/
  44.             margin-left: -35px; /*左走自己的一半*/
  45.             border-radius: 8px;
  46.         }
  47.         .tb ul li {
  48.             width: 8px;
  49.             height: 8px;
  50.             background-color: #fff;
  51.             float: left;
  52.             margin: 3px;
  53.             border-radius: 50%;
  54.         }
  55.         .tb .current {
  56.             background-color: #f40;
  57.         }
  58.         </style>
  59.     </head>
  60.     <body>
  61.         <div class="tb">
  62.             <img src="data:images/tb.jpg" >
  63.             <a href="#" class="left"></a>
  64.             <a href="#" class="right"></a>
  65.             <ul>
  66.                 <li class="current"></li>
  67.                 <li></li>
  68.                 <li></li>
  69.                 <li></li>
  70.                 <li></li>
  71.             </ul>
  72.         </div>
  73.     </body>
  74. </html>

固定定位

  1. .ad {
  2.         width: 200px;
  3.         height: 200px;
  4.         background-color: pink;
  5.         position: fixed;  /*固定定位*/
  6.         left: 0;
  7.         top: 100px;
  8.     }

z-index

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     div {
  8.         width: 200px;
  9.         height: 200px;
  10.         background-color: red;
  11.         position: absolute;
  12.         /*z-index: 0;  只有定位的盒子才有*/
  13.     }
  14.     .red {
  15.         z-index: 1;
  16.     }
  17.     .blue {
  18.         background-color: blue;
  19.         left: 50px;
  20.         top: 50px;
  21.         z-index: 2;
  22.     }
  23.     .green {
  24.         background-color: green;
  25.         left: 100px;
  26.         top: 100px;
  27.         z-index: 999;
  28.     }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="red"></div>
  33.     <div class="blue"></div>
  34.     <div class="green"></div>
  35. </body>
  36. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     div {
  8.         width: 250px;
  9.         height: 400px;
  10.         border: 1px solid #ccc;
  11.         float: left;
  12.         margin-left: -1px;
  13.         position: relative;
  14.         /*z-index: 0;*/
  15.     }
  16.     div:hover {
  17.         border: 1px solid #f40;
  18.         /*position: relative; 相对定位比标准流高一级 浮在上面的*/
  19.         z-index: 1;
  20.     }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div></div>
  25.     <div></div>
  26.     <div></div>
  27.     <div></div>
  28.     <div></div>
  29. </body>
  30. </html>

小结

CSS魔法（三）浮动、相对定位、绝对定位的更多相关文章

  1. css 浮动 相对定位 绝对定位区别

    今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...

  2. CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

    1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...

  3. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  4. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  5. CSS：CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  6. CSS基础知识---浮动，定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  7. css最终章之浮动、定位、溢出属性处理、z-index属性、透明度

    上期内容回顾 CSS简介 # 主要就是给HTML标签添加样式 # 固定语法结构 选择器 {属性名1:属性值;属性名2:属性值} 三种引用方式 1.link标签引入外部css文件(最正规) 2.HTML ...

  8. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  9. css定位和浮动

    1.css中一切元素皆为框.div.p.h1等为块框:span.strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念).通过display可以改变框的类型,行内框通过 ...

  10. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

随机推荐

  1. java List<String>的初始化

    今天在处理生成excel的时候用到了java的list,但是需要直接赋值固定的几个变量,如果先初始化然后add的方法: List<String> name = new ArrayList( ...

  2. Lodop打印控件中PRINT_INITA()和PRINT_PAGESIZE()宽高

    Lodop中有两个初始化语句,PRINT_INIT()和PRINT_INITA(),PRINT_INITA()多了四个参数,前两个是整体偏移值,第三四参数是宽高,这个宽高是指打印设计可视化编辑区域的宽 ...

  3. C# 8小特性

    对于C# 8,有吸引了大多数注意力的重大特性,如默认接口方法和可空引用,也有许多小特性被考虑在内.本文将介绍几例可能加入C#未来版本的小特性. 新的赋值运算符:&&=和||= 从第一个 ...

  4. 掌上电脑设备可以使用Ubuntu MATE 18.10 Linux映像了

    就在几天前,Ubuntu 18.10发布了.操作系统被称为“Cosmic Cuttlefish”,有多种版本可供选择,除了常见的GNOME -- Xfce (Xbuntu), KDE (Kubuntu ...

  5. THUWC2018酱油记

    Day 0 今年的THUWC在我们学校,听说有pretest,感觉有不好的预感.... Day 1 早上7:00在校门口集合,车7:30以后才到,感觉就像在围观 期末考试.来到雅礼洋湖,在这里看到了初 ...

  6. LOJ #2538. 「PKUWC 2018」Slay the Spire (期望dp)

    Update on 1.5 学了 zhou888 的写法,真是又短又快. 并且空间是 \(O(n)\) 的,速度十分优秀. 题意 LOJ #2538. 「PKUWC 2018」Slay the Spi ...

  7. 自学Linux Shell7.1-linux用户账户和组

    点击返回 自学Linux命令行与Shell脚本之路 7.1-linux用户账户和组 linux安全系统的核心是用户账户.每个能进入linux系统的用户都会被分配唯一的用户账户,用户对系统中各对象的访问 ...

  8. 用ip代替机器名访问sharepoint 站点

    1. aam 里加入一个ip的internet 2. iis里不用加上ip,但不要有host name   出现的问题: 1. 当打开站点里会出现这个错误 file not found 2. 当加授予 ...

  9. bzoj1002/luogu2144 轮状病毒 (dp)

    给周围的点编号1到n 我们设f[i]为(1到i和中间点)连成一个联通块的情况数,那么有$f[i]=\sum{f[i-j]*j}$,就是从i-j+1到i里选一个连到中心,然后再把i-j+1到i连成链 但 ...

  10. 使用kubeadm部署kubernetes1.9.1+coredns+kube-router(ipvs)高可用集群

    由于之前已经写了两篇部署kubernetes的文章,整个过程基本一致,所以这篇只着重说一下coredns和kube-router的部署. kube version: 1.9.1 docker vers ...