，缩小到手机大小，就会发现阅读很难，一行放不下几个字，尤其是左侧的简介部分，如果屏幕过大，这么多字就放一行，阅读起来也会变的困难 Pasted image 20230605151021.png 那既然设计给了固定的尺寸...、grid等现代的方式进行，本质是通过参照容器的空间大小，缩小或者放大每个元素分布的空间，达到动态平衡，更改flex-grow以及flex-shrink的值，达到预期的效果 而grid是一种二维的方式进行布局...，这两者都可以达到动态更改元素所占空间大小的方式，然后再通过一些相对单位进行内容的填充，常用的一些相对单位 1vw - 窗口宽度的1%，当窗口宽度减小的时候，1vw表示的大小也会对应减小 1vh - 窗口高度的...1%，当窗口高度减小的时候，1vh表示的大小也会对应减小 vmin - 选择最小的vw和vh vmax - 选择最大的vw和vh rem rem的方式当前是不推荐的，因为有更好的方式，rem的方式在屏幕变化不大的情况下很有用...，值可为数字或关键词device-width表示设备宽度，intial-scale页面首次被显示是可视区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放，可以通过maximum-scale和minimum-scale
轴 容器中的 主轴 和 交叉轴 在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴排列 常用属性: flex-direction 属性 flex-direction 属性设置容器主轴的方向...flex-wrap属性 flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。...align-items 属性 align-items定义了项目在交叉轴上(上->下)是如何对齐显示的 flex-start:交叉轴的起点对齐 flex-end 交叉轴的终点对齐 ?...媒体查询 作用： 感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示； ? 使用的话可以放在 中 ,也可以引用 ?...02. rem rem是一个相对单位，类似于em，：让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候 ?
设置宽或高 100% 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。...，要么就会留有空白，除非容器的宽高比恰好等于图片的宽高比时，才会完全贴合。...JS计算缩放 首先给定一个基准高度 图片获取基准高度下的宽度，然后计算每一行能够放入多少张 此时每一行图片肯定会小于容器宽度，然后这一行进行缩放到容器大小。在重新计算放大后的高度。...Flex布局 首先给图片一个固定高度，然后利用flex-grow的比例分配的特性 给图片设定object-fit属性让其保持比例充满容器 <div class="waterfall-height-css...: 99999; } } 因为flex-grow: 99999的值非常大，所以会把最后一行的剩余空间几乎全部占用，导致图片分配不了，只会按照原尺寸显示，就不会缩放占满一行啦。
若要使用弹性盒布局，需要先设置div的display:flex;即将div这个对象作为弹性伸缩盒显示(容器)。弹性容器默认在第一行显示，即它的弹性属性是：flex-direction:row。...；stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 flex-wrap 如果一条轴线排不下，如何换行 nowrap（默认）：不换行；wrap：换行，第一行在上方；wrap-reverse...，在屏幕上显示时用无衬线字体。...@media screen and (min-width:960px){ body{ background:orange; } } // 这里表示当窗口尺寸大于960px时，body的背景颜色是...比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。
当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。...元素的位置在屏幕滚动时不会改变。...flex-direction CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。...取值： flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。 flex-end：所有行从垂直轴末尾开始填充。...常用取值： auto：flex: 1 1 auto none：flex: 0 0 auto 14.响应式布局 media查询 当屏幕宽度满足特定条件时应用css。
设置宽或高 100% 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。...，要么就会留有空白，除非容器的宽高比恰好等于图片的宽高比时，才会完全贴合。...JS计算缩放 首先给定一个基准高度 图片获取基准高度下的宽度，然后计算每一行能够放入多少张 此时每一行图片肯定会小于容器宽度，然后这一行进行缩放到容器大小。在重新计算放大后的高度。...Flex布局 首先给图片一个固定高度，然后利用flex-grow的比例分配的特性 给图片设定object-fit属性让其保持比例充满容器 <template> <div class...: 99999; } } </style> 因为flex-grow: 99999的值非常大，所以会把最后一行的剩余空间几乎全部占用，导致图片分配不了，只会按照原尺寸显示，就不会缩放占满一行啦
不过，它仍然没有达到完全一致，有很多小问题会让你出错。除了这些问题之外，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素，我们从中发现了许多会让开发者出错的小问题。...添加 flex-wrap 要想让一个元素表现得像弹性容器那样，只需添加 display: flex。但是，如果没有添加 flex-wrap ，那么当屏幕尺寸缩小的时候，将会出现水平滚动条。...右边：项目换行，呈两行显示 解决方法很简单。wrapper 应该在空间不足时让项目换行。...当弹性项目数量不定时，不要使用 justify-content: space-between 对一个弹性容器应用 justify-content: space-between 时，它会为元素分配空间，使它们互相之间的距离相等...当视窗高度不足时将元素固定在屏幕顶部 如果你在视窗不够高的时候将一个元素固定在屏幕顶部，会发生什么事呢？
弹性盒，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，弹性盒属于 CSS 3 部分，IE9 以下不支持，现代浏览器指的就是 IE9 及以上的浏览器在定义方面来说...，默认值为 0flex-shrink:1;指定了 flex 元素的收缩规则，子项的收缩所占的份数，默认值为1 当所有子项相加的宽度大于父项的宽度，每个子项减少的多出的父项宽度的 1/n felx-basis...,33.333%] 时，最多 3 个子项一行，值为 (20%,25%] 时，最多 4 个子项一行，上面的例子中 flex-basis 的值为 20%，即每一个子项占据该行宽度的 20%，一行可排列 5...个子项，但我们一共有 10 个子项，将 10 个子项都排在一行，会导致溢出 flex 容器所以我们在父级添加了 flex-wrap 属性，指定 flex 元素单行显示还是多行显示，默认不换行，值为 nowrap...，当弹性容器只有一行时无效，当设置 flex-wrap:wrap; 并出现换行 多行 才生效，该属性与在 main 轴上对齐方式的 justify-content 属性类似值描述stretch拉伸所有行来填满剩余空间
由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。...，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。...align-content 定义多根轴线的对齐方式 容器内的子元素增加，布局所占的系数：如： <div class...、内边距，还有外边距，三个 child 始终排列在一行。...绝对单位：长度是固定的值，反应物理真实尺寸。如：px像素，一个像素相当于我们屏幕的一个小点，屏幕实际就是由很多个像素点组成的，不同显示器像素大小不同。还有cm、mm、in等等。
使得当 HTML 页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。...尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸。 对应侧轴的称为侧轴尺寸。...flex-flow: || flex属性 CSS flex 属性是一个简写属性，用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间...|| ] auto：伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 1 1 auto”。...none：伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 0 0 auto” 。
三、元素如何弹性伸缩应对 当flex-wrap: nowrap;不折行时，容器宽度有剩余/不够分，弹性元素们该怎么“弹性”地伸缩应对？...这里针对上面两种场景，引入两个属性(需应用在弹性元素上) flex-shrink：缩小比例（容器宽度<元素总宽度时如何收缩） flex-grow：放大比例（容器宽度>元素总宽度时如何伸展） 1. flex-shrink...在不折行的情况下，此时容器宽度是明显不够分配的。 实际上，flex-shrink默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度，如下图。...flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑...当align-items不为stretch时，此时除了对齐方式会改变之外，元素在交叉轴方向上的尺寸将由内容或自身尺寸（宽高）决定。
">Flex item 3 创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类: 实例 <div class="d-inline-flex p-3 bg-secondary...根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反 排序 .order-*-0-12 在小屏幕尺寸上修改排序 内容对齐 .justify-content-*-start 根据不同屏幕设备在开始位置显示弹性子元素...-start 根据不同屏幕设备，让元素在头部显示在同一行。....align-items-*-end 根据不同屏幕设备，让元素在尾部显示在同一行。 .align-items-*-center 根据不同屏幕设备，让元素在中间位置显示在同一行。....align-items-*-baseline 根据不同屏幕设备，让元素在基线上显示在同一行。 .align-items-*-stretch 根据不同屏幕设备，让元素延展高度并显示在同一行。
（1)、降低图片的大小、选择适当的图片宽度尺寸，压缩图片，选择更小kb的图片格式，以达到最优的显示效果。...还可以使用flex-wrap来规定当一行排列不下时的换行方式。...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 32、什么是外边距重叠？重叠的结果是什么？
圣杯布局 头部(header)和尾部(footer)各自占领屏幕所有宽度。 中间的部分(container)是一个三栏布局。 三栏布局两侧宽度固定，中间部分自动填充整个区域。...和 right 的前面； 先定义好 header 和 footer 的样式，使之横向撑满； 给 container 设置相对定位，让子元素根据他进行定位； 设置 container 部分的内边距，让其居中显示... 其它知识点 圣杯布局由于设置了相对定位，所以当 left 原来的位置和 right 的位置产生重叠时，由于浮动的原因一行放不下就会换行，当页面小于最小宽度时布局就会乱掉...双飞翼布局会一直随着浏览器可视区域宽度减小从而不断挤压中间部分宽度。所以需要设置给页面一个 min-width > LeftWidth + RightWidth。...为啥 flex 和 gird 这么大行其道，却还要知道如何用 float 布局呢？
弹性项目 当为 .containerdiv 设置 display: flex 时，所有的直接子 div 将成为弹性项目，并且获得新的行为 [2]： 由于 flex-direction 默认值为 row，...弹性换行 当容器空间不足以容纳全部弹性项目时，利用 flex-wrap 属性处理弹性项目 [3]。...当第一行的宽度不足以容纳 300px 时，项目不再溢出容器外，而是会换行 [3]。每一行都应该被视为是一个独立的弹性容器，任何一个容器内的空间分布均不会影响与之相邻的其他容器 [2]。 ?...通过给项目设置 width: 33.3333%，容器能够完全被填满。 ? 但是当你让子 div 之间有空隙时，它们将不会像预期的那样进行换行： ?...下图中，项目的 flex-grow 属性设置为自身的内容值。 ? flex-shrink 当容器没有足够空间来容纳所有项目时，使用 flex-shrink 处理项目大小。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。...弹性子元素通常在弹性盒子内一行显示。默认情况下每个容器只有一行。...imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 容器宽度：200 弹性子元素宽度：100 html: flex item flex item 如果每个弹性子元素设置宽度...如果设置为0，那么父容器分配分配之前，对每个子元素的默认尺寸都视之为0，剩余空间也就是父容器的全部空间，其结果是，直接按照flex-grow值的比例分配子元素整体的大小； 如果设置为auto，那么父容器会将每个子元素中的内容作为子元素默认尺寸
此外，width可以将项目减小到其最小尺寸以下，而flex-basis则不能。 ❞ flex-grow 默认情况下，Flex 上下文中的元素将缩小到它们在主轴上的「最小舒适尺寸」。...无论如何，最终效果都是相同的。 ❞ 对flex-shrink：我们可以将其视为flex-grow的“反面”。它们是同一硬币的两面： flex-grow 控制当项目小于其容器时额外空间的「分配方式」。...如果子元素太大而无法容纳，flex-grow没有影响，因为没有额外的空间可分配。 防止缩小 有时，我们不希望 Flex 子元素缩小。 让我们看一个例子： 当容器变窄时，我们的两个圆形被挤变形了。...Flexbox 算法将flex-basis（或width）视为硬最小限制。 7. 最小尺寸的陷阱 假设我们正在构建一个搜索表单： 当容器缩小到一定程度以下时，内容溢出！...flex-wrap属性允许我们改变这一点。 如果容器宽度不能包含子元素的话，子元素会被隐藏。 我们可以通过设置flex-wrap:wrap来让子元素自动换行。
假定 main.gallery 覆盖整个可见屏幕。....gallery { min-height: 100vh} 有关图片的快速标记 图片默认是一个 inline-block 元素，有宽高，通常排列在同一行（除了图片尺寸有限定，一行排不下的情况）。...由于子元素排列需要更大的宽度，所以子元素不能在父元素内排列时就会换行。 接下来我们给 .card 元素一个初始宽度。...Flex 容器的默认值 上面的布局效果是由于 Flex 容器的默认布局设置。 卡片在页面内靠左上角对齐，因为 justify-content 的值默认为 flex-start。...> 1 每个 .row 都是自己的 Flex 容器。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
