CSS布局解决方案（终结版）

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。

居中布局

水平居中

1）使用inline-block+text-align
（1）原理、用法

  • 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
  • 用法：对子框设置display:inline-block，对父框设置text-align:center。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.child{display:inline-block;
}
.parent{text-align:center;
}

（3）优缺点

  • 优点:兼容性好，甚至可以兼容ie6、ie7
  • 缺点:child里的文字也会水平居中，可以在.child添加text-align:left;还原

2）使用table+margin
（1）原理、用法

  • 原理：先将子框设置为块级表格来显示（类似 <table>），再设置子框居中以达到水平居中。
  • 用法：对子框设置display:table，再设置margin:0 auto。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.child {display:table;margin:0 auto;
}

（3）优缺点：

  • 优点：只设置了child，ie8以上都支持
  • 缺点：不支持ie6、ie7,将div换成table

3）使用absolute+transform
（1）原理、用法

  • 原理：将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
  • 用法：对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:relative;
}
.child {position:absolute;left:50%;transform:translateX(-50%);
}

（3）优缺点

  • 优点:居中元素不会对其他的产生影响
  • 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

4）使用flex+margin
（1）原理、用法

  • 原理：通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中以达到居中。
  • 用法：先将父框设置为display:flex，再设置子框margin:0 auto。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:flex;
}
.child {margin:0 auto;
}

（3）优缺点

  • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

5）使用flex+justify-content
（1）原理、用法

  • 原理：通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
  • 用法：先将父框设置为display:flex，再设置justify-content:center。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:flex;justify-content:center;
}

（3）优缺点

  • 优点:设置parent即可
  • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

垂直居中

1）使用table-cell+vertical-align
（1）原理、用法

  • 原理：通过将父框转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。
  • 用法：先将父框设置为display:table-cell，再设置vertical-align:middle。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:table-cell;vertical-align:middle;
}

（3）优缺点

  • 优点:兼容性较好，ie8以上均支持

2）使用absolute+transform
（1）原理、用法

  • 原理：类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
  • 用法：先将父框设置为position:relative，再设置子框position:absolute，top:50%，transform:translateY(-50%)。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:relative;
}
.child {position:absolute;top:50%;transform:translateY(-50%);
}

（3）优缺点

  • 优点:居中元素不会对其他的产生影响
  • 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

3）使用flex+align-items
（1）原理、用法

  • 原理：通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。
  • 用法：先将父框设置为position:flex，再设置align-items:center。

（1）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:flex;align-items:center;
}

（3）优缺点

  • 优点:只设置parent
  • 缺点:兼容性存在一定问题

水平垂直居中

1）使用absolute+transform
（1）原理、用法

  • 原理：将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见：水平居中的3）和垂直居中的2）。
  • 见水平居中的3）和垂直居中的2）。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:relative;
}
.child {position:absolute;left:50%;top:50%;transform:tranplate(-50%,-50%);
}

（3）优缺点

  • 优点:child元素不会对其他元素产生影响
  • 缺点:兼容性存在一定问题

2）使用inline-block+text-align+table-cell+vertical-align
（1）原理、用法

  • 原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，将二者结合起来。详见：水平居中的1）和垂直居中的1）。
  • 见水平居中的1）和垂直居中的1）。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {text-align:center;display:table-cell;vertical-align:middle;
}
.child {display:inline-block;
}

（3）优缺点

  • 优点:兼容性较好

3）使用flex+justify-content+align-items
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中。详见：水平居中的4）和垂直居中的3）。
  • 见水平居中的4）和垂直居中的3）。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:flex;justify-content:center;align-items:center;
}

（3）优缺点

  • 优点:只设置了parent
  • 缺点:兼容性存在一定问题

多列布局

定宽+自适应

1）使用float+overflow
（1）原理、用法

  • 原理：通过将左边框脱离文本流，设置右边规定当内容溢出元素框时发生的事情以达到多列布局。
  • 用法：先将左框设置为float:left、width、margin-left，再设置实际的右框overflow:hidden。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left {float:left;width:100px;margin-right:20px;
}
.right {overflow:hidden;
}

