html笔记(四)弹性盒+响应式

大标题小节
一、弹性盒1. 标准盒模型和怪异盒模型
2. 弹性盒dipalay
3. 与display配合使用的其他属性
4. 弹性盒的对齐方式
5. 弹性盒的默认特性
二、响应式布局1. 媒体查询
2. 怎样使用媒体查询
3. 优缺点以及使用场景
4. Meta 标签的定义
5. 常见的属性操作
三、多列布局
四、移动端布局1. 百分比弹性布局
2. rem
3. vw、vh

一、弹性盒

css 中盒子模型分为两种: w3c 标准(标准盒模型)IE标准盒子模型(怪异盒模型)
通过 box-sizing: content-box(默认,标准盒模型)/border-box(怪异盒模型); 来转换。

  • 大多数浏览器在采用 w3c 标准模型,而 IE 中采用 Microsoft 自己的标准;
  • 怪异模型是“部分浏览器在支持 w3c 标准的同时还保留了原来的解析模式”,怪异模式主要表现在 IE 内核的浏览器。
  • 当没有 doctype 时(即没有<!DOCTYPE html>声明时),IE6 会触发怪异模式;。

1. 标准盒模型 和 怪异盒模型(IE 盒子模型):

(1)在标准模式下,一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)
在这里插入图片描述

(2)在IE盒子模型下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值);

在这里插入图片描述
(3)示例:给 div标签 和 p标签 设置一样的宽高,但是 div标签 有 border、padding 值。
在这里插入图片描述


2. 弹性盒 display

(兼容写法:-webkit-display:)设置在父元素上。使用弹性盒后, float、vertical-align、多列等都样式都无效;

display 的属性值:

  • box,将对象作为弹性伸缩盒显示。(伸缩盒最老版本);
  • inline-box,将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本);
  • flexbox,将对象作为弹性伸缩盒显示。(伸缩盒过渡版本);
  • inline-flexbox,将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本);
  • flex, 将对象作为弹性伸缩盒显示。(伸缩盒最新版本);
  • inline-flex,将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本);

3. display 配合使用的其他属性:

(1)flex-direction:,排列方式(写在父元素身上);
兼容写法: -webkit-flex-direction:

  • row默认的排列方式,横向从左到右排列(左对齐) ;
  • row-reverse,反转横向排列(右对齐,从后往前排,最后一项排在最前面);
  • column,纵向排列;
  • column-reverse,反转纵向排列,从后往前排,最后一项排在最上面);
    在这里插入图片描述

