-
图片设置 position:absolute; 后，若父元素不是包含块（即position:relative/absolute/fixed），则父元素的 overflow:auto/scroll/hidden失效查看全部
-
两栏自适应布局： .cell{ display:table-cell;width:2000px; //IE8+ BFC特性 *display:inline-block; *width:auto; //IE7- 伪BFC特性 } 01. 2000px 可以保证自适应层永远自适应外部的容器，只要外部容器长度不超过2000px ，如果不放心，可设置为9999px 02.*display:inline-block 针对于IE7-的浏览器，只适用于block 元素，例如 div , p，这些元素可以让IE7-的浏览器BFC 化，但又不会包裹收缩 03.实现可以无限内嵌，不会受场景限制的两栏自适应布局方案查看全部
-
综合下来，能使用的有 overflow:hidden; display:inline-block; display:table-cell;查看全部
-
如果出现这种效果，可以反思是否 同时 使用了 padding 和 BFC化查看全部
-
两栏自适应布局需要隔开时，推荐在左浮动的元素上添加 margin-right .left{ float:left;margin-right:22px; }查看全部
-
流体特性下的自适应布局（以下都给右边 div 里 狗狗img 设置clear:both;）： 1.左浮动，右普通 2.左浮动，右magin 3.左浮动，右padding 【推荐】4.左浮动，右overflow - 需要块状布局（含狗狗图片）与浮动图片（妹纸）完全独立开来查看全部
-
<div id="div1"> <div id="div2"> <img /> </div> </div> 此时img 有margin-top:30px;，但div2并不包括那30px; 使用 overflow:scroll/auto/hidden 可让div2 包括30px; 【注】overflow 只是万千方法中的一个查看全部
-
常用清除浮动影响 .clearfix{*zoom:1;} .clearfix::after{content:'',display:table;clear:both;}查看全部
-
给父元素设置 overflow:hidden/auto/scroll; 可修复父元素塌陷查看全部
-
overflow 能触发BFC 常见应用： 1.清楚浮动影响 2.避免margin 穿透问题 3.两栏自适应布局查看全部
-
ellipsis 溢出 配合 overflow 案例查看全部
-
ellipsis 溢出 配合 overflow 使用查看全部
-
resize 默认大小查看全部
-
滚动条会占用容器的可用高度和宽度 .box{w400px;overflow:scroll;} .in{*zoom:1;/*IE7*/} div.box>div#in.in console.log(400-document.getElementById('in').clientWidth); 结果IE7+chrom+firefox（win7）均是17px overflow:auto;的潜在布局隐患； 滚动条会占用，原本和谐的布局，滚动条出现后可能挂掉 解决：预留滚动条宽度，或者自适应布局 水平居中跳动问题(滚动条出现后)； .container{width:1000px;margin:0 auto;} 解决：html{overflow-y:scroll;} .container{width:1000px;padding-left:calc(100vw - 100%);} 自定义滚动条-webkit 自定义滚动条-IE（基本没有必要） jquery自定义滚动条插件（兼容IE8+） IOS原声滚动条回调效果 -webkit-overflow-scroll:touch; 第三回：BFC?（块级格式化上下文） visible(不会触发) auto scroll hidden\ 内部浮动无影响：只有visible不会触发 .clearfix{*zoom;}查看全部
-
overflow: visible:IE6会活生生的撑开父标签（其他浏览器不会撑开显示） scroll：(整个页面纹丝不动，一直都有滚动条) auto：（超出则显示滚动条） IE8+: overflow-y = overflow-x 时相当于overflow 不同时：其中一个为visible；另外一个为auto，hidden等,visible会重置为auto overflow-x:hidden;(水平方向隐藏，竖直方向显示滚动条) overflow-y:hidden; 兼容性： overflow起作用必须：（不是display:inline） width:100%(IE7下可能会出现滚动条，不应该这样写) table-layout:fixed(解决IE7下表格td尺寸不固定的原因) IE7下，文字越多两侧padding留白越大 解决：（添加：）overflow:visible; 无论什么浏览器，默认滚动条都来自html而不是body body默认.5em（大概8px） margin值 IE7 默认html（overflow-y:scroll注意是类似）； IE8 默认html（overflow:auto） 所以去除默认滚动条（html{overflow:hidden}）即可 而不是（html,body{overflow:hidden}）因为滚动条来自html body/html和滚动条-js滚动高度 chrome:document.body.scrollTop; 其他浏览器：document.documentElement.scrollTop; 建议使用：var st = document.documentElement.scrollTop || document.body.scrollTop; overflow的padding-bottom缺失的现象； .box{width:400px;height:100px;padding:100px 0;overflow:auto;} 只用在google浏览器下，padding-bottom才会显示； 这样就会导致scrollHeight 元素高度不一样查看全部
举报
0/150
提交
取消