（3）优缺点

  • 优点:简单
  • 缺点:不支持ie6

2）使用float+margin
（1）原理、用法

  • 原理：通过将左框脱离文本流，加上右框向右移动一定的距离，以达到视觉上的多列布局。
  • 用法：先将左框设置为float:left、margin-left，再设置右框margin-left。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left {float:left;width:100px;
}
.right {margin-left:120px;
}

（3）优缺点

  • 优点:简单，易理解
  • 缺点:兼容性存在一定问题，ie6下有3px的bug。right下的p清除浮动将产生bug

3）使用float+margin（改良版）
（1）原理、用法

  • 原理：在1）的基础之上，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC以去除bug。
  • 用法：先将左框设置为float:left、margin-left、position:relative，再设置右父框float:right、width:100%、margin-left，最后设置实际的右框margin-left。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="rigth-fix"><div class="right"><p>right</p><p>right</p></div></div>
</div>
.left {float:left;width:100px;position:relative;
}
.right-fix {float:right;width:100%;margin-left:-100px;
}
.right {margin-left:120px;
}

（3）优缺点

  • 优点:简单，易理解

4）使用table
（1）原理、用法

  • 原理：通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局。
  • 用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框display:table-cell，最后设置左框width、padding-right。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:table;width:100%;table-layout:fixed;
}
.left {width:100px;padding-right:20px;
}
.right,.left {display:table-cell;    
}

5）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局。
  • 用法：先将父框设置为display:flex，再设置左框flex:1，最后设置左框width、margin-right。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:flex;
}
.left {width:100px;margin-right:20px;
}
.right {flex:1;
}

（3）优缺点

  • 优点:flex很强大
  • 缺点:兼容性存在一定问题，性能存在一定问题

两列定宽+一列自适应

（1）原理、用法

  • 原理：这种情况与两列定宽查不多。
  • 用法：先将左、中框设置为float:left、width、margin-right，再设置右框overflow:hidden。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left,.center {float:left;width:100px;margin-right:20px;
}
.right {overflow:hidden;
}

不定宽+自适应

1）使用float+overflow
（1）原理、用法

  • 原理：这种情况与两列定宽查不多。
  • 用法：先将左框设置为float:left、margin-right，再设置右框overflow: hidden，最后设置左框中的内容width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left{float: left;margin-right: 20px;}
.right{overflow: hidden;
}
.left p{width: 200px;
}

（3）优缺点

  • 优点:简单
  • 缺点:ie6下兼容性存在一定问题

2）使用table
（1）原理、用法

  • 原理：通过将父框改变为表格，将左右框转换为类似于同一行的td以达到多列布局，设置父框宽度100%，给左框子元素一个固定宽度从而达到自适应。
  • 用法：先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right以及左框中的内容width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent{display: table; width: 100%;}
.left,.right{display: table-cell;
}
.left{width: 0.1%;padding-right: 20px;
}
.left p{width:200px;
}

（3）优缺点

  • 缺点:ie6 ie7不支持

3）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局，加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。
  • 用法：先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:flex;
}
.left {margin-right:20px;
}
.right {flex:1;
}
.left p{width: 200px;
}

（3）优缺点

  • 优点:flex很强大
  • 缺点:兼容性存在一定问题，性能存在一定问题

两列不定宽+一列自适应

（1）原理、用法

  • 原理：这个情况与一列不定宽+一列自适应查不多。
  • 用法：先将左、中框设置为float:left、margin-right，再设置右框overflow:hidden，最后给左中框中的内容设置width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left,.center{float: left;margin-right: 20px;
}
.right{overflow: hidden;
}
.left p,.center p{width: 100px;
}

等分布局

图片描述

公式转化:
l = w * n + g * (n-1) -> l = w * n + g * n - g -> l + g = （w + g） * n

