如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框 解决： 1.设置overflow:hidden; 2.高度自增height:auto!...; 3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom 4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow...子容器浮动后，父容器扩展问题 问题： 子容器都float以后，父容器没有设定高度,父容器将不会扩展 解决： 只需要添加一个clear:both的div，代码如下： <div style="border:...<em>子</em><em>容器</em>宽度大于<em>父</em><em>容器</em>宽度<em>时</em>，内容超出 问题： <em>子</em>DIV<em>的</em>宽度和<em>父</em>DIV<em>的</em>宽度都已经定义，在IE6中如果其<em>子</em>DIV<em>的</em>宽度大于<em>父</em>DIV<em>的</em>宽度，<em>父</em>DIV<em>的</em>宽度将会被扩展，在其他浏览器中<em>父</em>DIV<em>的</em>宽度将不会扩展...，<em>子</em>DIV将超出<em>父</em>DIV 解决： 设置<em>overflow</em>:hidden，<em>子</em>DIV将不会超出<em>父</em>DIV。
; 屏幕可用工作区宽度：window.screen.availWidth; scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度...需要注意的是，DIV和P这一对包含元素，都需要设置position为absolute才能得到想要的结果，假如父元素不设置，则子元素的参照将是更上层定义过position的元素，直到整个文档； 2. posTop... container.scrollTop = 12; 这一段文本在这个100*100的DIV内无法完全显示，所以设置了overflow为auto，它会出现一个上下方向的滑动框...而设置了scrollTop值为12后，滑块的位置改变了，默认显示是卷过了12个象素的文本。如果设置overflow为hidden，则将会无法显示顶部12个象素的文本。...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
可能你在学习 flex 时第一个接触到的就是 flex-wrap。 Flex Wrap 让我们添加 flex-wrap:wrap 来看看它是如何改变 flex 项的行为的。...基本上，它只会扩展容器高度并将物品包裹起来。 注意：即便是未指定容器得高度（auto/unset）仍然会这样。...wrap 如果你有一些内容大小未知且数量也未知的项目，并且希望在屏幕上全部显示它们时，这是一种常见模式。 可以用 flex-direction: row-reverse 来反转项目的实际顺序。...当涉及 flex 的开箱即用的响应区域时，首先要确保尽可能使项目的宽度保持相同。...但是在 flex 中，在两个维度中使用 space-evenly 值会对内容自动调整，即使项目的高度可变： 完美的对多个不同高度的项目垂直对齐 以上是对未来10年最常用的响应式 flex 的描述（开个玩笑
值，保证总宽高不变 II.padding不允许设置负值 III.背景可以延伸到padding区域 IV.当需要调整子元素在父元素中的位置关系时，可以通过给父元素设置padding来实现 容器溢出 一、容器溢出...溢出部分的内容以滚动条的形式查看，如果没有溢出，显示默认的滚动条 auto 容器溢出时显示滚动条 inherit 规定从父元素继承overflow属性值 还可以单独设置某一个方向的溢出： overflow-x...：简单 缺点：当子元素存在定位时，定位在父元素框之外的部分将会被隐藏掉 c) 在浮动的子元素末尾添加一个空div，并设置如下样式： .clear{clear:both;height:0;overflow...项目没有设置高度或者高度为auto，将占满整个父元素的高度 ◆ Flex项目属性 1.改变flex项目排列顺序 语法：order:0|数值; 注：默认值为0,值越小越靠前 2.设置某个flex项目不同于其他...:100px; (背景图有可能超出容器,不会发生变形) 2.百分比 以容器的百分比来设置背景图的宽度和高度 eg: background-size:100% 100%;(背景图不会超出容器，但是背景图有可能发生变形
3.破坏文档流 4.没有任何margin合并 float的作用机制 float属性使父元素高度塌陷，为了实现文字环绕效果。...BFC BFC定义 通过一些特定的手段形成的封闭空间，即BFC元素内部不会影响外部的元素。可以用来防止margin重叠，清楚浮动防止父元素高度坍塌。...URL地址中的锚链与锚点元素对应（a标签以及name属性）并有交互行为 可focus的锚点元素处于focus状态 锚点定位的本质通过改变容器滚动高度或者宽度实现的。...注意，只有原本是内联水平的元素才有这种情况 absolute与overflow 绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。...absolute的流体特性 当对立方向同时发生定位时，表现为格式化宽度，自适应包含块的padding box。具备自适应性。 margin: auto;可以让绝对定位元素居中。
定宽块级元素水平居中(方法一) 对于定宽的的块级元素实现水平居中，最简单的一种方式就是 margin: 0 auto;，但是值得注意的是一定需要设置宽度。...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 当元素开启决定定位或者固定定位时， left 属性和 transform 属性即可实现水平居中。...Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下：...使用calc函数实现 实现步骤如下： 通过 calc 函数计算出中间容器的高度。 中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。
显示模式有 3 种 ; 块级元素 行内元素 行内块元素 元素 的 浮动特性 会改变 该元素的 Display 显示模式 , 原来的 元素 不管是 块级元素 还是 行内元素 , 设置 浮动 样式后 , 其显示模式...类似于 行内块元素 ; 4、浮动元素与父容器盒子关系 在 父容器 盒子模型 中 , 将 子元素 设置为 浮动元素 , 会出现如下情况 : 浮动元素位置 : 浮动元素 会自动 浮动到 父容器盒子模型 的左上角...父容器内边距 ; 二、CSS 清除浮动 1、清除浮动 简介 在开发页面时 , 遇到下面的情况 , 父容器 没有设置 内容高度 样式 , 容器中的 子元素 设置了 浮动样式 , 脱离了标准流 , 高度会默认设置为...0 像素 的问题 ; 清除浮动 效果 : 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ; 2、清除浮动 语法 - 额外标签法 清除浮动语法 : CSS...样式可设置的属性值 : hidden auto scroll 父级元素设置 overflow 样式 清除浮动 的优缺点 : 优点 : 代码简单 缺点 : 无法显示 溢出 的元素 , 如果 子元素 很多
虽然浮动可以便于页面布局，但同时会产生一些问题，也就是常说的副作用。浮动元素最常见的缺陷是：父元素的高度塌陷和影响兄弟元素的位置。 首先 看看父元素的高度塌陷。...当容器的高度为 auto，且只包含浮动元素时，如果浮动元素的高度不相同，而剩余空间足够容纳后面的元素时，后面的元素就会上跳到剩余的空间。...因此，最常用的还是设置 overflow 属性。 1）让容器浮动 让容器浮动后，容器就会创建一个新的BFC，使它可以包含浮动元素。计算BFC的高度时，浮动子元素也参与计算。....wrapper { float: left; border: 2px dashed #ccc; } 让容器浮动后，容器的高度确实没有塌陷，但是，容器的宽度可能会发生变化，因为浮动元素的宽度是有其内容决定的...3）为容器添加 overflow 属性 如果为容器设置 overflow: hidden 或 overflow: auto，容器就会创建一个新的BFC，使它可以包含浮动元素。
（能够从根本上解决偶尔跳屏的问题，但是随之而来的就是要不断改变自身的top值 ，导致更新会慢的情况 ，用户体验不好，流畅度欠佳，遂放弃此方案 ） ⑤ -webkit-overflow-scroll:touch...当视图容器的最后一个元素设置 margin-bottom ,期望距离整个容器视图有一个距离的时候，发现在安卓手机正常，但是在ios下，会出现margin-bottom无效的情况。...在解决这个问题之前，我们先理解-webkit-overflow-scrolling的两个属性 1 auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...第一种：设置高度/宽度到安全的值 第一种方式是设置标签父容器的宽度到无bug值，即(奇数或奇数.5)2,例如2812rpx,281.5*2rpx可以解决; 第二种：放一个1rpx的元素占位。...有一个小程序跳转另外一个小程序的场景，第一次的时候没有任何问题，但是当从跳转的目标小程序，返回到当前小程序之后，第二次跳转的时候，发现跳转功能失效了，无法再次跳转。
; flex: 0 auto flex: initial -->> flex: 0 1 auto; 即flex的初始值 开发中遇到的问题 1、子元素被压缩 问题： 当设置子容器的长度flex为1时...解决方法： 设子容器width:0;可能出在于子容器没有设置宽度，省略符可能需要对父元素设置宽度，设置为100%无效，当设置为0的时候，子容器恢复到设定的宽度，省略号也出现了。...4 flex导致设置的子元素宽高失效 问题： 父级设置display:flex后，子级设置的heigth:50px失效，只是被子元素撑开了高度。 ?...5 flex布局滚动，子元素无法全部显示 问题： 父级使用flex布局，列表页设置flex:1;占满空闲空间，但是所有的列没有完全显示出来，滚动条也没有出现。 ?...使用注意 弹性布局下每一个item默认是没有间隔的。 弹性布局默认不改变项目的宽度，但是它默认改变项目的高度，align-self属性可以改变这种行为，默认值是stretch。
设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度...来龙去脉大概如下： 当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发 生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题...（待深入实践） 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为...但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。 （1）如果一侧定值，一侧auto，则auto为剩余空间大小。...（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox
鼠标hover时使一个未知高度元素的高度从0过渡到auto。 ? 本实现的思路是： 通过js提前将元素的scrollHeight保存在CSS变量--max-height中。...元素hover时max-height直接使用--max-height保存的值。...-overflow：hidden防止超出max-height范围内的子元素内容溢出容器。 -max-height：0指定元素初始的最大高度为0。...-.target：hover> .el指定当hover父级元素时，使其子节点.el的max-height为CSS变量--max-height的值。...以下两点需要注意： 由于改变高度的CSS动画会触发页面重排（reflow），所以当需要改变高度的元素内包含大量元素时，会造成动画效果滞后。 CSS变量已经得到大部分主流浏览器的支持，但是IE除外。
➡️ 父组件刷新，子组件跟着刷新。 避免不必要的组件重新渲染，是提高程序性能的重要方式之一。...❗即使一个组件被记忆化了，当它自身的状态/ context 发生变化时，它仍然会重新渲染。memoization 只与从父组件传递给组件的 props 有关。...当使用 memo 时，只要任何一个 prop 与先前的值不等的话，组件就会重新渲染。这意味着 React 会使用 Object.is 比较组件中的每个 prop 与其先前的值。...name 改变，子组件MyComponent 都重新渲染（即便使用 memo 进行了包裹） 使用 useCallback，每次父组件 name 改变，子组件MyComponent 不再重新渲染（...={{ height: '300px', overflow: 'auto', border: '1px solid' }}>
设置父容器设置超出隐藏（overflow: hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则 父容器的高度被撑到里面最高那列的高度...来龙去脉大概如下： 当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发 生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题...dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr 为2。屏幕的缩放会改变dpr的值。...但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。 （1）如果一侧定值，一侧auto，则auto为剩余空间大小。...（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox
:ellipsis：当文本溢出时，显示省略符号来代表被修剪的文本 white-space:nowrap:设置文本不换行 overflow:hidden：当子元素内容超过容器宽度高度限制的时候，裁剪的边界是...的值为absolute或fixed 应用场景 防止margin重叠 将位于同一个BFC的元素，分割到不同的BFC中 高度塌陷 --- 「计算BFC的高度时，浮动子元素也参与计算」 子元素浮动 父元素...当设置left、top为50%的时候，内部子元素为方块2的位置 设置margin为负数时，使内部子元素到方块3的位置，即中间位置 absolute + margin auto absolute +...stretch（「默认值」）：如果项目未设置高度或设为auto，将占满整个容器的高度。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。...0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸 当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑 align-self
块级元素 让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width 宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）。...: auto; } .flex-center p { margin: 0; padding: 20px; } 值得注意的是，上述方法只适用于父级容器拥有确定高度的元素。...无法获知元素的具体高度是非常常见的一种状况，比如：视区宽度变化，会触发布局重绘，从而改变高度；对文本施加不同的样式会改变高度；文本的内容量不同会改变高度；当宽度变化时，对于宽高比例固定的元素（比如图片...，同样需要设定父级容器为相对定位的容器，设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%。...: auto; } 使用 transform 有一个缺陷，就是当计算结果含有小数时（比如 0.5），会让整个元素看起来是模糊的，一种解决方案就是为父级元素设置 transform-style: preserve
2 父级添加overflow属性方法 通过出发bfc来清除浮动 overflow为hidden|auto|scroll 优点：代码整洁 缺点：内容增多容易造成不会自动换行导致内容被隐藏掉如文本等...如果决定定位给盒子指定了定位，但是没有给与偏移距离，则盒子以标准流来显示排序，和上个盒子的底边对齐但是不占位置。 （定位适用于消息提示） 布局中的子绝父相的道理。...子盒子绝对定位可以放在父盒子的任意位置不会占用位置。...而父元素在进行布局时，需要占用位置，因此父亲只能是相对定位（相对定位不会脱标，绝对定位会脱标） z-index可以改变定位元素的堆叠顺序，可以取正，负，0.数字越大定位元素在堆叠元素中越居上。...而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。 2、width:auto包含margin-left/margin-right的属性值。
为父元素添加`overflow:hidden;`，使其变为状格式化上下文元素（BFC元素） <!...2.为什么明明容器定高，子元素也定高了，margin auto 0 无法垂直居中?...image.png 上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？...因为他不满足占满整个容器这个条件，想一下，如果，没有为.son设置高度值，它之前满足占满整个容器这个条件吗？...还需要注意一点：用margin:auto来实现居中，它计算后的值必须是正直，比如说你的父容器宽度1000px，子元素宽度2000px，这时设置margin：auto它是不居中的。
一、margin与容器尺寸的关系 relative可定位，但是不改变容器尺寸和占据的空间 margin不同，margin也在盒模型中。... 父元素的宽是流体的，跟随屏幕的宽度而改变，也可以设置为固定的。...子元素的margin是百分比，随父元素的宽度改变而改变。 子元素没有文案,加了一个边框示意他的位置和处境。...3. margin重叠的计算规则 正正取大值 正负值相加：有正有负时，正负值相加得到的结果就是重叠的值 负负最负值: 重叠时，取绝对值最大的负值。...inline元素隔开来 margin-bottom重叠的另一个解决方法是父元素设置了高度，高过子元素+margin-bottom也就不会重叠 四、margin：auto; ** auto
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
