# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...class="son3">son3div> div> 结果 # 绝对定位absolute (拼爹型) 当position属性的取值为absolute时...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 固定定位的元素跟父亲没有任何关系，只认浏览器。...# 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
当没有设置宽高时，会根据其显示模式 display 来决定其默认宽高。...除了正常宽高外，还有其他一些可选项配置： min-width, min-height, max-width, max-height 借助这些配置，可以达到一些当窗口大小变化时，变化到一定程度改变原有元素的表现行为...，比如某张图片本来居中显示，但当窗口缩小到比图片还小时，图片就根据窗口进行缩小，此时就可结合 max-width 来实现。...应用： 弹窗框 压盖（角标之类） fixed 固定定位 固定定位参考点就是浏览器的左上角，不管页面如何发生滑动，元素显示的位置都没有发生改变。...这个属性其实就是用于当元素发生重叠时，决定由谁盖在上面，默认值为0，值越大，越上层。 而会发生元素重叠的现象也就只有使用了 position 调整了元素的位置，以及浮动元素两种场景。
当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解，如何创建 BFC？...在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时，需要计算浮动元素的高度 4. BFC 区域不会与浮动的容器发生重叠 5....• 区别： • px: 固定像素，无法跟着页面大小而改变 • em: em 和 rem 相对长度单位，长度不是固定的，会跟着页面大小而改变，更适用于响应式布局 • em 相对于父元素来设置字体大小，而...rem 是相对于根元素来改变的 • 使用场景： • 适配少部分的移动设备，且对分辨率对页面影响大小的可使用 px • 适配各种移动设备，使用 rem 21....entry.intersectionRatio; // 重叠区域占被观察者面积的比例（被观察者不是矩形时也按照矩形计算） entry.target;
，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。...注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。...标记清除： 定义和用法：当变量进入环境时，将变量标记”进入环境”，当变量离开环境时，标记为：”离开环境”。...，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。...标记清除： 定义和用法：当变量进入环境时，将变量标记”进入环境”，当变量离开环境时，标记为：”离开环境”。
在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。 hidden 和关键字 none 类似，不显示边框。...在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。 dotted 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。...当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。 outset 显示为有突出效果的边框，样式与 inset 相反。...当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。...使用 window.devicePixelRatio 可以查看当前窗口的设备像素比。在浏览器里按CTRL++或-，是可以改变这个值的。
如何将盒子模型从默认的content-box改为border-box？ 可以使用CSS的box-sizing属性来改变盒子模型的计算方式。...CSS盒子模型计算盒子宽度和高度时，默认情况下是包括了所有这些部分的大小。可以通过box-sizing属性来改变盒子的盒模型，让它只包括内容区域和内边距的大小，或者只包括内容区域的大小。...10px; background-color: #ccc; } @media (max-width: 768px) { .item { width: 100%; } } 在上述代码中，当浏览器窗口宽度小于等于...768px时，项目的宽度将变为100%。...通过创建BFC可以解决一些常见的布局问题，例如清除浮动、防止边距重叠、实现两栏自适应布局等。 仓库地址：https://github.com/webVueBlog/WebGuideInterview
前言在项目中使用 ECharts 遇到了一些问题，包括图表不会随着窗口大小变化而变化，以及父组件向子组件传值时，ECharts 中的值不会被同步渲染等，因此写本博文进行记录；博文中的所有代码全部收集在博主的...图表自适应在上述构建的场景中，图表并不会随着窗口大小的变化而变化，如下所示：为了实现图表的窗口自适应功能，我们需要监听窗口的大小变化，并且同时调整图表的大小，代码如下所示：mounted() {...，如果窗口大小发生改变，则调用 resizeChart() 方法，resizeChart() 方法中使用了 ECharts 自带的调整图表大小的方法 resize()；运行结果：不过眼尖的读者已经发现了...>然后，设置组件的 props 配置，这些 props 允许在父组件中给子组件传递数据，同时也为这些属性提供了默认值以防止属性未被传递时出现错误，代码如下：props: { className: {...这是因为，当父组件需要通过异步 AJAX 请求获取数据来设置子组件的 props 属性时，可能会遇到子组件渲染速度快于 AJAX 请求返回的情况。
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？....main { overflow: hidden; } 当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。...防止垂直 margin 重叠 p { color: #f55; background: #fcc; width: 200px;...因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。 原文
当第一个带有时间戳的元素落入12:00至12:05时间间隔内时，Flink 创建一个新窗口，当时间戳到达 12:06 时，窗口将被删除。...触发策略可能是”当窗口中元素个数大于4时”，或”当 watermark 到达窗口末尾时”。触发器还可以决定在创建窗口和删除窗口之间的什么时间内清除窗口内容。...3.1 滚动窗口 滚动窗口分配器将每个元素分配给固定大小的窗口。滚动窗口大小固定且不重叠。例如，如果指定大小为5分钟的滚动窗口，每五分钟都会启动一个新窗口，如下图所示: ?...还有一个window slide参数来控制滑动窗口的滑动频率(译者注：窗口滑动大小)。因此，如果滑动大小小于窗口大小，则滑动窗口会重叠。在这种情况下，元素会被分配到多个窗口中。...当会话窗口在一段时间内没有接收到元素时会关闭，即当发生不活动的会话间隙时。会话窗口分配器需要配置一个会话间隙，定义了所需的不活动时长。当此时间段到期时，当前会话关闭，后续元素被分配到新的会话窗口。
伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。...与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 position: sticky（CSS3） 粘性定位，该定位基于用户滚动的位置。...在常态时,它的行为就像 position:relative，遵循常规流。 当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置， 脱离常规流。...可能原因： 使用import方法导入样式表 将样式表放在页面底部 有几个样式表，放在html结构的不同位置 原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。...原理：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题
当设置为box-sizing:content-box时，将采用标准模式解析计算； 当设置为box-sizing:border-box时，将采用怪异模式解析计算。...比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。...fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值 （2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。
进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 resize() 浏览器窗口的大小发生改变...写一个简单的两个嵌套div来演示一下看看，如下： ? ? 进入子元素也会触发mouseover()事件，那么如果#small的div没有嵌套在里面是否会触发呢？ 这样应该就不会。 ?...测试发现，mouseenter()这个事件，移动到子元素#small div也是会被触发的。 那么如果重叠起来，子元素进入会不会触发呢？ ?...当子元素在父元素内部的时候，mouseenter()就只会触发一次而已。也就是刚刚进入父元素#big div的时候触发，再进入#small div的时候就不会触发了。...当两个元素嵌套在一起的时候，只有父元素触发了事件。 下面来看看不在一起的时候。 ? ? 可以看到，#small div会将事件冒泡给#big div，导致触发mouseleave()事件。
我们可以基于窗口大小来等比例地缩放字号，而不是固定为 14px，或者将网页上的任何元素的大小都相对于基础字号来设置，然后只用改一行代码就能缩放整个网页。...当列表多级嵌套并且给每一级使用 em 定义字号时，就会发生文字缩小的现象。...在横屏时，vmin 取决于高度；在竖屏时，则取决于宽度。 /* 生成了一个大正方形，不管如何缩放浏览器，它都能在视口中显示。...这样做的好处在于元素能够在这两种大小之间平滑地过渡，这意味着不会在某个断点突然改变。当视口大小改变时，元素会逐渐过渡。 不过对于过大或者过小屏幕上，可能会有不适，不过可以通过 calc 修正。...继承有一个怪异特性：当一个元素的值定义为长度（px、em、rem，等等）时，子元素会继承它的计算值。当使用 em 等单位定义行高时，它们的值是计算值，传递到了任何继承子元素上。
块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 行内盒子：原本的宽度默认和内容一样宽，直接设置高宽无效，但是添加浮动后，它的宽度和高度可以直接设置，无需用display...一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。 这是因为浮动会脱标，导致不和标准流在一起排序了，这样就可能导致浮动和标准流发生重叠。....element { position: absolute; top: 50%; left: 50%; } 固定定位 固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动...1.行内元素添加定位，可以直接设置高度和宽度 2.块级元素添加定位，如果不给宽度或者高度，默认大小是内容的大小。...浮动元素不会压住标准流文字 浮动元素会脱标，当它压住标准流时，文字不会被压住，会环绕在周围显示。 而定位元素脱标压住标准流时，文字会被压住。
本文最后更新于 688 天前，其中的信息可能已经有所发展或是发生改变。...因此，1em的默认大小是16px。...移动相对定位元素，但它原本所占的空间不会改变。...absolute 定位的元素和其他元素重叠。...重叠的元素 z-index属性指定了一个元素的堆叠顺序 一个元素可以有正数或负数的堆叠顺序 overflow 属性用于控制内容溢出元素框时显示的方式。 值 描述 visible 默认值。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。...visibility:hidden：该元素隐藏起来，但不会改变页面布局，不会触发该元素已经绑定的事件。...display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明，长度为底部边框的一半。...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度...，视窗宽度是100vw 这里是视窗指的是浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；BFC的区域不会与float的元素区域重叠；计算BFC的高度时，浮动子元素也参与计算；BFC...就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；BFC的应用防止margin发生重叠防止发生因浮动导致的高度塌陷怎么生成BFCfloat的值不为none；overflow...IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。...IFC的应用水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。...简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。... 页面： 这个时候我们根据最后一条： 计算BFC的高度时，浮动元素也参与计算。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。...同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
所以下图2个box2发生了重叠 ? 绝对定位的定位对象是从它的父元素找是否有relative/fix/absolute。...2、遇到的坑： （1）、父元素z-index值更高，无论其子元素的z-index值大小，都可以覆盖z-index值比父元素小的元素。 （2）、如果z-index的值为auto，不会构成叠层上下文。...如下去掉div3的z-index，div3的子元素div4和div6都直接和div3同级的div1/div2相互叠层。demo ?...（3）、父子关系的z-index 如何设置，不影响它和 box 的堆叠顺序。但我发现如果不设置父元素的z-index，然后再把子元素的z-index值设置为负数。父元素就会直接覆盖子元素。...四、固定定位 position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。 比如说浏览器右边 回到顶部的按钮就是采用的固定定位。
[image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距...color: #fff; float: left; width: 200px; margin: 0 20px 0 0; } 通过给左侧文字设置向左浮动实现文字环绕效果是很常见的做法，当文本足够长时...invisible默认值之外的任何有效值都能创建BFC解决这个问题，使父元素包含浮动元素 .outer { overflow: auto; } [enter image description here] BFC防止垂直外边距重叠...外边距折叠的规则是：当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向上的外边距会产生重叠 html div class="outer"> I am paragraph one...如下图： [enter image description here] 当父元素设置了BFC之后，父元素与子元素p重叠区域将不再合并 .outer { background-color: #ccc;
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
