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;一个微服务的提供者的数量和分布往往是动…
阅读更多...
MyBatis总结七：动态sql和sql片段

MyBatis总结七：动态sql和sql片段

开发中&#xff0c;sql拼接很常见&#xff0c;所以说一下动态sql&#xff1a; 1if2chose,when,otherwise3where,set4foreach用法解析(现有一张users表 内有id username age 三个字段)&#xff1a; <!--查询所有用户&#xff0c;传递参数type&#xff0c;如果值为0&#xff0…
阅读更多...
iOS - OC Copy 拷贝

iOS - OC Copy 拷贝

前言 copy&#xff1a;需要先实现 NSCopying 协议&#xff0c;创建的是不可变副本。mutableCopy&#xff1a;需要实现 NSMutableCopying 协议&#xff0c;创建的是可变副本。浅拷贝&#xff1a;指针拷贝&#xff0c;源对象和副本指向的是同一个对象。对象的引用计数器 &#xf…
阅读更多...
三.选择结构(一)

三.选择结构(一)

1.if结构: if(条件){ 代码块 } 2.随机产生数: int randon (int)(Math.random()*10); 3.多重if选择结构: if(条件1){ 代码块1 }else if (条件2){ 代码块2 }else{ 代码块3 } 4.嵌套if选择结构: if(条件1){ if(条件2){ 代码块1 }else{ 代码块2 } }else{ 代码块3 } 转载于:https://…
阅读更多...
为了高性能、超大规模的模型训练，这个组合“出道”了

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

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

SVN就是这么简单

什么是SVN SVN全称&#xff1a;Subversion&#xff0c;是一个开放源代码的版本控制系统 Svn是一种集中式文件版本管理系统。集中式代码管理的核心是服务器&#xff0c;所有开发者在开始新一天的工作之前必须从服务器获取代码&#xff0c;然后开发&#xff0c;最后解决冲突&…
阅读更多...
SpringCloud必会知识点大全

SpringCloud必会知识点大全

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

thinkphp3.22 多项目配置

1.index.php if(version_compare(PHP_VERSION,5.3.0,<)) die(require PHP > 5.3.0 !); // 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false define(APP_DEBUG,true); // 创建 //define(BIND_MODULE,Login); define(erp,true); // 定义应用目录 define(APP_PAT…
阅读更多...
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这个可能…
阅读更多...
什么是Maven快照(SNAPSHOT)

什么是Maven快照(SNAPSHOT)

本文来说下Maven的SNAPSHOT版本有什么作用 文章目录 问题解决 正式版本"abc-1.0"快照版本"abc-1.0-SNAPSHOT"本文小结问题 在使用maven进行依赖管理时&#xff0c;有的版本号后面会带有"-SNAPSHOT"&#xff0c;有什么作用呢&#xff1f; <dep…
阅读更多...
带你剖析WebGis的世界奥秘----Geojson数据加载(高级)

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

前言&#xff1a;前两周我带你们分析了WebGis中关键步骤瓦片加载点击事件&#xff08;具体的看前两篇文章&#xff09;&#xff0c;下面呢&#xff0c;我带大家来看看Geojson的加载及其点击事件 Geojson数据解析 GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可…
阅读更多...
如果要存ip地址，用什么数据类型比较好

如果要存ip地址，用什么数据类型比较好

在看高性能MySQL第3版&#xff08;4.1.7节&#xff09;时&#xff0c;作者建议当存储IPv4地址时&#xff0c;应该使用32位的无符号整数&#xff08;UNSIGNED INT&#xff09;来存储IP地址&#xff0c;而不是使用字符串。但是没有给出具体原因。为了搞清楚这个原因&#xff0c;查…
阅读更多...
微软 .NET Core 3.1 年底将结束支持，请升级到.NET 6

微软 .NET Core 3.1 年底将结束支持，请升级到.NET 6

微软近日宣布&#xff0c;将于 2022 年 12 月 13 日停止为 .NET Core 3.1 提供服务更新、安全修复和技术支持。.NET Core 是一个免费开源的、用于 Windows、Linux 和 macOS 操作系统的软件框架。该项目主要由微软员工通过 .NET 基金会开发&#xff0c;并在 MIT 许可下发布。202…
阅读更多...
软件团队的模式选择

软件团队的模式选择

软件团队的模式分为&#xff1a;主治医生模式、明星模式、社区模式、业余剧团模式、秘密团队、特工团队、交响乐团模式、爵士乐模式、功能团队模式和官僚模式。 经过小组的讨论&#xff0c;我们决定选用交响乐团模式获得功能团队模式。 交响乐团模式的优点是种类多&#xff0c;…
阅读更多...
Angular 2

Angular 2

1. Angular2 官网 https://angular.io/guide/quickstart Node.js 下载 https://nodejs.org/en/ 怎么在vs code中使用angualr2 https://code.visualstudio.com/docs/nodejs/angular-tutorial moment.js:(javacript日期处理库) http://momentjs.cn/ 2. ng2-hightCharts https://…
阅读更多...
「Docker入门指北」容器很难理解？带你从头到尾捋一遍

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

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

微服务：事务管理

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

Copyright @ 2022~2023