图片描述

因此，我们需要解决两个问题：

  • 如何让总宽度增加g(即：L+g)
  • 如何让每个宽包含g（即：w+g）

1）使用float
（1）原理、用法

  • 原理：增大父框的实际宽度后，使用CSS3属性box-sizing进行布局的辅助。
  • 用法：先将父框设置为margin-left: -*px，再设置子框float: left、width: 25%、padding-left、box-sizing: border-box。

（2）代码实例

<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div>
</div>
.parent{margin-left: -20px;//l增加g
}
.column{float: left;width: 25%;padding-left: 20px;box-sizing: border-box;//包含padding区域 w+g
}

（3）优缺点

  • 优点：兼容性较好
  • 缺点：ie6 ie7百分比兼容存在一定问题

2）使用table
（1）原理、用法

  • 原理：通过增加一个父框的修正框，增大其宽度，并将父框转换为table，将子框转换为tabel-cell进行布局。
  • 用法：先将父框的修正框设置为margin-left: -*px，再设置父框display: table、width:100%、table-layout: fixed，设置子框display: table-cell、padding-left。

（2）代码实例

<div class="parent-fix"><div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div></div>
</div>
.parent-fix{margin-left: -20px;//l+g
}
.parent{display: table;width:100%;table-layout: fixed;
}
.column{display: table-cell;padding-left: 20px;//w+g
}

（3）优缺点

  • 优点：结构和块数无关联
  • 缺点：增加了一层

3）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到等分布局。
  • 用法：将父框设置为display: flex，再设置子框flex: 1，最后设置子框与子框的间距margin-left。

（2）代码实例

<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div>
</div>
.parent{display: flex;
}
.column{flex: 1;
}
.column+.column{margin-left:20px;
}

（3）优缺点

  • 优点：代码量少，与块数无关
  • 缺点：兼容性存在一定问题

定宽+自适应+两块高度一样高

1）使用float
（1）原理、用法

  • 原理：通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。
  • 用法：将父框设置overflow: hidden，再设置左右子框padding-bottom: 9999px、margin-bottom: -9999px，最后设置左框float: left、width、margin-right，右框overflow: hidden。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
p{background: none!important;
}
.left,.right{background: #444;
}
.parent{overflow: hidden;
}
.left,.right{padding-bottom: 9999px;margin-bottom: -9999px;
}
.left{float: left; width: 100px;margin-right: 20px;
}
.right{overflow: hidden;
}

(3)优缺点

  • 优点：兼容性好
  • 缺点：伪等高，不是真正意义上的等高

2）使用table
（1）原理、用法

  • 原理：将父框转化为tabel，将子框转化为tabel-cell布局，以达到定宽+自适应+两块高度一样高。
  • 用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框为display:table-cell，最后设置左框width、padding-right。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:table;width:100%;table-layout:fixed;
}
.left {width:100px;padding-right:20px;
}
.right,.left {display:table-cell;
}

3）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。
  • 用法：将父框设置为display: flex，再设置左框width、margin-right，最后设置右框flex:1。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:flex;
}
.left {width:100px;margin-right:20px;
}
.right {flex:1;
}

（3）优缺点

  • 优点:代码少，flex很强大
  • 缺点:兼容性存在一定问题

4)使用display
（1）原理、用法

  • 原理：通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。
  • 用法：将父框设置为display: -webkit-box、width: 100%，再设置左框width、margin-right，最后设置右框-webkit-box-flex: 1。

（2）代码实例

<div class="parent"><div class="left">left</div><div class="right">right </div>
</div>
.parent {width: 100%;display: -webkit-box;
}
.left {width:100px;margin-right: 20px;
}
.right {-webkit-box-flex: 1;
}

(3)优缺点

  • 缺点:兼容性存在较大的问题

全屏布局

全屏布局的特点

  • 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域
  • 浏览器变大时，撑满窗口

全屏布局的方法

图片描述

