-
圖片設置 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 能觸發(fā)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(不會觸發(fā)) auto scroll hidden\ 內部浮動無影響：只有visible不會觸發(fā) .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
提交
取消