CSS 实现:常见布局

1 设备与视口

设备屏幕尺寸是指屏幕的对角线长度。像素是计算机屏幕能显示一种特定颜色的最小区域,分为设备像素逻辑像素

在 Apple 的视网膜屏(Retina)中,默认每 4 个设备像素为一组,渲染出普通屏幕中一个像素显示区域内的图像,即 1 CSS 像素跨越 2设备像素,从而实现更为精细的显示效果。如果用户进行放大,一个 CSS 像素还将跨越更多的物理像素。屏幕可显示的像素越多,同样的屏幕区域内能显示的信息也越多。

图像分辨率是单位英寸中所包含的像素点数,单位是 PPI(Pixels Per Inch)表示每英寸所拥有的像素数目,即像素密度。

设备像素比是默认缩放为 100% 的情况下,设备像素和逻辑像素的比值,即设备像素比 DPR = 物理像素数 / 逻辑像素数。设备像素比可以通过 window.devicePixelRatio 来获取。

Web 浏览器包含两个视口,布局视口(layout viewport)和可视视口(visual viewport)。可视视口指当前浏览器中可见的部分,不包括屏幕键盘、缩放外的区域,并且可以变化。当使用键盘对页面进行缩放时,操作的时布局视口。而当使用双指缩放,或键盘在手机上弹出的时候,或者之前隐藏的地址栏变得可见的时候,可视视口缩小了,但是布局视口却保持不变。可视视口要么跟布局视口相同,要么更小。

CSS 像素单位表示的布局视口宽高获取:

移动设备的布局视口的默认值为 980px,比如在一个宽 320px 的移动设备显示一个布局视口宽为 980px 的页面,移动设备浏览器会对这个页面进行缩放直至其布局视口宽度为 320px,使得缩放后的页面显示效果都不会很理想。使用 <meta> 标签可以显式设置布局视口的宽度: 

2 三栏布局

指实现两侧栏固定宽度,中间栏自适应。

浮动(float)实现:

第一个为左栏元素左浮动 float: left 和设置固定宽度 width;

第二个为右栏元素右浮动 float: right 和设置固定宽度 width;

最后一个为中间栏元素设置外边距 margin = 左或右的固定宽度 + 额外外边距:

<style>
.left,
.right,
.center {height: 100%;
}
.left {float: left;width: 20%;background-color: red;
}
.right {float: right;width: 25%;background-color: blue;
}
.center {margin-left: 20%;margin-right: 25%;background-color: green;
}
</style><!-- 中间区域放在最后,因为靠后的正常流块盒会无视前面的浮动元素,否则中间区域会独占一行导致右侧区域到下面去了 -->
<div class="container"><div class="left"></div><div class="right"></div><div class="center"></div>
</div>

当 container 宽度 < 左侧区域宽度 + 右侧区域宽度时,右侧区域会被挤到左侧区域下方。

浮动实现(圣杯布局)

容器设置左右 padding 分别为左右栏的宽度;

三栏均设置左浮动 float:left 和相对定位 position: relative; 中间栏为第一个元素优先加载。

左侧栏设置 margin-left 为 -100%(和中间栏同一行并左侧对齐) 和 right 为自己负宽度向左移动而不挡住中间栏。

右侧元素设置 margin-left 为自己负宽度(和中间栏同一行并右侧对齐)和 left 设置为自己负宽度向右移动而不挡住中间栏。

注意:当中间栏部分比两边的任一侧栏宽度小布局就会乱掉(要用双飞翼布局来解决)

<style>
.container {padding: 0 200px 0 100px;
}
.left,
.right,
.center {position: relative;float: left;
}
.center {width: 100%;background: green;
}
.left {width: 100px;margin-left: -100%; /* 包含块的内容区宽度,使得和 center 同一行且左侧对齐 */right: 100px;   /* 再利用相对定位与 right,移动自身宽度 */background: red;
}
.right {width: 200px;margin-left: -200px; /* 负自身宽度的外边距,和 center 同一行且右侧对齐) */left: 200px; /* 再利用相对定位与 left,移动自身宽度 */background: blue;
}
</style><div class="container"><div class="center"></div><div class="left"></div><div class="right"></div>
</div>