1）使用position
（1）原理、用法

  • 原理：将上下部分固定，中间部分使用定宽+自适应+两块高度一样高。
  • 用法：见实例。

（2）代码实例

<div class="parent"><div class="top">top</div><div class="left">left</div><div class="right"><div class="inner">right</div></div><div class="bottom">bottom</div>
</div>
html,body,.parent{margin:0;height:100%;overflow:hidden;
}
body{color:white;
}
.top{position:absolute;top:0;left:0;right:0;height:100px;background:blue;
}
.left{position:absolute;left:0;top:100px;bottom:50px;width:200px;background:red;
}
.right{position:absolute;left:200px;top:100px;bottom:50px;right:0;background:pink;overflow: auto;
}
.right .inner{min-height: 1000px;
}
.bottom{position:absolute;left:0;right:0;bottom:0;height:50px;background: black;
}

(3)优缺点

  • 优点：兼容性好，ie6下不支持

2）使用flex
（1）原理、用法

  • 原理：通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。
  • 用法：见实例。

（2）代码实例

<div class="parent"><div class="top">top</div><div class="middle"><div class="left">left</div><div class="right"><div class="inner">right</div></div></div><div class="bottom">bottom</div>
</div>
html,body,.parent{margin:0;height:100%;overflow:hidden;
}
body{color: white;
} 
.parent{display: flex;flex-direction: column;
}
.top{height:100px;background: blue;
}
.bottom{height:50px;background: black;
}
.middle{flex:1;display:flex;
}
.left{width:200px;background: red;
}
.right{flex: 1;overflow: auto;background:pink;
}
.right .inner{min-height: 1000px;
}

(3)优缺点

  • 缺点：兼容性差，ie9及ie9以下不兼容

图片描述

1）使用flex
（1）原理、用法

  • 原理：通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。
  • 用法：见实例。

（2）代码实例

<div class="parent"><div class="top">top</div><div class="middle"><div class="left">left</div><div class="right"><div class="inner">right</div></div></div><div class="bottom">bottom</div>
</div>
html,body,.parent{margin:0;height:100%;overflow:hidden;
}
body{color:white;
} 
.parent{display:flex;flex-direction:column;
}
.top{background:blue;
}
.bottom{background:black;
}
.middle{flex:1;display:flex;
}
.left{background: red;
}
.right{flex:1;overflow:auto;background: pink;
}
.right .inner{min-height:1000px;
}

全屏布局相关方案的兼容性、性能和自适应一览表

方案兼容性性能是否自适应
Position好好部分自适应
Flex较差差可自适应
Grid差较好可自适应

当然，最最最最最后，如果您喜欢这片文章，可以疯狂点赞和收藏喔！！

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

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

相关文章

基于ABP和Magicodes实现Excel导出操作

基于ABP和Magicodes实现Excel导出操作

前端使用的vue-element-admin框架&#xff0c;后端使用ABP框架&#xff0c;Excel导出使用的Magicodes.IE.Excel.Abp库。Excel导入和导出操作几乎一样&#xff0c;不再介绍。文本主要介绍Excel导出操作和过程中遇到的坑&#xff0c;主要是Excel文件导出后无法打开的问题。一.Mag…
阅读更多...
消息模式在实际开发应用中的优势

消息模式在实际开发应用中的优势

曾经.NET面试过程中经常问的一个问题是&#xff0c;如果程序集A&#xff0c;引用B &#xff0c;B 引用C&#xff0c;那么C怎么去访问A中的方法呢。 这个问题初学.net可能一时想不出该咋处理&#xff0c;这涉及到循环引用问题。但有点经验的可能就简单了&#xff0c;通过委托的方…
阅读更多...
微服务：注册中心ZooKeeper、Eureka、Consul 、Nacos对比

微服务：注册中心ZooKeeper、Eureka、Consul 、Nacos对比