(2)order:,弹性盒子子元素顺序(设置在子元素上

  • 负数靠前;(越小越前)
  • 0为原始位置;
  • 正整数靠后(越大越后);

给子元素设置了orderorder值越大,顺序越靠后;

在这里插入图片描述

<style>*{margin:0; padding:0;}ul{display: flex;background:#9f9;}li{list-style: none;width: 50px;height: 50px;border:1px solid #000;}ul.one li:nth-child(1){order:1}ul.one li:nth-child(2){order:0}ul.one li:nth-child(3){order:13}ul.one li:nth-child(4){order:-2}ul.one li:nth-child(5){order:-1}
</style>
<body><ul class="one"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

(3)flex-grow:,弹性盒分配剩余空间(设置在子元素上

  • 0 为默认;
  • 分配提成(数字);
  1. 没有设置flex-grow的子元素宽度不变;
  2. 设置flex-grow了的子元素宽度 = 原宽度 + 剩余宽度*分配剩余空间比例;
  • 分配剩余空间比例 = flex-grow值/所有flex-grow值之和。

在这里插入图片描述

<style>*{margin:0; padding:0;}ul.two{display: flex;background:#9f9;width: 400px;} /*li的总宽度是50px*5=250;剩余空间是400-250=150px*/li{list-style: none;width: 50px;height: 50px;border:1px solid #000;}/*剩余空间总共分成了2+3=5份,第2个li占了2分,所以分配到了150*2/5=60px;总宽度是50+60=110px*/ul.two li:nth-child(2){flex-grow: 2;}ul.two li:nth-child(5){flex-grow: 3;} /*注意边框的宽度也会被计算进去。这里为了方便看懂,就没有把宽度减去了*/
</style>
<body><ul class="two"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

(4)flex-shrink:,检索弹性盒的收缩比率(子元素设置);

  • 1 默认;
  • 数字

设置flex-shrink后,所有子元素宽度 = 原宽度 - 超出宽度*收缩占比;

  • 收缩占比=flex-shrink/(所有设置flex-shrink的值之和 + 没有设置flex-shrink的子元素个数);没有设置flex-shrink的值=1。

在这里插入图片描述

<style>*{margin:0; padding:0;}ul.three{display: flex;background:#9f9;width: 250px;} /*li的总宽度是50px*5=250;剩余空间是400-250=150px*/ul.three li{width:90px;}/*有5个li,总宽度是90px*5=450px,超出了450-250=200px;*//*flex-shrink默认是1,所以没有设置的收缩比率都占了1,因此第3个li收缩了比率是2/8,也就是说收缩宽度=200*2/8=50,所以它的宽度=原宽度-收缩宽度=90-50=40px*/ul.three li:nth-child(3){flex-shrink: 2;}ul.three li:nth-child(4){flex-shrink: 3;}/*设置了flex-shrink之后,宽度=原宽度-收缩宽度=90-200*3/8=15px*/
</style>
<body><ul class="three"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

(5)flex-basis:,检索弹性盒伸缩准值(子元素设置);

  • auto 默认;
  • 数字px

设置了flex-basis:之后子元素的宽度=原宽度*伸缩比例。

  • 伸缩比例=子元素宽度总和/父元素宽度。

在这里插入图片描述

<style>*{margin:0; padding:0;}ul{display: flex;background:#9f9;}/* 设置了flex-basis(相当于给子元素设置宽度,但是设置这个元素之后可以让子元素的宽度按比列缩放) */ul.four{width: 300px;} /*伸缩准值:按比列缩放每个子元素。*/ul.four li{width: 110px;} /*所有li总宽度和=li*4+60=500px;要使500*?=父元素宽度300px,得到的?=0.6,所以出第3个li外,其他li宽度=110*0.6=66px*/ul.four li:nth-child(3){flex-basis:60px;} /*第3个li宽度=60*0.6=36;*/
</style>

(6)flex:,伸缩性(设置在子元素上
可以设置3个值,flex属性是 flex-growflex-shrinkflex-basis 这3个CSS属性的缩写,推荐使用该属性,而不是单独书写;

  • 设置一个值:分配剩余空间
  • 设置三个值:0 0 百分比分配
    在这里插入图片描述
<style>*{margin:0; padding:0;}ul{display: flex;margin-bottom:10px;text-align: center;}li{list-style: none;background:#efefef;margin:0 5px;}ul.one li{flex:1;}ul.two li{flex:1;}ul.three li:nth-child(1){flex:0 0 50%;}ul.three li:nth-child(2),ul.three li:nth-child(3){flex:1;}ul.four li:nth-child(1){flex:1;}ul.four li:nth-child(2){flex:0 0 33.3333%;}ul.five li:nth-child(1){flex:0 0 25%;}ul.five li:nth-child(2){flex:1;}ul.five li:nth-child(3){flex:0 0 33.3333%;}
</style>
<body><ul class="one"><li>1/2</li><li>1/2</li></ul><ul class="two"><li>1/3</li><li>1/3</li><li>1/3</li></ul>  <ul class="three"><li>1/2</li><li>auto</li><li>auto</li></ul><ul class="four"><li>auto</li><li>1/3</li></ul>  <ul class="five"><li>1/4</li><li>auto</li><li>1/3</li></ul>
</body>

(7)flex-wrap:,伸缩换行(写在父元素上);

  • nowrap;,当子元素溢出父容器时不换行;
  • wrap; ,当子元素溢出父容器时自动换行;
  • wrap-reverse;,反转 wrap 排列;
    在这里插入图片描述

(8)flex-flow:,伸缩流方向与换行(适用于父类容器上);

  • flex-direction;    
  • flex-wrap;    

4. 弹性盒的对齐方式:

(1)justify-content,主轴横向对齐(设置在父元素上

  • flex-start;,左对齐;
  • flex-end;,右对齐;
  • center;,居中对齐;
  • space-between;,分开对齐;
  • space-around;,分开左右边距对齐;
    在这里插入图片描述

(2)align-content:,主轴纵向对齐(设置在父类容器上,不常用);

  • flex-start;,上对齐;
  • flex-end;,下对齐;
  • center;,居中对齐;
  • baseline;,基线对齐;
  • strecth;,上下拉升对齐;

(3)侧轴对齐align-items:(设置在父上,常用)、 align-self:(设置在子,让某个子元素单独布局);

  • flex-start;,上对齐;
  • flex-end;,右对齐;
  • center;,居中对齐;
  • baseline;,基线对齐;
  • strecth;,上下拉升对齐;
    在这里插入图片描述

5. 弹性盒的默认特性:

(1)默认流向为横向
(2)若不写宽度,默认宽度为 0 或者被内容撑开;
(3)弹性盒的高度,若不设置,高度与父元素一样高;
(4)弹性盒默认不换行;



二、 响应式布局

1. 媒体查询

  1. 使用媒体查询原因:如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式
  2. 媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。
  3. 好处: 使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

2. 怎样使用 media(媒体查询)

在CSS文件中引入媒体查询:

  • 媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会覆盖前面的样式;

(1)在页面内使用
需要先在 html 文档中添加以下代码,用来兼容移动设备的显示效果:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

  • width=device-width:宽度等于当前设备的宽度;
  • initial-scale=1:初始的缩放比例(默认为1);
  • maximum-scale=1:允许用户缩放到得最大比例(默认为1);
  • user-scalable=no:用户不能手动缩放;
/*当设备屏幕宽度在320px——720px之间时,媒体查询中body的背景色(background-color:red;)会重叠之前的body背景色;
当设备屏幕宽度在320px及以下时,媒体查询中body的body背景色(background-color:blue;)会重叠之前的body背景色;
*/
<style>
body{background: #f9f;} 
@media screen and (max-width:720px) and (min-width:320px){ /* and (min-width:320px)可省略*/body{background-color:red;}
}
@media screen and (max-width:320px){body{background-color:blue;}
}
</style>

(2)媒体查询外联 css 语法:
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />,当屏幕宽度(最小宽度为1024px)大于等于1024px 时引入 wide.css的样式。

<link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />,小于等于 320px 时(最大宽度是 320px)使用 mobile.css 的样式。

<link rel=“stylesheet” href="medium.css" media="screen and (max-width:1024px) and (min-width:320px)" />,在 320px 和 1024px 之间的使用 medium.css的样式。

3. 优缺点以及使用场景:

(1)优点:
① 多终端视觉和操作体验非常风格统一;
② 兼容当前及未来新设备;
③ 响应式 web 设计中的大部分技术可以用在 WebApp 开发中;
④ 节约了开发成本,维护成本也降低很多;

(2) 缺点:
① 兼容性:低版本浏览器兼容性有问题;
② 移动带宽流量:相比较手机定制网站,流量稍大;
③ 但比较加载一个完整 pc 端网站显然是小得多;
④ 代码累赘,会出现隐藏无用的元素,加载时间加长;
⑤ 兼容各种设备工作量大;

(3)适用场景:
① 对于重内容的网站,例如形象展示,则比较适合使用响应式web设计;
② 对于重功能的网站,如电子商务类,则更推荐使用独立移动网站;
在这里插入图片描述


4. Meta 标签定义:

  1. 移动设备上的 viewport 就是设备的屏幕上能用来显示我们的网页的那一块区域,再具体一点,就是浏览器上(也可能是一个 app 中的 webview)用来显示网页的那部分区域,
  2. 但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。

(1)使用 viewport meta 标签在手机浏览器上控制布局:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示:
<meta name="apple-mobile-web-app-capable" content="yes" />

(3)设置Web App的状态栏(屏幕顶部栏)的样式:
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />


5. 常见的属性操作:

(1)orientation: 设备方向;

(2)portrait: 监听竖屏,指定输出设备中的页面可见区域高度大于或等于宽度;

(3)landscape: 监听横屏(除portrait值情况外,都是landscape);

(4)min-width:max-width: 适用于全部屏幕(手机和网页)的查询;

(5)min-device-width:max-device-width: 只用于手机分辨查询;



三、多列布局

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样。
Internet Explorer 9 以及更早的版本不支持多列属性;

多列属性

(1)创建多列: column-count: 数字;属性规定元素应该被分隔的列数;
(2)规定列之间的间隔: column-gap: 数字px; 属性规定列之间的间隔;
(3)列规则: column-rule:数字px outset/solid/double/dotted/dashed #颜色 属性设置列之间的宽度、样式和颜色规则;

  • Internet Explorer 10 和 Opera 支持多列属性。
  • Firefox 需要前缀 -moz-。
  • Chrome 和 Safari 需要前缀 -webkit-。

在这里插入图片描述

<style>
div{word-wrap: break-word;width: 400px;column-count: 3; /*规定被分成3列*/column-gap: 30px; /* 这里是文字列和文字列之间的距离*/column-rule: 4px double #f00; /*分隔线样式*/
}
</style>
<div>当前大部分的浏览器支持的是W3c的标准盒模型,也保留了对怪异盒模型的支持,当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。
</div>


四、移动端页面布局


移动端布局优缺点:

  1. 优点:
    (1)移动端基本都兼容 h5、css3,所以可以放心的使用 css3 的样式来布局;
    (2)移动端页面一般都不大,所以标签使用的并不多,开发时间没有 web 端长;
  2. 缺点: 移动端宽高尺寸不同,因此测量尺寸成为一个难题,无法非常精确的写尺寸;

因为无法使用正常尺寸,不能直接写像素,通常用 2 种方式来写;

1. 百分比弹性布局:

移动端页面基本上和 web 端区别不大,但要考虑到移动端屏幕尺寸不大并且都是全屏布局,而且尺寸都不一样,所以不能使用网页的 固定尺寸 来布局,需要使用 百分比 来布局;

(1)宽度的百分比是 屏幕宽度 的百分比数;
(2)高度的百分比是 父元素高度的百分比数。


2. rem

(1)rem 是永远获取 html 的 font-size 的值。
例:html{font-size:100px;} 那么所有子元素 1rem = 100px;

(2)通过 js 获取屏幕尺寸,制定出一个系数,去改变 html 的 font-size 值。
例:当屏幕尺寸是 320px ,我想设置 1rem = 10%,那么就设置 html 的 font-size:32px; 通过 js 来设置屏幕尺寸÷10;


3. vw,vh

vw,vh 永远跟随屏幕大小变化而变化。

(1)100vw = 屏幕的宽度;1vw = 1% 屏幕尺寸;
(2)这样更直观的获取百分比,但是少部分手机不支持,需要自己把控; vw 是为了的趋势。
(3)使用:html{font-size: 100÷设计图宽度的1%vw;}
其他元素: header{height:高度÷100rem;}

/*假设设计图宽度为640px,某个div高度88px,那么
640/6.4=100px;
设:100vw/6.4 = 15.625vw;
1rem/100 = 0.01rem * 88 = 1px *88 = 100px/100 = 1px
得: .88rem = 88px;
*/


html笔记(一)html4+css2.0、css基础和属性、盒模型

html笔记(二)html4+css2.0(元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹)

html笔记(三)html5+css3(html5、css3、文字相关)

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

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

相关文章

享受Android应用程序的Java技术盛宴

Java™ 语言是 Android 开发人员所选的工具。Android 运行时使用自己的虚拟机Dalvik&#xff0c;这并不是多数程序开发人员使用的普通Java 虚拟机。Dalvik支持Java 编程语言的大部分功能——但并不是全部。在本文中&#xff0c;您将学习高级Java功能及其如何在Android中实现。这…

echarts地图在ie浏览器上不显示

前面是安装及上手教程&#xff0c;参考了彩色泡泡 和 winne雪 的博客。 如果已经写好了&#xff0c;可以直接跳到 问题总结。 1. npm install echarts --save 2. 在 main.js 中 import echarts from echarts; Vue.prototype.$echarts echarts;3. 在页面上 import china fr…

虚拟主机上快速安装kail

官方文档的筛选 【1】Kali Linux是什么? Kali Linux是一个高级渗透测试和安全审计Linux发行版. Kali Linux 特性 Kali是BackTrack Linux完全遵循Debian开发标准的完整重建.全新的目录框架、复查并打包所有工具、还为VCS建立了Git 树. 超过300个渗透测试工具: 复查了BackTrack里…

Java并发教程–线程之间的可见性

当在不同线程之间共享对象的状态时&#xff0c;除了原子性外&#xff0c;其他问题也会发挥作用。 其中之一是可见性。 关键事实是&#xff0c;如果没有同步&#xff0c;则不能保证指令按照它们在源代码中出现的顺序执行。 这不会影响单线程程序中的结果&#xff0c;但是&#…

让element-ui的输入框聚焦的4种方式

方法一、绑定ref 方法二、通过自定义事件中的事件对象 $event&#xff0c;找到input 方法三、使用自定义指令 方法四、使用原生input 方法一、绑定ref——参考yiyueqinghui <el-input v-model"form.name" ref"name"></el-input> this.$refs.n…

控制台打印三角形、菱形

一、 打印三角形 要求&#xff1a; 打印如下类似的三角形 * *** ***** ******* 效果&#xff1a;思路&#xff1a; &#xff08;1&#xff09; 空格每往下一层少一个。 &#xff08;2&#xff09; *是奇数数列&#xff0c;&#xff08;i – 1&#xff09;* 2 1 核心代码&#…

《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

此文是我的出版书籍《React Native 精解与实战》连载分享&#xff0c;此书由机械工业出版社出版&#xff0c;书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战&#xff0c;以及 React Native 与 iOS、Android 平台的混合开发底层原理…

在CloudBees上开发,测试和部署独立应用程序

CloudBees是一个云平台&#xff0c;为您的应用程序提供存储库&#xff0c;CI服务&#xff08;Jenkins&#xff09;和服务器。 因此&#xff0c;您需要开发&#xff0c;测试和部署所有内容。 有很多选项&#xff0c;例如存储库可以是Git或SVN&#xff0c;对于服务器&#xff0c;…

第五次实验

数组和指针 1. 设N个整数有序&#xff08;由小到大&#xff09;存放在一维数组中。编写函数binarySearch(),实现使用二分查找算法在一维数组中 查找特定整数item。如果找到&#xff0c;返回item在数组元素中的下标&#xff1b;如果item不在数组中&#xff0c;则返回-1。 实现方…

《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

此文是我的出版书籍《React Native 精解与实战》连载分享&#xff0c;此书由机械工业出版社出版&#xff0c;书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战&#xff0c;以及 React Native 与 iOS、Android 平台的混合开发底层原理…

React.js 入门与实战课程思维导图

原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了&#xff0c;在这里分享了课程中的思维导图&#xff0c;供大家参考。 原文发表于我的技术博客 此导图为课程中整理的重要知识点以及大纲导图&#xff0c;供大家学…

Webpack 2 视频教程 002 - NodeJS 安装与配置

原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架&#xff0c;Webpack 发布了 2.0 版本&#xff0c;此视频就是基于 2.0 的版本讲解的。 这个基本就是目前国内最好的 Webpack 2.0 最好的学习视频了&#xff0c;…

vue+elementUI 添加多个可以全选的多选框

elementUI-checkbox官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/checkbox 一、要做上面这种效果&#xff0c;首先要了解全选框中indeterminate 状态和v-model的变量的关系 参考 -Dayer-&#xff1a; <el-checkbox :indeterminate"isIndeterminate&…

WMI in C#[强类型操作]

C# 进行WMI操作的内容封装在System.Management.dll中&#xff0c;具体的在MSDN有详细描述&#xff0c;默认是用[“**’]去读取和设置属性等。 此处介绍一个自动生成强类型的包装软件&#xff0c;这样处理起来就简单了很多&#xff0c;不用在反复的查看参数等信息了。 1、 使用W…

2019年ipa发布苹果应用商店审核指南

https://baijiahao.baidu.com/s?id1623886553597961077&wfrspider&forpc ipa 发布审核指南 说明&#xff1a; 本指南为初版&#xff0c;旨在帮助非技术人员快速了解苹果ipa发布审核流程非技术的审核专员发布审核只需处理 &#xff08;五&#xff09;、iTunes connect …

GridView生成序号

一个经常碰到的情况&#xff1a;GridView需要添加一个序号列&#xff0c;并且从1开始自动编号。而数据库中的ID往往是不连续的&#xff08;会有记录被删除的情况&#xff09;&#xff0c;我们无法绑定现有字段作为编号。因此我们需要手动给GridView编号。 思路&#xff1a;在Gr…

[前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化

在前端优化中&#xff0c;js、css等文件的优化一般都是压缩的优化&#xff0c;进行合并、减小体积以达到减小请求的目的。 今天发现了一个集成在VS中的压缩插件&#xff0c;使得压缩变得比较快捷。 配置方法 首先需要去下载Microsoft Ajax Minifier&#xff0c;一路安装就可以&…

手把手教你用 elementUI 实现导航栏

elementUI导航栏官网 1. 安装 elementUI 2. 文件准备 3. 配置路由 4. 导航栏代码 一、安装 elementUI npm i element-ui -S&#xff1b; 在 main.js 中注册组件&#xff1a; import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(Elem…

vuex+element 从后台获取数据写导航栏-菜单权限

主要用到 vuex、router.beforeEach、router.addRoutes()。vuex 的使用方法可以看我的另一篇博客&#xff1a;vue笔记&#xff08;四&#xff09;vuex。 顺便安利一个 在线视频转gif图。 因为第一次用到 router.addRoutes()&#xff0c;在做这个需求的时候遇到了很多问题&…

P3393 逃离僵尸岛 最短路dijkstra

题目描述 小a住的国家被僵尸侵略了&#xff01;小a打算逃离到该国唯一的国际空港逃出这个国家。 该国有N个城市&#xff0c;城市之间有道路相连。一共有M条双向道路。保证没有自环和重边。 K个城市已经被僵尸控制了&#xff0c;如果贸然闯入就会被感染TAT...所以不能进入。由其…