浮动实现(双飞翼布局)

与圣杯布局不同的是,双飞翼布局不在父元素设置 padding,而是在中间栏内创建一个子容器放中间栏的内容,使用子容器的 margin 来给左右两侧栏留出空间。

三栏均设置左浮动 float:left;中间栏为第一个元素优先加载。

左侧栏设置 margin-left 为 -100%(和中间栏同一行并与三栏的父容器左侧对齐);

右侧元素设置 margin-left 为自己负宽度(和中间栏同一行并与三栏的父容器右侧对齐);

<style>
.left,
.right,
.center {float: left;
}
.center {width: 100%;
}
.center .content {margin-left: 100px;margin-right: 200px;background: green;
}
.left {width: 100px;margin-left: -100%; /* 包含块的内容区宽度,使得和 center 同一行且和容器左侧对齐 */background: red;
}
.right {width: 200px;margin-left: -200px; /* 负自身宽度的外边距,和 center 同一行且和容器右侧对齐) */background: blue;
}
</style><div class="container"><div class="center"><div class="content"></div> <!-- 实际存放中间区域内容,利用 margin 避开左右区域 --></div><div class="left"></div><div class="right"></div>
</div>

绝对定位(absolute)实现:

外部容器设置相对定位 position: relative

左右两侧设置绝对定位 position: absolute 和 top: 0;

两侧栏设置固定宽度 width;

两侧分别设置至两侧边距 left: 0 和 right: 0

中间栏左右设置外边距 margin = 左或右的固定宽度 + 额外外边距:

<style>
.container {position: relative;
}
.left,
.right {position: absolute;top: 0;
}
.left {left: 0;width: 20%;background-color: red;
}
.center {margin-left: 20%;margin-right: 25%;background-color: green;
}
.right {right: 0;width: 25%;background-color: blue;
}
</style><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>

表格(table)实现

容器设置 display: table 和 width: 100%;

三栏设置 display: table-cell

两侧栏设置固定宽度 width

注意:table-cell 的子元素 margin 是无效的。

<style>
.container {display: table;width: 100%;
}
.left,
.right,
.center {display: table-cell;top:0;
}
.left {width: 20%;background-color: red;
}
.center {background-color: green;
}
.right {width: 25%;background-color: blue;
}
</style><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>

Flex 实现

容器弹性布局 display: flex

两侧栏设置固定宽度 width

中间栏设置占主轴空间 flex: 1。

<style>
.container {display: flex;
}
.left {width: 20%;background-color: red;
}
.center {flex: 1;background-color: green;
}
.right {width: 25%;background-color: blue;
}
</style><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>

网格grid实现

容器设置 display: grid

容器设置两侧栏固定,中间栏自适应 grid-template-columns: width1 1fr width2。

<style>
.container {display: grid;grid-template-columns: 20% 1fr 25%;
}
.left {background-color: red;
}
.center {background-color: green;
}
.right {background-color: blue;
}
</style><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div>
</div>

3 响应式布局

响应式布局(responsive web design,RWD)是一套允许网页改变其布局和外观以适应不同分辨率、屏幕宽度等的实践。而自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。

为了处理移动端,首先页面头部必须有 <meta> 声明 viewport:

<!-- width 定义布局视口的宽度initial-scale 定义初始缩放比例maximum-scale 定义最大缩放比例minimum-scake 定义最小缩放比例user-scalable 定义是否允许用户手动缩放页面-->
<meta name="viewport"content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, width=device-width, user-scalable=no"  
/>

百分比布局实现

当浏览器的宽度或者高度发生变化时,通过百分比单位,可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。但是如果过多的使用百分比,会增加布局的复杂度,所以不建议使用百分比来实现响应式。

网格布局实现

Grid 布局可以自动判断容器大小,无论大小,屏幕自动撑满并均分。