前言 服务注册中心本质上是为了解耦服务提供者和服务消费者。对于任何一个微服务&#xff0c;原则上都应存在或者支持多个提供者&#xff0c;这是由微服务的分布式属性决定的。更进一步&#xff0c;为了支持弹性扩缩容特性&#xff0c;一个微服务的提供者的数量和分布往往是动…
阅读更多...
为了高性能、超大规模的模型训练，这个组合“出道”了

为了高性能、超大规模的模型训练，这个组合“出道”了

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;3分钟)近年来&#xff0c;在大量数据上训练的基于 transformer 的大规模深度学习模型在多项认知任务中取得了很好的成果&#xff0c;并且被使用到一些新产品和功能背后&#xff0c;进一步增强了人类的能力。在过去五年…
阅读更多...
SpringCloud必会知识点大全

SpringCloud必会知识点大全

为什么要学习Spring Cloud 在项目开发中随着业务越来越多&#xff0c;导致功能之间耦合性高、开发效率低、系统运行缓慢难以维护、不稳定。微服务 架构可以解决这些问题&#xff0c;而Spring Cloud是微服务架构最流行的实现. 1.微服务 微服务架构是使用一套小服务来开发单个应用…
阅读更多...
30分钟掌握 C#7

30分钟掌握 C#7

1. out 变量&#xff08;out variables&#xff09; 以前我们使用out变量必须在使用前进行声明&#xff0c;C# 7.0 给我们提供了一种更简洁的语法 “使用时进行内联声明” 。如下所示&#xff1a; 1 var input ReadLine(); 2 if (int.TryParse(input, out var result)) 3 …
阅读更多...
在 C# 中如何检查参数是否为 null

在 C# 中如何检查参数是否为 null

前言前不久&#xff0c;微软宣布从 C# 11 中移除参数空值检查功能&#xff0c;该功能允许在方法开始执行之前&#xff0c;在参数名称的末尾提供参数空值检查&#xff08;!!操作符&#xff09;。那么&#xff0c;在 C# 中如何检查参数是否为 null 呢&#xff1f;1. null这个可能…
阅读更多...
带你剖析WebGis的世界奥秘----Geojson数据加载(高级)

带你剖析WebGis的世界奥秘----Geojson数据加载(高级)

前言&#xff1a;前两周我带你们分析了WebGis中关键步骤瓦片加载点击事件&#xff08;具体的看前两篇文章&#xff09;&#xff0c;下面呢&#xff0c;我带大家来看看Geojson的加载及其点击事件 Geojson数据解析 GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可…
阅读更多...
「Docker入门指北」容器很难理解？带你从头到尾捋一遍

「Docker入门指北」容器很难理解？带你从头到尾捋一遍

文章目录 1. 初始虚拟化 &#x1f351; 虚拟化概念&#x1f351; 硬件虚拟化2. Docker容器 &#x1f351; Docker技术的诞生&#x1f351; 容器与虚拟化&#x1f351; 性能差别&#x1f351; Docker优势 编排有序高效易迁移快速部署3. 容器生态系统 &#x1f351; 核心技术 容器…
阅读更多...
微服务：事务管理

微服务：事务管理

几乎所有的信息管理系统都会涉及到事务&#xff0c;事务的目的是为了保证数据的一致性&#xff0c;这里说的一致性是数据库状态的一致性。说到数据库状态的一致性&#xff0c;相信大家都会想到 ACID &#xff1a;原子性&#xff08;Atomic&#xff09;&#xff1a;在一个事件的…
阅读更多...
Redis的那些事：一文入门Redis的基础操作

Redis的那些事：一文入门Redis的基础操作

Redis是什么Redis&#xff0c;全称是Remote Dictionary Service,翻译过来就是&#xff0c;远程字典服务。redis属于nosql非关系型数据库。Nosql常见的数据关系&#xff0c;基本上是以key-value键值对形式存在的。Key-value: 就像翻阅中文字典或者单词字典&#xff0c;通过指定的…
阅读更多...
10种提问型爆文标题句式 直接套用

10种提问型爆文标题句式 直接套用

