overflow基本属性值 visible（默认值）：超出依然显示 hidden ：超出隐藏 scroll ：超出，滚动显示。子元素不超出也会有滚动条的那条轨道。 auto:如果超出，滚动显示。...所以，如果在单页应用中想要去掉页面的默认滚动条效果，只需要： html{overflow: hidden;} 没有必要设置body。因为页面滚动条不是作用在body上的。...、所以形成BFC的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了bfc的初衷，所以要清除浮动带来的影响。...利用overflow形成BFC的应用： 清除浮动影响 父元素设置overflow：auto/scroll/hidden；可以清除子元素浮动带来的影响。...并且父元素没有设置position：relative；限制子元素的时候，子元素就不受父元素overflow：hidden；的限制，即使超出也不会被隐藏了！
设置元素是否可见 设置元素的显示类型 是否占据页面空间 是 是 否 是否影响子元素 是 否 是 是否可触发绑定事件 是 否 否 是否产生回流（reflow） 否 否 是 是否产生重绘（repaint）...回流：当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流，就是在页面第一次加载的时候。...font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。...元素可见性：visibility 光标属性：cursor 内联元素可以继承的属性 字体系列属性 除text-indent、text-align之外的文本系列属性 块级元素可以继承的属性 text-indent...我们可以给图片的父元素设置 padding 来保持图片本身的宽高比。
: auto; -webkit-overflow-scrolling: touch; 4.修改滚动条样式 隐藏 div 元素的滚动条 div::-webkit-scrollbar { display...div::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb div::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置...-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用 overflow-hidden...5.使用 css 写出一个三角形角标 元素宽高设置为 0，通过 border 属性来设置，让其它三个方向的 border 颜色为透明或者和背景色保持一致，剩余一条 border 的颜色设置为需要的颜色。...visibility-hidden：元素隐藏，但元素仍旧存在，页面中无法触发该元素的事件。
hidden：超出部分隐藏。 scroll：超出可滚动。 auto：若超出才出现滚动条。 inherit：继承。...IE-7浏览器默认：html{overflow-y:scroll;} IE-8+浏览器默认：html{overflow-y:auto;} 因此想要去除页面滚动条html{overflow:hidden...滚动条的宽度机制： 滚动条会占用容器的可用宽度或高度。 ?...原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在就对定位元素及其包含块（含position:relative/absolute/fixed声明的父级元素，没有则是body...）；ⅱoverflow子元素transform（支持IE9+/FireFox/Chrome/Safari/Opera） overflow失效妙用： 菜单栏固定显示。
: 10px; } 8、实现隐藏滚动条同时又可以滚动 .demo::-webkit-scrollbar { display: none; /* Chrome Safari */ } .demo {...input{ color: #fff; caret-color: red; } 31、子元素固定宽度 父元素宽度被撑开 // 父元素下的子元素是行内元素 .wrap { white-space...: nowrap; } // 若父元素下的子元素是块级元素 .wrap { white-space: nowrap; // 子元素不被换行 display: inline-block; } 32...cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（常用） none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。...48、行内标签元素出现间隙问题 方式一：父级font-size设置为0 .father{ font-size:0; } 方式二：父元素上设置word-spacing的值为合适的负值 .father{
此时，如果我们在此父标签之后再次添加一个标签，这个标签会紧挨着上一个父标签创建(即很有可能被子标签遮挡)。这时我们就需要使用清除浮动来让父标签包住浮动的子元素。...记住哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动 具体方法为： .clearfix::after{ content: ''; display: block; clear: both;...这里有三个比较常见的： li:first-child{} //匹配父元素中的第一个子元素 li:last-child{} //匹配父元素中的最后一个子元素 最后一个为:nth-child(){}，这个伪类比较复杂...其存在5个有效值： 值 描述 visible 默认值，内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且超出的内容不可见 inherit 规定从父元素继承overflow属性的值 scroll...，设置文本超出2行就用省略号 */ -webkit-line-clamp: 2; /* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient
overflow: hidden; 容器盒子外的元素可能会被隐藏掉。 display: inline-block; IE6、7下完美，因为即BFC化又保持block也行，保留了流体特性。...但在其他浏览器下会让元素尺寸包裹收缩。 overflow overflow裁剪的边界是border box的内边缘，而非padding box的内边缘。...锚点定位发生在普通容器元素上，定位行为是由内而外的。 设置了overflow: hidden;的元素也是可以滚动的，只是滚动条不见了而已。...// 这种方式既满足视觉上的隐藏，屏幕阅读器等辅助设备又支持很好（display: none;不识别或者不可focus）。...移动端中可以使用透明度为0. .clip { position: absolute; clip: rect(0 0 0 0); } clip隐藏仅仅决定了那部分可见，非可见部分不响应点击事件等；虽然视觉上隐藏了
对于 webkit 内核的浏览器，滚动条有以下的选择器： 名称 用途 scrollbar 滚动条 - 占据指定的宽高 scrollbar-track 滚动条的轨道 scrollbar-corner 滚动条的底角...scrollbar-button 滚动条的上下按钮 mac 上俺试了没效果，读者可以在 window 上尝试下 scrollbar-thumb 滚动条上的滑块 scrollbar-track-piece...除了滑块之外的轨道 resizer 出现在元素底部可以拖动的滑块，一般跟 scrollbar-corner 位置相同 上面的名称省略前缀 ::-webkit- 上面的这些概念讲着有点抽象，我们可以看看下面的例子....div1 { overflow: hidden; /* 隐藏 x 轴和 y 轴滚动条，即隐藏滚动条 */ } .div2 { overflow-y: hidden; /* 隐藏 y 轴，即垂直滚动条...*/ } .div3 { overflow-x: hidden; /* 隐藏 x 轴，即水平滚动条 */ } 但是，这个方法有一个劣势：所在的容器是不可滚动了，但是超出的部分不可见。
将overflow-y属性设置为scroll会为超出其高度的内容创建一个可滚动的容器。超出侧边栏范围的项目将被隐藏。右侧会出现一个滚动条，允许您的网站用户查看所有内容。...将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。...让我们继续下一节，我们将讨论如何设置滚动条的样式。自定义滚动条样式您希望为网站的滚动条设置样式的原因之一是为了在整个网页上实现颜色协调。您可能希望将在网站上使用的颜色数量保持在一组最小值。...一次性样式所有滚动条。在大多数情况下，您可能希望在整个网站的所有垂直和水平滚动条上保持一致的样式。...::-webkit-scrollbar-track）不需要与任何特定的元素相关联。
作者：Matt Maribojoc 译者：前端小智 来源：stackabuse 修改 placeholder 样式，多行文本溢出，隐藏滚动条，修改光标颜色，水平和垂直居中。这些熟悉的场景啊!...方案1：设置父元素字体大小为 0 关键代码： .img-container{ font-size: 0; } 事例地址：https://codepen.io/qianlong/p......解决方案4：给父元素设置 line-height: 5px 关键代码： .img-container{ line-height: 5px; } 事例地址：https://codepen.io/qianlong...解决iOS滚动条被卡住的问题 在苹果手机上，经常发生元素在滚动时被卡住的情况。这时，可以使用如下的 CSS 来支持弹性滚动。...隐藏滚动条 第一个滚动条是可见的，第二个滚动条是隐藏的。这意味着容器可以被滚动，但滚动条被隐藏起来，就像它是透明的一样。
y-coord 是指在元素左上方区域纵轴方向上想要显示的像素。 也就是element.scroll(x,y)会将元素滚动条位置滚动到对应x,y的位置。...如果存在了滚动条，client只会计算出当前元素展示出来的高度/宽度，而scroll不仅仅会计算当前元素展示出的，还会包含当前元素的滚动条隐藏内容的高度/宽度。...，判断当前元素出现的高度 + 滚动条高度 = 元素本身的高度(包含隐藏部分)。...注意是触发元素也就是 e.target，额外小心如果事件对象中存在从一个子元素当移动到子元素内部时，e.offsetX/Y 此时相对于子元素的左上角偏移量。...element.getBoundingClientRect()返回的 height 和 width 是针对元素可见区域的宽和高(具体尺寸根据 box-sizing 决定)，并不包含滚动条被隐藏的内容。
仅供学习，转载请注明出处 css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。 3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。...那么应该怎么来处理溢出的部分呢？ 先用overflow:hidden的方式，将溢出的部分进行隐藏 ? 从上面的结果来看，直接隐藏了起来固然是好，但是有时候能不能设置为滚动条，可以下拉看看呢？
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight...、水平滚动条、margin的元素的高度。...接下来讨论出现有滚动条时的情况： 当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时： scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条...，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。 offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。
android:layout_alignParentBottom 贴紧父元素的下边缘 android:layout_alignParentLeft 贴紧父元素的左边缘... android:layout_alignParentRight 贴紧父元素的右边缘 android:layout_alignParentTop 贴紧父元素的上边缘 ...定义布局是否作为一个滚动容器 可以调整整个窗体 android:fadeScrollbars滚动条自动隐藏 android:fitsSystemWindows...“@id/id-name” android:layout_alignBaseline 本元素的文本与父元素文本对齐 android:layout_below 在某元素的下方 ...本元素与开始的父元素对齐 android:layout_alignEnd本元素与结束的父元素对齐 android:ignoreGravity 指定元素不受重力的影响
: 10px; background-color: #000; margin: 20px 0px; } /*滚动条上的滚动滑块*/ .content::-webkit-scrollbar-thumb... 7、场景七：锁定滚动链我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。...在子元素上应用overscroll-behavior: contain就可以禁止掉这一行为。...auto; background-color: skyblue; /*当滚动到滚动条底部和顶部时，会触发父元素的滚动条滚动*/ overscroll-behavior-y...当最后一行只有1个子元素时，他会默认靠左，不用处理当最后一行子元素正好时，我们就不用关心这个问题。
inline-block; white-space: nowrap; } .text{ display: inline-block; width: 100%; } 理论上父元素宽度应该是子元素宽度之和...，padding对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠...则不会，此时可以通过margin-bottom实现滚动容器的底部留白 其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding...box尺寸时触发滚动条显示 2.margin合并条件 块级元素，但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 *...端滚动条宽度约为17px 让页面滚动条不出现晃动的方法: html{ /* ie8 */ overflow-y: scroll; } :root{ overflow-y: auto
当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值 描述 visible 默认值。...内容不会被修剪，溢出部分会呈现在元素框之外 hidden 内容被修剪，溢出部分不可见 scroll 内容被修剪，无论是否溢出滚动条都会占据空间 auto 当内容溢出时会被修剪且出现滚动条，没有溢出时不显示滚动条...: 可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式 选择器 描述 ::-webkit-scrollbar 整个滚动条 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分...::-webkit-scrollbar-thumb 滚动条上的滚动滑块 ::-webkit-scrollbar-track 滚动条轨道 自定义滚动条样式代码示例: /* 整个滚动条 */ .container...{ background: #b9b9b9; } /* 滚动条上的滚动滑块 */ .container::-webkit-scrollbar-thumb { background: #E1660E;
、水平滚动条、margin的元素的高度。...接下来讨论出现有滚动条时的情况： 当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时： scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条...，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。...offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。 ?
这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅 ? ?...简单说明一下： -webkit-overflow-scrolling ：控制元素在移动设备上是否使用滚动回弹效果。 auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。...需要注意的事项： 通过动态添加内容撑开容器，结果根本不能滑动。 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动。 ...的元素添加一个子元素，设置子元素的高度为height:101%，或者为了精确一些写成height:calc(100vh + 1px),注意这个加号前后都要有空格．
其实滚动条才是最需要优化的，因为浏览器的多样性，各个浏览器在滚动条的样式上，也不统一。...滚动条 包含 滚动条包含下面7个元素: ::-webkit-scrollbar：整个滚动条 ::-webkit-scrollbar-button：下下箭头按钮 ::-webkit-scrollbar-thumb...：横向滚动条与竖向滚动条的交汇处 ::-webkit-resizer：类似textarea的可拖动按钮 位置 在日常的使用中，我们经常见到的是右侧+下边滚动条。...子div主要是用来保证父div可以出现滚动条。... 复制代码 父容器高度小于子元素高度：
领取专属 10元无门槛券
手把手带您无忧上云
