边框、填充、对齐和浮动 这部分将主要介绍使用CSS控制整个Web页面的各个方面，通常来说，会使用margin（外部）和padding（内部性增加元素周围的空间，使用align和float设置元素的相对位置...方框模型和定位 HTML中的每个元素被视为一个方框，在考虑元素的真正高度和宽度时，就必须把方框模型的所有元素都考虑在内，通过下图对方框模型有个形象的了解。...内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。...接下来讨论元素周围的内容流，首先得一个概念是当前行，其表示一个用于在页面上放置元素的不可见的行，这一行涉及页面上的元素留，当在页面的水平和垂直方向上一个接一个的排列元素时，它就可以派上用场。...CSS设计导航系统：不同于简单的项目符号或编号列表，导航元素一般会需要如下特性：用户鼠标光标会改变，以指示元素是可单击的；当鼠标悬停在元素上时，元素周围的区域会改变外观；内容区域在视觉上显得与普通文本不同
-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定...语法 属性：position 取值：absolute 配合着 偏移属性(top/right/bottom/left)实现位置的固定 5、固定定位 fixed 将元素固定在页面的某个位置处...，不会随着滚动条而发生位置移动 语法 属性：position 取值：fixed 配合着 偏移属性(top/right/bottom/left)实现位置的固定 2.浮动的效果 浮动 之后会怎么样...如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷） 3.如何清除浮动 解决方案 及 原理分析 方案1 直接设置父元素的高度 优势：极其简单 弊端：必须要知道父元素高度是多少...它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
，把每个 HTML 元素想象成盒子里面的盒子 ，你有可以有宽度和高度的内容 ，你可以在周围添加填充那个盒子来挤压内容，然后，你可以在外面添加一个边框，然后，在边框周围添加额外的不可见空间，称为边距。...CSS 中与布局和位置相关的所有内容都受框模型的影响，如果你打开 chrome 开发工具，你可以看到如何在页面上的任何元素计算框模型。 ?...它还在 HTML 中提供了有用的注释，例如当一个元素导致另一个元素溢出时，Firefox 还为 flex 和网格布局提供了非常漂亮的图形，谈到哪个布局或元素相对于彼此的位置历来是最重要的布局之一。...Grid 允许你考虑大图布局，当你将元素设置为显示网格时，它对开发人员更加友好，你可以将其子项定义为一堆列和行。 ? 列的宽度可以用网格模板列属性定义，我们在这里有三个值： ?...例如，你可能有一篇文章的首选宽度为 50%，但在小屏幕上，你希望将其固定为 200 像素或在大屏幕上固定为 800 像素，你可以通过编写将有条件地应用 CSS 的媒体查询来实现基于视口大小，唯一的问题是媒体查询会让你想要随着项目的增长而离开自己
在此布局模式中，我们可以请求几种不同类型的行为： 静态(Static) 相对(Relative) 绝对(Absolute) 固定(Fixed) 粘性(Sticky) 绝对定位元素往往因为在其他地方无法正常工作而被认为是一种...还有一点需要注意，根据我们使用的值的不同，我们可能需要「考虑元素的父级」。例如，在绝对定位元素中，该元素相对于其最近的定位布局祖先定位。...对于烤肠而言，「每个项目都可以沿着它的棍子移动，而不会干扰其他项目」： 相比之下，通过我们的主轴串联每个兄弟元素，一个单独的项目如果要移动位置，那势必会影响周围兄弟元素的。...❝这是主轴和交叉轴之间的基本区别。当我们讨论交叉轴上的对齐时，每个项目都可以随心所欲。然而，在主轴上，我们「只能考虑如何分配整个组」。...如果子元素太大而无法容纳，flex-grow没有影响，因为没有额外的空间可分配。 防止缩小 有时，我们不希望 Flex 子元素缩小。 让我们看一个例子： 当容器变窄时，我们的两个圆形被挤变形了。
避免策略： 确认是否真正需要相对偏移，而不是直接使用其他定位方式。 注意relative偏移不会影响周围元素布局，避免因此产生的布局混乱。...3. absolute定位 概述：absolute定位使元素完全脱离文档流，依据最近的一个非static定位祖先元素（或body）进行定位。...避免策略： 明确指定一个合适的包含块（父元素），并确保该父元素有除static外的定位。 考虑使用z-index来控制堆叠顺序，防止元素间的遮挡问题。...设计时考虑页面滚动情况，合理安排固定元素的位置和尺寸，避免遮挡重要内容。 实战代码示例 元素正常排列，relative元素在原位置基础上偏移，absolute元素相对于.container定位，而fixed元素则固定在浏览器窗口底部左侧。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。...1.2 Flex布局 Flex容器：Flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。...而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；随着浏览器不断兼容以及旧版本的淘汰...主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。...建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。...它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 Q33、浏览器如何确定哪些元素与CSS选择器匹配？ 浏览器从最右边（key 选择器）到左边匹配选择器。...元素的宽度是通过内容的宽度+水平填充+水平边框宽度来计算的。 在我们的盒子模型中，考虑到填充物和边框，与设计人员实际如何想象网格中的内容产生了更好的共鸣。 Q39、什么是CSS预处理器？...这些元素不会影响其他元素的位置。 固定 fixed 将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。 粘性sticky 粘性定位是相对定位和固定定位的混合。...将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。 Q41、什么是供应商前缀？
前面几篇关于 CSS 的知识，只是讲解了一个元素作为一个个体时的样式，从这篇布局内容开始，将要介绍多个元素放在一起，从总体角度确定每个元素的位置。...布局分类: 表格布局: 现在已经不用了，现在都是将表格作为一种数据展现元素，而不是布局方式 定位布局 Flexbox 布局 Grid 布局 浮动 我们已经学会了如何操纵盒子的大小及其周围的空间，在默认情况下...而浮动元素之后的第一个非浮动元素则会黏在浮动元素之前的最后一个非浮动元素之下。...其他的元素的位置则不会受该元素的影响发生位置改变。...一个固定定位元素会脱离正常文档流。
，而 Flexbox 就是一个很好的样式解决方案。...在规范中， Flexbox 被描述为用户界面设计的布局模型。Flexbox 的关键特性是 flex 布局中的项目可以增长和缩小。可以将空间分配给项目本身，或者在项目之间或周围分配空间。...相邻 flex 元素之间的间距，主轴起始位置到第一个 flex 元素的间距,，主轴结束位置到最后一个 flex 元素的间距，都完全一样。...相邻 flex 元素之间的间距，主轴起始位置到第一个 flex 元素的间距,，主轴结束位置到最后一个 flex 元素的间距，都完全一样。...那么如果我们想要完成一个跨平台项目该怎么做呢？ 我们开始从比较容易入手的方向考虑，如果采用模块化组件或是 css-in-js 的方案去完成样式的构建会是一个好的方案么？
❝欲望越大，我们需要的奔跑速度就越快；而筋疲力尽之时，便是我们幸福感滑坡之时 ❞ 大家好，我是「柒八九」。 今天，我们又开辟了一个新的篇幅 --「前端面试」。...box-sizing 属性定义了引擎应该如何计算一个元素的「总宽度和总高度」 box-sizing: content-box|border-box content-box (「默认值」)，元素的 width...space-around：每个项目两侧的间隔相等。所以，「项目之间的间隔比项目与边框的间隔大一倍」。 align-items属性 align-items属性定义项目在「交叉轴上如何对齐」。...「它的默认值为auto，即项目的本来大小」。 它可以设为跟width或height属性一样的值（比如350px），则项目「将占据固定空间」。...0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸 当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑 align-self
">W3School.com.cn description元素：对网站的一个概述，对title的补充,是meta标签之一 keywords元素：提取页面中的关键词 body 定义文档的主体，包含文档的所有内容...应用程序缓存 技巧 在了解html的标签之前首先熟悉html的命名规范和书写规范，比如html是不区分大小写的，但是建议小写；那些标签是必须闭合的；团队项目中明确命名规范，提高代码可读性 多看别人写的网站...没有比前端代码更开源的了 要考虑不同浏览器之间的兼容性问题 注意 web技术同样有“覆盖原则”，即后执行的代码结果会覆盖掉之前的代码结果。...：top，left&right，bottom（比如padding:100px 0px 50px;） outline轮廓 Outline轮廓 绘制于元素周围的一条线，在边框border的外围，起突出元素的作用...position定位 static（默认定位，元素出现在正常的流中） fixed：相对于浏览器的窗口位置是固定的 relative：相对定位 absolute：绝对定位 z-index:指定元素的重叠顺序
这两种形式的应用场景很多，例如手绘视频中有一个电视机框，视频在框内播放；再比如视频为天气预报，周围加上手绘视频的人物元素，形成人物解说的形式；再比如最常见的在视频中加入一些手绘视频元素，做成动态特效或字幕...上面例子的结合方式分别是： 1) 黑板部分为插入的视频，周围是手绘人物和手势，字幕等； 2) 电视机框内是插入的视频，周围手绘视频元素营造一个观看电视的场景； 3) 电视框内是插入的视频，手绘视频元素营造播报新闻的场景...下面先介绍手绘视频中插入视频文件的处理： 以上面前三张图为例，这种结合方式中插入的视频，都是把视频以固定大小放在了固定的位置，在设定的开始时间开始出现，播放完成后消失。...接下来是视频中插入手绘视频元素的处理： 这种情况以第四张图为例，这种方式，我们认为视频会维持原本的尺寸和帧率，而手绘视频元素，在指定时间，以指定的速度角度和指定的起始终止位置出现，动画播放完成后，或维持在原位置...上面两种方式的整体流程中，大部分流程是共通的，或者说第二种情况是第一种情况的一个特例，它指定的视频宽高就是视频的宽高，视频之外不存在手绘元素。而且视频固定出现在层级的最底层。
可以这么理解，常规流中的元素，都在同一个层上，浮动是处于常规流之上的一个特殊层，可能会对常规流中的元素有影响。但是绝对定位的元素不会，可以把每个绝对定位的框看做一个单独的图层，独来独往。...注意一点，绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。...绝对定位元素生成的包含块 一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过，绝对定位元素的内容不会在其它框的周围排列。...固定定位（Fixed positioning） 固定定位是绝对定位的一个子类。唯一的区别是，对于固定定位框，它的包含块由可是窗口(viewport)创建。...对于连续媒介，固定定位框并不随着文档的滚动而移动。从这个意义上说，它们类似于固定的背景图形。对于页面媒介，固定定位框在每页里重复。对于需要在每一页底部放置一个签名时，这个方法非常有用。
fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。 ...，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。...即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。...也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。...这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
Padding（内边距）：位于内容区域和边框之间的空白区域，可以用于控制元素内容与元素边框之间的距离。 Border（边框）：位于内边距周围的线条，用于包围元素内容和内边距。...Margin（外边距）：位于元素边框之外的空白区域，用于控制元素与其周围元素之间的距离。 理解盒子模型对于理解和掌握CSS布局非常重要。...以下是一个简单的代码案例演示，演示如何使用CSS盒子模型来控制元素的大小和位置： HTML 代码： Hello World!.../* 控制外边距的大小 */ } 在上面的代码中，我们创建了一个包含文本的 元素，并使用CSS盒子模型来控制其大小和位置。...伪元素用于表示元素的某个部分，可以在元素内部插入一些特殊的内容，并用CSS来控制这些内容的样式。 简单来说，伪类用于描述元素的状态，而伪元素用于描述元素的一部分。
虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的: 文档流（Document flow）: 浮动元素会脱离文档流，并使得周围元素环绕这个元素。...而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。...图二： float属性修饰的元素在一定程度上脱离了普通文档流的限制，只用考虑向某个方向浮动，所以会产生如图的效果。 区别来了！！！...如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空隙。而浮动元素会忽略空白节点，互相紧贴。...3.如何消除inline-block带来的空隙; 3.1 思路一： 元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。
px 单位不是一个好的选择，实际上这不是用于缩放。无论您选择什么屏幕尺寸，px 单位的尺寸都是固定的。这就是为什么边框总是首选 px 单位的原因，因为边框在所有屏幕尺寸上也保持固定。...考虑一个宽度为 500px 的盒子，里面有一个 h1 元素 .box{ width: 500px; border: 1px solid crimson; padding: 10px; } h1...元素 font-size 会根据设备大小而变化，因此元素周围的间距也将分别发生变化。...让我们考虑以下示例，其中一个子项的宽度相对于父项的大小，而另一个子项的宽度相对于根。...让我们考虑以下示例，其中一个子级的高度与父级大小有关，而另一个子级的高度与根相关。
Card详解 在详细讲解Card之前，我们考虑一下什么时候会用到Card？ 一提到Card大家第一印象就是名片，在名片中描述了一个人的相关信息，比如姓名，电话和邮箱等。...而Card就是将一组相关的信息放在一起呈现的组件。...semanticContainer是一个bool值，表示Card中的child是否都具有相同的semantic，或者说他们的类型是一致的。 最后一个参数就是child了，表示Card中的子元素。...Card的使用 通过上面的讲解，我们对Card的使用也有了基本的了解，接下来我们可以通过一个具体的例子，来看看Card具体是如何使用的。...ListTile是一个固定高度的Row，并且可以包含一个leading icon或者trailing icon。还可以包含title，subtitle还有一些点击的交互，非常的方便。
但网页中元素的大小往往是固定的，我们不能轻易调整一个元素的大小。而且如果按钮太大，感觉很奇怪。 一个更好的解决方案是在不改变按钮原始尺寸的情况下增加其可点击区域。...具体来说：我们可以使用伪元素来增加一个元素的可点击区域。 例如，这里有一个按钮。 btn 然后我们可以为它添加一个伪类。...Image 现在我们来讨论一下图片的风格。网络应用中使用的图片一般由后端提供。你可能已经与后端开发者达成协议，将图片保持在一个固定的尺寸。然后你写下这样的代码。 的默认样式是不优雅的，这里我们可以优化它。 我们可以给 img元素添加一个 onerror 事件。...无论是出于人文关怀，还是出于留住客户的考虑，你都应该设计出合适的对比度。 WCAG AA规范指出，所有重要的内容需要有4.5:1以上的色彩对比度。 这里有一个对比度检查器的工具。
之前没有充分搞清楚「限流」和「熔断」的关系。我们先来思考一个问题，生活中也有限流，为什么国庆春节长假热门景点要限流？而不是一早先开几小时，如果人多了就关几小时，人少了就再开呢？...例如，层出不穷的营销玩法，一个接着一个的社会热点，以及互联网冰山之下的黑产、刷子的蓬勃发展，更加使得这个场景变的那么的需要去考虑、去顾忌。因为随时都有可能会涌入超出你预期的流量，然后压垮你的系统。...全局数组 链表[] counterList = new 链表[切分的滑动窗口数量]; //有一个定时器，在每一次统计时间段起点需要变化的时候就将索引0位置的元素移除，并在末端追加一个新元素。...下面分享一些我个人的经验。 二、做「限流」的最佳实践 1、四种策略该如何选择？ 首先，固定窗口。一般来说，如非时间紧迫，不建议选择这个方案，太过生硬。...那么，正如古时候军队打仗一样，盾牌兵除了有小部分在老大周围保护，剩下的全在最前线。因为盾的位置越前，能受益的范围越大。 分布式系统中最前面的是什么？接入层。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