如果你用1天的时间来写篇好文章&#xff0c;那你花掉半天时间想一个好标题都不过分&#xff01; 你是不是觉得我有点言过其实了&#xff1f;没关系&#xff0c;先来问你2个问题&#xff1a; 1、花了很长时间&#xff0c;写了一篇很牛的卖货推文&#xff0c;定稿后&#xff0c…
阅读更多...
2016 China Joy抢先看，文末有彩蛋！

2016 China Joy抢先看，文末有彩蛋！

这里只有你想不到的&#xff0c;没有你看不到的。 2016 China Joy开幕在即&#xff0c;天气成了最折磨各种媒体、展商和观众的小妖精&#xff0c;一会艳阳天&#xff0c;一会大暴雨&#xff0c;轩轩现在是这样的&#xff01; 七月底的魔都&#xff0c;热的那叫一个销魂&#x…
阅读更多...
JdbcTemplate+PageImpl实现多表分页查询

JdbcTemplate+PageImpl实现多表分页查询

一、基础实体　 MappedSuperclass public abstract class AbsIdEntity implements Serializable {private static final long serialVersionUID 7988377299341530426L;public final static int IS_DELETE_YES 1;// 标记删除public final static int IS_DELETE_NO 0;// 未删除…
阅读更多...
消息队列选型手册

消息队列选型手册

前言 消息队列中间件重要吗&#xff1f;面试必问问题之一&#xff0c;你说重不重要。我有时会问同事&#xff0c;为啥你用 RabbitMQ&#xff0c;不用 Kafka&#xff0c;或者 RocketMQ 呢&#xff1f; 他给我的回答&#xff1a;“因为公司用的就是这个&#xff0c;大家都这么用…
阅读更多...
Jenkins 持续集成国产嵌入式操作系统 RT-Thread 的CI

Jenkins 持续集成国产嵌入式操作系统 RT-Thread 的CI

我们直接在Jenkins的镜像基础上进行集成RT-Thread 的编译环境&#xff0c; 这样直接使用Shell 命令 最直接了当&#xff0c; 通过 第三方docker等插件&#xff0c; 尝试了计重方案&#xff0c; 没有找到理想中的感觉&#xff0c; 如果其他人有想法可以告知一二。 我们有现成的镜…
阅读更多...
codevs原创抄袭题 5960 信使

codevs原创抄袭题 5960 信使

题目描述 Description•战争时期&#xff0c;前线有n个哨所&#xff0c;每个哨所可能会与其他若干个哨所之间有通信联系。信使负责在哨所之间传递信息&#xff0c;当然&#xff0c;这是要花费一定时间的&#xff08;以天为单位&#xff09;。指挥部设在第一个哨所。当指挥部下达…
阅读更多...
MongoDB精华总结

MongoDB精华总结

概述 MongoDB是属于文档型的NoSQL数据库&#xff0c;也就是文档数据库。文档数据库区别于传统的其它数据库&#xff0c;它是用来管理文档。在传统的数据库中&#xff0c;信息被分割成离散的数据段&#xff0c;而在文档数据库中&#xff0c;文档是处理信息的基本单位&#xff0c…
阅读更多...
认清性能问题

认清性能问题

本文翻译自 Thinking Clearly About Performance 这是我三年前读到的一篇关于性能问题的好文&#xff0c;读完后还觉不过瘾&#xff0c;怕理解的不够遂又翻译了一遍&#xff0c;这也是当年我的第一次翻译。 这几年来每次碰到性能问题&#xff0c;我都会想起这篇文章&#xff0c…
阅读更多...
简述：分布式CAP理论和BASE理论

简述：分布式CAP理论和BASE理论

目录 一、什么是CAP&#xff1f; Consistency (一致性)&#xff1a; Availability (可用性): Partition Tolerance (分区容错性): 二、取舍策略 三、Base理论 1、基本可用 2、软状态 3、最终一致性 四、常见产品 Ereka Zookeeper 五、总结 一、什么是CAP&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023