/* repeat: 用以 N 整分auto-fit: 表示自动填充minmax: 轨道最小宽度为 300px*/
.container {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

媒体查询实现

通过 CSS3 @media 规则设置不同分辨率下的样式属性,来适配不同尺寸的屏幕设备。

/* iPhone6 iPhone7 iPhone8 */
body {background-color: yellow;
}
/* iPhone5 */
@media screen and (max-width: 320px) {body {background-color: black;}
}
/* iPhoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {body {background-color: orange;}
}
/* iPhone6Plus iPhone7Plus iPhone8Plus */
@media screen and (min-width: 414px) {body {background-color: black;}
}
/* iPad */
@media screen and (min-width: 768px) {body {background-color: black;}
}
/* iPad Pro */
@media screen and (min-width: 1024px) {body {background-color: black;}
}
/* PC */
@media screen and (min-width: 1100px) {body {background-color: black;}
}

REM 布局实现

由于页面的 rem 单位的样式值都是根据 <html> 元素的 font-size 样式属性值进行动态计算,因此可以利用媒体查询或 JavaScript,在不同分辨率下给 <html> 元素的 font-size 赋值。

html {font-size: 24px;
}
@media (max-width: 320px) {html {font-size: 16px;}
}
@media (max-width: 375px) {html {font-size: 20px;}
}

标准分辨率或低分辨率显示 dpr  = 1,高分辨率显示,dpr = 2 或 3 或者更高,其中 dpr = 设备像素 :CSS 像素。

对于图片高清显示,高分辨率的屏幕(dpr = 2),单个位图像素对应于 4 个设备像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊;因此,为了使这张图高清显示,最好的解决方案是借助 scrset 在不同的 dpr 下加载不同 dpr 的图片。

对于网页高清显示,就需要对视口进行缩放,使得视觉视口的像素和理想视口的像素 1:1。meta 元素的 viewport 缩放比例应该设置为 scale = 1 / dpr。设置缩放比后,获取的视口宽度 dpr * 理想视口,计算根元素上的基准 font-size 即可。

对于文本的显示,不建议使用 rem,因为希望文本能够流动,使得在大屏手机能看到更多的文本,而不是文本因为 rem 等比缩放使得大字号显得突兀;同样也不希望在小屏手机字体因为等比缩放显得太小,所以应该根据不同的 dpr 动态设置固定字号的字体:

div {width: 1rem;height: 0.4rem;font-size: 12px; /* DPR 为 1 的设备的 font-size 默认值 */
}
[data-dpr="2"] div {font-size: 16px;
}
[data-dpr="3"] div {font-size: 20px;
}

vw/vh实现

1 vw/vh 是布局视口宽度 window.innerWidth / 布局视口高度 window.innerHeight 的 1%,1 vmin/vmax 则分别是当前 vw 和 vh 中较小值的 1% 和较大值的 1%。postcss-loader 的 postcss-px-to-viewport 可以自动实现 px 到 vw/vh 的转化。px 转换成 vw/vh  不一定能完整整除,因此有一定的像素差。

4 居中布局

水平且垂直居中只需要将同时满足水平居中和垂直居中即可。

水平居中

  1. 行内级元素(inline, inline-block, inline-flex, inline-table)和文本在设置 text-align;center 的非 inline元素内水平居中。
  2. 设置 margin-left:auto;margin-right:auto;的固定宽度的块级元素,在父容器内水平居中。
  3. 设置 position:absolute; left:0; right:0; margin-left:auto; margin-right:auto; 的固定宽度块级元素,在 position:relative 的父容器内水平居中。
  4. 单个 flex 项在设置 justify-content:center;的 flex 容器内水平居中。
  5. 设置 margin-left:auto;margin-right:auto; 的 单个 flex 项在 flex 容器内水平居中。
  6. 设置 position:absolute;left: 50%;margin-left:-0.5 * width;的固定宽度块级元素,在position:relative;的父容器内水平居中。
  7. 设置 position:absolute; left:50%;transform:translateX(-50%);的块级元素,在position:relative;的父容器内水平居中。
  8. 设置 margin-left:auto;margin-right:auto;的 grid 项在网格区域内水平居中。
  9. grid 项在设置为 justify-items:center;的 grid 容器的网格区域内水平居中。
  10. 设置 justify-self:center;的 grid 项 在网格区域内水平居中。

垂直居中

  1. 单行文本或行内级元素在设置 line-height: height; 的固定高度块级元素内垂直居中。
  2. 设置 position;absolute;top:50%;margin-top:-0.5 * height;的固定高度块级元素在设置 position:relative 的父元素内垂直居中。
  3. 单行 flex 项在设置 align-items:center 的 flex 容器内垂直居中。
  4. 设置 margin-top:auto;margin-bottom:auto;的单行 flex 项在 flex 容器内垂直居中。
  5. 设置 position:absolute;top:50%;transform:translateY(-50%);的块级元素在设置position:relative;的父元素内垂直居中。
  6. 设置 display:table-cell;vertical-align:middle 的元素在设置 display:table 的父元素内垂直居中。
  7. 设置 position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom;auto的固定高度块级元素在设置 position:relative 的父元素内垂直居中。
  8. 设置 vertical-align:middle 的行内级元素与高度 100%,宽度为 0 的伪元素对齐,在父元素内垂直居中。
  9. 设置 vertical-align:middle 的行内级元素在设置 line-height:height;font-size:0;的父元素内垂直居中。
  10. 设置 margin-top:auto;margin-bottom:auto;的 grid 项在网格区域内垂直居中
  11. grid 项在设置 align-items: center 的 grid 容器的网格区域内垂直 。
  12. 设置 align-self:center;的 grid 项 在网格区域内垂直居中。

5 两栏布局

指其中一栏固定,另外一栏自适应。

浮动实现:

固定宽度一栏浮动,自适应一栏触发 BFC 即可,或者自适应一栏浮动侧使用大于固定宽度栏的 margin。

/* 1. 浮动 + BFC 实现两栏布局 */
.float-bfc-two-columns .left {float: left;width: 25%; /* 左侧宽度固定 */background-color: red;
}.float-bfc-two-columns .right {display: flow-root; /* 或 overflow: hidden */background-color: green;
}/* 2. 浮动 + margin 实现两栏布局 */
.float-margin-two-columns .left {float: left;width: 25%; /* 左侧宽度固定 */background-color: red;
}.float-margin-two-columns .right {margin-left: 25%;background-color: green;
}

绝对定位实现:

父元素设置 position:relative;

固定宽度栏放在 left 侧,另一自适应栏 left: 固定宽度 放在 right 侧。

/* 绝对定位实现两栏布局 */
.absolute-two-columns {position: relative;
}
.absolute-two-columns .left,
.absolute-two-columns .right {position: absolute;top: 0;
}
.absolute-two-columns .left {left: 0;width: 25%;background-color: red;
}
.absolute-two-columns .right {left: 25%;right: 0;background-color: green;
}

表格实现:

父容器设置 display:table; 且宽度 100%;

两栏均设置 display:table-cell;

其中一栏固定宽度即可。

.table-two-columns {display: table;width: 100%;
}
.table-two-columns .left,
.table-two-columns .right {display: table-cell;
}
.table-two-columns .left {width: 25%;
}

flex实现:

父容器 display:flex;

自适应栏 flex:1;

/* flex 实现两栏布局 */
.flex-two-columns {display: flex; 
}
.flex-two-columns .left {width: 25%; /* 左边栏宽度固定 */
}.flex-two-columns .right {flex: 1; /* 全分父容器剩余空间 */margin-left: 5%;
}

grid 实现: 

父元素设置 display: grid; grid-template-columns: 固定宽度 1fr;即可:

/* grid 实现两栏布局 */
.grid-two-columns {display: grid;grid-template-columns: 25% 1fr;
}

6 瀑布流布局

瀑布流布局分为等宽瀑布流等高瀑布流,实现方式类似,以等宽瀑布流为例。

多列实现:

/* 多列实现瀑布流:顺序是先从上往下,再从左往右,因此不适合滚动动态加载添加数据 */
.multi-columns-masonry {column-count: 3;column-gap: 10px;
}
.multi-columns-masonry .item {margin-bottom: 10px;border: 1px solid #999;break-inside: avoid; /* 内容在列与列之间不强制断开 */
}
.multi-columns-masonry .item img {width: 100%;
}

flex 实现:

<!-- flex 实现瀑布流布局 -->
<script type="text/javascript">const column = 3;const data = new Array(column).map(item => []);imgList.forEach((img, index) => {data[index % column].push(img);});
</script><style>
.flex-masonry {display: flex;flex-direction: row;
}
.flex-masonry .column {display: flex;flex-direction: column;flex: 1;padding: 0 2px;
}
.flex-masonry .column .item {margin-bottom: 5px;width: 100%;
}
</style><div class="flex-masonry"><!-- 第一列放 data[0] --><div class="column"><div class="item"></div><!-- more items--></div><!-- 第二列放 data[1] --><div class="column"><div class="item"></div><!-- more items--></div><!-- 第三列放 data[2] --><div class="column"><div class="item"></div><!-- more items--></div>
</div>

grid 实现:

<!-- grid 实现瀑布流布局 -->
<script type="text/javascript">// js 动态设置图片占据单元格数:imgElements 是设置 url 为图片资源地址的图片元素集合Array.from(imgElements).forEach((imgElement, index) => {const url = imgElement.getAttribute('url');// 加载图片const image = new Image();image.src = url;image.onload = () => {// 根据图片元素的宽高等比例计算显示高度;const height = Math.round(image.height * imgElement.width / image.width);imgElement.src = url;// 设置当前跨越几个单元格(每个单元格 10px)imgElement.style.gridRowEnd = `span ${~~(height / 10)}`;}});
</script><style>
.grid-masonry {display: grid;grid-template-columns: repeat(3, 1fr);column-gap: 5px;grid-auto-rows: 10px; /* 隐式网格行尺寸 */
}
.grid-masonry .item {grid-row-start: auto; /* 网格起始线设置为自动*/
}
</style><div class="grid-masonry"><div class="item"></div><!-- more items-->
</div>

使用 grid-template-rows: masonry 可直接 grid 中实现等宽瀑布流布局(grid-template-columns: repeat(3,1fr));但是此功能仅在 Firefox 中实现,且需要通过在 about:config 中将标志 layout.css.grid-template-masonry-value.enabled 设置为 true 来启用。

绝对定位实现:

首先根据整个容器宽度和设置的图片宽度与间隙计算出能展示的列数。使用一个长度为列数的数组存储每一列当前已放图片的高度和。图片设置为绝对定位,然后计算出每个图片的 top,left 值:每张图片都放到最短的一列下面即对应于数组中高度和最小的那一项,top = 数组中首个最小值所在列的值,left = 数组中首个最小值所在列索引 列宽 + 间隙。然后增加数组中此列高度,此时列的高度发生变化,下张图片又会寻找其他最短的列。最后就是监听窗口的改变,重新计算一遍所有图片 top,left 值。

7 九宫格布局(自适应)

grid实现:

/* grid 实现九宫格 */
.grid-nine-grid-container {width: 100%;display: grid;grid-template-columns: repeat(3, 1fr);gap: 5px;background-color: red;
}
.grid-nine-grid-container .item {position: relative; /* item 的子元素使用绝对定位 */padding-bottom: 100%;text-align: center;background-color: coral;
}

flex实现:

/* flex 实现九宫格 */
.flex-nine-grid-container {width: 100%;display: flex;flex-wrap: wrap;background-color: red;
}
.flex-nine-grid-container .item {position: relative; /* item 的子元素使用绝对定位 */width: calc(calc(100% - 10px * 2) / 3);padding-bottom: calc(calc(100% - 10px * 2) / 3);padding-bottom: 100%;margin-right: 10px;margin-bottom: 10px;
}
/* n = 0, 1, 2... 则 3n = 3, 6..., 其中 n=0 时,3n=0,而第 0 个元素不存在*/
.flex-nine-grid-container .item::nth-of-type(3n) {margin-right: 0;
}
/* n = 0, 1, 2... 则 n+7 = 7, 8, 9..., 其中 n > 2 时,n+7 > 9,而只有 9 个元素存在*/
.flex-nine-grid-container .item:nth-of-type(n+7) {margin-bottom: 0;
}

table实现:

/* table 实现九宫格 */
.table-nine-grid-container {width: 100%;height: 100%;display: table;border-spacing: 10px; /* border-spacing 属性指定相邻单元格边框之间的距离 */background-color: red;
}
.table-nine-grid-container .row {width: 100%;display: table-row;
}
.table-nine-grid-container .row .item {position: relative; /* item 的子元素使用绝对定位 */width: calc(calc(100% - 10px * 2) / 3);padding-bottom: calc(calc(100% - 10px * 2) / 3);display: table-cell;text-align: center;background-color: coral;
}

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

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

相关文章

buuctf-[BSidesCF 2020]Had a bad day 文件包含

打开环境 就两个按钮&#xff0c;随便按按 url变了 还有 像文件包含&#xff0c;使用php伪协议读取一下&#xff0c;但是发现报错&#xff0c;而且有两个.php,可能是自己会加上php后缀 所以把后缀去掉 /index.php?categoryphp://filter/convert.base64-encode/resourcei…

【APP】上架指南:iOS App Store 首次上架被拒原因分析与解决方案

目录 一、前言 二、APP 审核备案新规 &#xff08;1&#xff09;iOS 上架审核申请被拒 &#xff08;2&#xff09;苹果应用商店重大调整 &#xff08;3&#xff09;首次备案流程 ① 阿里云备案 ② 华为云备案 ③ 腾讯云备案 三、iOS 首次上架拒审原因分析 &#…

[羊城杯 2020]easyser - 反序列化+SSRF+伪协议(绕过死亡die)

[羊城杯 2020]easyser 一、解题过程&#xff08;一&#xff09;、一阶段&#xff08;二&#xff09;、二阶段 二、思考总结 一、解题过程 &#xff08;一&#xff09;、一阶段 可以直接使用ctf-wscan扫描一下有什么文件&#xff0c;或者直接试试robots.txt能不能行 直接打开…

【算法训练-数组 三】【数组矩阵】螺旋矩阵、旋转图像、搜索二维矩阵

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是螺旋矩阵&#xff0c;使用【二维数组】这个基本的数据结构来实现 螺旋矩阵【EASY】 二维数组的结构特性入手 题干 解题思路 根据题目示例 mat…

用《斗破苍穹》的视角打开C#3 标签与反射(人物创建与斗技使用)

随着剧情的发展&#xff0c;主线人物登场得越来越多&#xff0c;时不时跳出一个大佬&#xff0c;对我张牙舞爪地攻击。眼花缭乱的斗技让我不厌其烦&#xff0c;一个不小心&#xff0c;我就记不清楚在哪里遇上过什么人&#xff0c;他会什么斗技了。这时候&#xff0c;我就特别希…

通过IP地址管理提升企业网络安全防御

在今天的数字时代&#xff0c;企业面临着越来越多的网络安全威胁。这些威胁可能来自各种来源&#xff0c;包括恶意软件、网络攻击和数据泄露。为了提高网络安全防御&#xff0c;企业需要采取一系列措施&#xff0c;其中IP地址管理是一个重要的方面 1. IP地址的基础知识 首先&a…

华为数通方向HCIP-DataCom H12-831题库(单选题:221-240)

第221题 以下哪些项能被正则表达式^30.成功匹配? A、200 100 300 B、100 200 300 C、300 200 100 D、300 100 200 答案:CD 解析: 30.其中的“点”表示的是任何的一个数字,表示的是as-path的开头;所以以300开头的都是满足题目需求的。 第222题 以下哪些项的Community属性能…

安卓 Android 终端接入阿里云 IoT 物联网平台

在全球智能手机市场里&#xff0c;谷歌开发的安卓(Android)移动操作系统市场占有率已经高达90%。随着物联网智能硬件升级&#xff0c;安卓(Android)也逐渐成为智能摄像头&#xff0c;智能对讲门禁&#xff0c;人脸识别闸机&#xff0c;智能电视&#xff0c;智能广告屏等带屏 Io…

Android多线程学习:线程

一、概念 进程&#xff1a;系统资源分配的基本单位&#xff0c;进程之间相互独立&#xff0c;不能直接访问其他进程的地址空间。 线程&#xff1a;CPU调度的基本单位&#xff0c;线程之间共享所在进程的资源&#xff0c;包括共享内存&#xff0c;公有数据&#xff0c;全局变量…

Java虚拟机内存模型

JVM虚拟机将内存数据分为&#xff1a; 程序计数器、虚拟机栈、本地方法栈、Java堆、方法区等部分。 程序计数器用于存放下一条运行的指令&#xff1b; 虚拟机栈和本地方法栈用于存放函数调用堆栈信息&#xff1b; Java堆用于存放Java程序运行时所需的对象等数据&#xff1b…

webpack不同环境下使用CSS分离插件mini-css-extract-plugin

1.背景描述 使用mini-css-extract-plugin插件来打包css文件&#xff08;从css文件中提取css代码到单独的文件中&#xff0c;对css代码进行代码压缩等&#xff09;。 本次采用三个配置文件&#xff1a; 公共配置文件&#xff1a;webpack.common.jsdev开发环境配置文件&#x…

接口测试及常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

maven 初学

1. maven 安装 配置安装 路径 maven 下载位置: D:\software\apache-maven-3.8.6 默认仓库位置: C:\Users\star-dream\.m2\repository 【已更改】 本地仓库设置为&#xff1a;D:\software\apache-maven-3.8.6\.m2\repository 镜像已更改为阿里云中央镜像仓库 <mirrors>…

算法通过村第十二关-字符串|黄金笔记|冲刺难题

文章目录 前言最长公共前缀纵向比较横向比较 字符串压缩问题表示数值的字符串总结 前言 提示&#xff1a;我有时候在想&#xff0c;我是真的不太需要其他人&#xff0c;还是因为跟他们在一起时没法自己&#xff0c;所以才保持距离。我们的交谈就像是平行而毫无交集的自言自语。…

Python—Scrapy实践项目

爬取豆瓣电影2022年Top250部经典电影 1.项目概述 从https://movie.douban/top250爬取电影的标题、评分、主题。我在之前使用普通的爬虫实现了类似的功能&#xff0c;可以对比来进行学习&#xff08;Python爬虫——爬虫基础模块和类库&#xff08;附实践项目&#xff09;&#…

矩阵的相似性度量的常用方法

矩阵的相似性度量的常用方法 1&#xff0c;欧氏距离 欧式距离是最易于理解的一种距离计算方法&#xff0c;源自欧式空间中两点间的距离公式。 (1)二维平面上的点 a ( x 1 , y 1 ) a(x_1,y_1) a(x1​,y1​)和点 b ( x 2 , y 2 ) b(x_2,y_2) b(x2​,y2​)的欧式距离为 d ( x …

【网络】抓包工具Wireshark下载安装和基本使用教程

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的帮助&#x1…

javaee ssm框架项目整合thymeleaf2.0 更多thymeleaf标签用法 项目结构图

创建ssmthymeleaf项目 创建ssmthymeleaf项目参考此文 thymeleaf更多常用标签 <!DOCTYPE html> <html lang"en" xmlns:th"http://www.thymeleaf.org"> <head><meta charset"UTF-8"><title>Title</title> …

怎么压缩ppt文件?

怎么压缩ppt文件&#xff1f;造成ppt文件体积太大的原因主要有两个&#xff1a;① 图片和媒体文件&#xff0c;PPT中使用高分辨率、大尺寸的图片或视频文件会增加文件大小。如果未经压缩或优化&#xff0c;这些文件可能会占用较大的存储空间&#xff1b;② 动画和特效&#xff…

Super-jacoco应用统计代码覆盖率及问题处理

一、原文地址 滴滴开源Super-jacoco&#xff1a;java代码覆盖率收集平台 - 掘金 二、背景 我要使用Super-jacoco&#xff0c;对手工测试&#xff0c;进行代码覆盖率的统计。 为什么使用Super-jacoco&#xff0c;而不是直接使用jacoco&#xff0c;因为Super-jacoco解决了增量…