今天做文件上传功能，需求要求文件内容相同的不能重复上传。感觉这个需求挺简单的就交给了一位刚入行的新同学。等合并代码的时候发现这位同学居然用文件名称相同和文件大小相同作为两个文件相同的依据。...从概率上来说遇到两个文件名称和大小都一样的概率确实太小了。这种判断放在生产环境中也可以稳定的跑上一阵子，不过即使再低的可能性也是有可能的，如果能做到100%就好了。...文件Hash校验 如果两个文件的内容相同，那么它们的摘要应该是相同的。这个原理能不能帮助我们鉴定两个文件是否相同呢？...我又把yml文件的内容作了改动，断言就false了。这证明了单个文件的情况下，内容不变，hash是不变的。...任何两个内容相同的文件的摘要值都是相同的，和路径、文件名、文件类型无关。 文件的摘要值会随着文件内容的改变而改变。
此外，添加边距、内边距和边框不会减小内容区域的总大小。 box-sizing 还有另一个值，称为border-box。 设置时会减小内容区域的大小。...简单来说，它就像一个显示文本、图像、视频等的框，通过使用宽度和高度等属性来调整大小。内容区包含元素的主要内容。内容包括文本、图像或视频。 2、填充： 填充在其边界内围绕元素创建空间。...填充左：填充顶部：填充右：填充底部： 3、边框： 边框在元素周围创建分隔线或空间，标记元素的结束。填充和内容包含在其中。边框可根据要求定制。...Flex box Firefox 开发工具： 与 CSS 网格类似，firefox CSS 开发工具也使使用 flex-box 布局更容易。...可以使用像 1/ span 4 这样的跨度来编写相同的内容。
background-color 设置背景颜色 background-image 设置背景图片 background-position 设置背景图片显示位置 background-repeat 设置背景图片如何填充...，外边距是透明的（两个值：第一个值上下，第二个值左右） Border(边框) - 围绕在内边距和内容外的边框 Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右） Content...、对齐和分配空白空间 弹性盒子只定义了弹性子元素如何在弹性容器内布局 CSS3弹性盒内容： 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 弹性容器通过设置...（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） 子元素上的属性 flex：flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 flex-container...三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 一个值： 四个圆角值相同 阴影：box-shadow 向框添加一个或多个阴影
box box1"> ... 1、背景图法 通过背景图的 background-position 属性，可以使图片居中显示。...同样 background-size 的 contain （完整显示）和 cover （填充）属性也能起到相同的效果。...2、object-fit object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，不支持IE。...可用属性： fill 不保持纵横比缩放图片，使图片完全适应 contain 保持纵横比缩放图片，使图片的长边能完全显示出来 cover 保持纵横比缩放图片，只保证图片的短边能完全显示出来 none 保持图片宽高不变...设置 height: 100%; 为图片全部填充，这时候需要给图片的容器添加 overflow: hidden; 属性，防止图片超出。
弹性容器 display:flex使容器扩展至整个可用宽度。 这点与 display:inline-flex相反，它使容器缩小到内容的宽度。 ?...这两个选项的相反属性使主轴反转180°。 交叉轴保持不变。 可以通过下图观察这些值的 flex-items 行为： ?...可以通过设置项目的 width:33.3333％来填充整个容器： ? 但是如果你希望在子div 之间有一个间隙，它们就不会按照你想的那样换行： ?...它接受与align-items和'auto'相同的值。 auto选项通过 align-items将 align-self重置为容器全局定义的值。...flex-grow：如果有额外的空间，每个项目应该如何放大 flex-shrink：如果没有足够的空间，应该如何缩小每个项目 flex-basis：在设置上述两个属性之前，该项目的大小应该是多少 flex-grow
本指南完整解释了弹性盒子（Flexible Box）的所有内容，重点介绍了父元素（弹性容器）和子元素（弹性项目）的所有不同可能属性。 提示 快速参考手册经常参考本指南？...Flex 布局的主要思想是赋予容器调整其项目宽度/高度（和顺序）的能力，以最佳填充可用空间（主要是适应各种显示设备和屏幕尺寸）。一个弹性容器会扩展项目以填充可用的空闲空间，或缩小它们以防止溢出。...使用 safe 确保无论你如何进行这种类型的定位，都不会将元素推到屏幕外（例如，推到顶部）以至于内容无法滚动到（称为“数据丢失”）。...center：项目在横轴上居中对齐 baseline：项目对齐，使它们的基线对齐 safe 和 unsafe 修饰符关键字可以与所有这些关键字结合使用（尽管请注意浏览器支持），并帮助你防止对齐元素使内容变得不可访问...项目均匀分布，周围有相等的空间 stretch：行拉伸以占据剩余空间 safe 和 unsafe 修饰符关键字可以与所有这些关键字结合使用（尽管请注意浏览器支持），并帮助你防止对齐元素使内容变得不可访问
text-align text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。...父亲元素宽度的百分比 10.盒子模型 box-sizing CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。...取值： row：flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。 row-reverse：表现和row相同，但是置换了主轴起点和主轴终点。...column：flex容器的主轴和块轴相同。...取值： flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。 flex-end：所有行从垂直轴末尾开始填充。
它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来，更简便、完整、响应式地实现各种页面布局。...它的主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。 任何一个容器都可以指定为 Flex 布局。...这里我们先设置每个项目都是固定宽度，效果如下: 下面就去掉每个项目的高度，它会占满整个交叉轴，效果如下: （2）flex-start: 从交叉轴开始位置填充 （3）flex-end: 从交叉轴结尾位置填充...flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。...，即当有剩余空间时，项目宽度为其内容的宽度，最终尺寸表现为最小内容宽度。
随着 CSS Flexbox 布局的普及，开发者们开始更多地使用 justify-content 和 align-items 这两个属性来解决这个问题。...: flex-start; } 如上图所示，justify-content: center; 使元素在水平方向居中；align-items: flex-start; 使元素垂直方向靠近顶部。...: flex-end; } 如上图所示，justify-content: flex-start; 使元素在水平方向居左；align-items: flex-end; 使元素在垂直方向靠底。...比如我们希望某些元素靠近并且与其他元素保持一定的间距就会比较麻烦了。...示例 2：实现等宽子项的平均分布 在很多情况下，我们需要将商品卡片或其他内容等宽地分布在每一行中，使每个子项都具有相同的宽度并且平均分布，每一行都是从左到右。
item之间在一个容器中分配的控件，即使它们的大小是未知的，或者是动态的，所以单词命名flex(弹性工作制的) flex布局可以使容器更改其item的宽度，高度，以便最好地填充可用空间，或者收缩它们来防止溢出...image .box-row-reverse { display: flex; flex-direction: row-reverse; } column: flex容器的主轴与当前写入模式的块轴方向相同...，伸缩项如何沿伸缩容器的主轴对齐。...否则，行上的伸缩项的分布使行上任意两个相邻伸缩项之间的间距相同，并且第一个/最后一个伸缩项与伸缩容器边缘之间的间距为伸缩项之间间距的一半。...属性定义的轴垂直的轴上有额外空间时，flex项目的行如何在flex容器内对齐。
HTML 元素，它包括：边距，边框，填充，和实际内容，可以简单表述为 盒模型由 content，padding，margin，border 几部分组成。...属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 的区域不会与 float box 重叠。 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...4>使用 flex 设置外层盒子为display:flex;align-items:center中间盒子设置flex:1 1 auto左右盒子在盒子内部设置内容有大小即可。...，元素状态保持为最后一帧的状态。...，元素状态保持为第一帧的状态。
弹性容器 display: flex 使容器拓展整个可用宽度；与之相对的，display: inline-flex 使容器宽度塌陷至与内容宽度相等。 ?...对这两个值添加 reverse ，则主轴将反转 180°，而交叉轴保持不变 [1][2]。 可以通过下图观察这些值对应的弹性项目行为： ?...如果有两个或者两个以上的组，那么各组将会相对于它们的整数值进行排序 [4]。 在下面的例子中，有三个顺序组， -1， 0 和 1，它们按照如下顺序排列。...该属性和 align-items 拥有相同的可选值，但是还多了一个 ‘auto’ [5]。...flex-grow：如果有额外空间，每个项目应该如何伸展 flex-shrink：如果空间不足，每个项目应该如何收缩 flex-basis：在设置以上两个属性之前项目的大小 flex-grow 该属性设置的是弹性增长系数
实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。...Rhythm） 一致的垂直节奏提供了一种视觉美学，使内容更具可读性。...Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。...; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone;} 内联块声明允许将颜色、背景、页边距和填充应用于每行文本...无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。 15、风格破碎的图像 这个技巧不是关于代码缩减，而是关于细化设计细节的。
此属性控制在分解为列时如何平衡元素的内容。...元素在默认情况下是如何布局的？ 首先，取得元素的内容并将其放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距——就是我们所说的盒子模型。...例如，在父内容里面垂直居中一个块内容;使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同等场景下使用浮动和定位可能难以实现。...如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。...主轴起点和主轴终点与内容方向相同。 row-reverse ：表现和 row 相同，但是置换了主轴起点和主轴终点 column ：flex 容器的主轴和块轴相同。
实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。...Rhythm） 一致的垂直节奏提供了一种视觉美学，使内容更具可读性。...Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。...clone; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone; } 内联块声明允许将颜色、背景、页边距和填充应用于每行文本...无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。 ? 15、风格破碎的图像 这个技巧不是关于代码缩减，而是关于细化设计细节的。
这应该意味着您不必使用margin属性在Flex内容元素之间控制间距，而是可以使用网格布局的方式。...盒子将继续保持原先的物理属性，唯一的差别就是横着摆放或者竖着摆放。 我们现在有了新的逻辑属性和值，使我们能够调整元素大小或引用它们的边距，填充和边框，即使写入模式发生变化(writing-mode)。...回到我们上一个示例，我们可能希望我们的box框始终具有250像素的长度，而不管方向如何。 这些新属性是在写入模式下(writing-mode)运行的方式——水平布局，在任何垂直书写模式下水平布局。...如果是垂直滚动，start指的是元素的顶部边缘。如果是水平滚动条，它指的是左边缘。center和end遵循相同的原则。你可以为滚动条的不同方向设置不同的值，这两个值之间用空格分隔开。...min-width: 40em)and(max-width:59em){ / *CSS rules for screen sizes between 40em and 59em*/ } 复制代码 新规范使我们能够使用以下语法并实现相同的功能
，一般叫做清浮动(清理浮动、清除浮动) 清浮动的目的是 让父元素计算总高度的时候，把浮动子元素的高度算进去 如何清除浮动呢?...认识flex布局 认识flexbox Flexbox翻译为弹性盒子: 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ; 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间; 通常我们使用Flexbox...比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。...于是世界就明亮了起来. flexbox在使用时, 我们最担心的是它的兼容性问题: 我们可以在caniuse上查询到具体的兼容性 2.2. flex布局重要的概念 两个重要的概念: 开启了 flex 布局的元素叫...axis 方向的 size 为 auto 时，会 自动拉伸至填充 flex container flex-start:与 cross start 对齐 flex-end:与 cross end 对齐
html 内容，首先是一个常规的 div，接着是两个使用了 float 样式的 div，其中一个背景色为绿色，使用 margin-top 表示距离顶部的距离为 10px（此处用于查看接下来的一个知识点）...在盒子模型中还有一个属性box-sizing，box-sizing有两个值，一个是默认状态下的content-box，另一个是border-box；这两者的区别为，默认状态下为 content-box... 以上代码创建了两个样式，一个是 flex 另一个是 box，当然 flex 中暂时并未设置弹性布局，在此留着备用，接下来的 box 设置了基础的宽高...flex-grow flex-grow 属性可以使其伸缩项（子元素）按照其空间内剩余内容进行扩充，例如如下代码： 该代码我设置了其伸缩项每个宽度为 100px，那么肯定不会填充满该行，当在某一项中设置了...给予不同的值将会占据不同的剩余空间，相同的值则会均分。
前言 弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。 2. 相关术语 ?...弹性项目Flex item 弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。 轴Axis 每个弹性框布局包含两个轴。...如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或高（取决于主轴的方向）的尺寸大小。初始值为auto。...auto：基于 flex 的元素的内容自动调整大小。...取值 row：flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
flex-flow : 它是 flex-direction 和 flex-wrap 两个属性的缩写，其属性值设置, 值为 row wrap 或者 row 单用。...grid-auto-rows 属性: 默认是 auto大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。 grid-gap 属性：同时定义网格的列、行间隙，若想单独定义请看下面两个属性。...此属性控制在分解为列时如何平衡元素的内容。...来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。...column-fill - 列平衡元素内容 描述: 该CSS属性控制在分解为列时如何平衡元素的内容。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
