css深入了然之overflow

第3遍 overflowKit质量

         overflow基本属性

                   visibel

                   hidden

                   scroll

                   auto

                   inherit

         overflow-x和overflow-y

        
overflow-x和overflow-y设置同一的值,等同于overflow。即便差异,个中贰个给予visibel,auto,另一个赋值visibel,auto
,hidden。则会被重置为auto。

 

         成效的前提

                   1.非display:inline水平!

                  
2.对应方位的尺寸限制,width/height/max-width/max-height/absolute拉伸

 

         overflow:visibel妙用

                  
IE7浏览器下,文字愈多,按钮两侧padding留白就越大。给拥有按钮添加css样式
overflow:visible

率先回 overflow基性情子

         overflow基脾品质

                   visibel

                   hidden

                   scroll

                   auto

                   inherit

         overflow-x和overflow-y

        
overflow-x和overflow-y设置同一的值,等同于overflow。假如差别,在那之中二个授予visibel,auto,另三个赋值visibel,auto
,hidden。则会被重置为auto。

 

         作用的前提

                   1.非display:inline水平!

                  
2.对应方位的尺码限制,width/height/max-width/max-height/absolute拉伸

 

         overflow:visibel妙用

                  
IE7浏览器下,文字越多,按钮两侧padding留白就越大。给全部按钮添加css样式
overflow:visible

其次回:overflow与滚动条

         滚动条出现的基准

                   1.overflow:auto/overflow:scroll 某个成分自带滚动条
<html> <textarea>

                  

         body/html与滚动条

                   无论什么浏览器,默许滚动条均出自html!而不是body标签

                   ie8+ html{overflow:auto}

                  

        
所以,即使大家想要去除页面暗许滚动条,只须要:html{overflow:hidden}

         body/html与滚动条-js与滚动中度

         包容写法

                   var st = document.body.scrollTop ||
document.documentElement.scrollTop

 

         overflow的padding-bottom缺点和失误现象

                   .box{width:400px;height:100px;padding:100px 0;
overfow:auto;}在chrome浏览器下bottom是足以滚动出来的。

         滚动条的增加率

                   盒子宽度(带滚动条)-盒子内上涨幅度 = 滚动条宽度

                   IE firefox chrome均是17像素。

         水平居中跳动问题

                   修复方法 1.html{overflow-y:scroll;}

                             2.
.container{padding-left:calc(100vw-100%);}

                             100vw – 浏览器宽度;百分之百-可用内容宽度

         自定义滚动条-webkit

                   全体部分

                            ::-webkit-scrollbar

                   两端按钮

                            ::-webkit-scrollbar-button

                   外层轨道

                            ::-webkit-scrollbar-track

                   内层轨道

                            ::-webkit-scrollbar-track-piece

                   滚动滑块

                            ::-webkit-scrollbar-thumb

                   边角

                            ::-webkit-scrollbar-corner

                   实际常用

                            ::-webkit-scrollbar{//宽度

                                     width:8px; height:8px;

                            }

                            ::-webkit-scrollbar-thumb{//拖动条

                                     background-color:rgba(0,0,0,.3);

                                     border-radius : 6px;

                            }

                            ::-webkit-scrollbar-track{//背景槽

                                     background-color:#ddd;

                                     border-radius:6px;

                            }

                   自定义滚动条-IE

                   能够使用自定义滚动插件

 

                   IOS原生滚动回调效果

                            -webkit-overflow-scrolling:touch;

其次回:overflow与滚动条

         滚动条出现的原则

                   1.overflow:auto/overflow:scroll 有个别成分自带滚动条
<html> <textarea>

                  

         body/html与滚动条

                   无论怎么着浏览器,暗中认可滚动条均来源于html!而不是body标签

                   ie8+ html{overflow:auto}

                  

        
所以,就算大家想要去除页面暗许滚动条,只必要:html{overflow:hidden}

         body/html与滚动条-js与滚动高度

         包容写法

                   var st = document.body.scrollTop ||
document.documentElement.scrollTop

 

         overflow的padding-bottom缺点和失误现象

                   .box{width:400px;height:100px;padding:100px 0;
overfow:auto;}在chrome浏览器下bottom是足以滚动出来的。

         滚动条的上升幅度

                   盒子宽度(带滚动条)-盒子内上涨幅度 = 滚动条宽度

                   IE firefox chrome均是17像素。

         水平居中跳动难点

                   修复方法 1.html{overflow-y:scroll;}

                             2.
.container{padding-left:calc(100vw-100%);}

                             100vw – 浏览器宽度;百分百-可用内容宽度

         自定义滚动条-webkit

                   全部部分

                            ::-webkit-scrollbar

                   两端按钮

                            ::-webkit-scrollbar-button

                   外层轨道

                            ::-webkit-scrollbar-track

                   内层轨道

                            ::-webkit-scrollbar-track-piece

                   滚动滑块

                            ::-webkit-scrollbar-thumb

                   边角

                            ::-webkit-scrollbar-corner

                   实际常用

                            ::-webkit-scrollbar{//宽度

                                     width:8px; height:8px;

                            }

                            ::-webkit-scrollbar-thumb{//拖动条

                                     background-color:rgba(0,0,0,.3);

                                     border-radius : 6px;

                            }

                            ::-webkit-scrollbar-track{//背景槽

                                     background-color:#ddd;

                                     border-radius:6px;

                            }

                   自定义滚动条-IE

                   能够接纳自定义滚动插件

 

                   IOS原生滚动回调效果

                            -webkit-overflow-scrolling:touch;

第三回:overflow与BFC

         清除浮动,自适应布局等。

 

         BFC block formatting context 块级格式化上下文

                   页面之结界,内部因素在怎么折腾都影响不到外面。

 

                   overflow与BFC

                            1.排除浮动影响

                            2.防止margin穿透难题

                            3.两栏自适应布局

                   内部浮动无影响

                            .clearfix{*zoom:1;}

                           
.clearfix:after{centent:”;display:table;clear:both;}

                   制止margin穿透难点

                            设置overflow:scroll

                                overflow:auto

                                overflow:hidden

                   为啥有那般特征?

                            流体特性下自适应布局

                                     1.左浮动,右普通

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;background-color:#beceeb}

                                     2.左浮动,右margin

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;margin-left:150px;background-color:#beceeb}

                                     3.左浮动,右padding

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;padding-left:150px;background-color:#beceeb}

                                     4.左浮动

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;overflow:hidden;background-color:#beceeb}

                  
给div设置了overflow属性便是将成分BFC化,使用padding做流体自适应布局时候,万万不可让自适应层BFC化。

 

                   是还是不是具有BFC属性都有这么表现

                            yes.由于本人特点,具体表现不一

                            overflow:hidden;      自适应,单溢出不可见限制使用场景

                            float + float 包裹性+破坏性
不可能自适应,块状浮动布局

                            position:absolute 脱离文档流,自娱自乐

                            display:inline-block 包裹性,无法自适应

                            display:table-cell
包裹性,但天生无溢出特色,绝对宽度也能自适应。

                           
唯有overflow:hidden,display:inline-block,display:table-cell能使成分BFC化

 

                   两栏自适应布局

                            .cell{

                                     display:table-cell; width:3000px;
//3000保险比父元素大

                                    
*display:inline-block;*width:auto; //IE7-伪BFC特性

                            }

第三回:overflow与BFC

         清除浮动,自适应布局等。

 

         BFC block formatting context 块级格式化上下文

                   页面之结界,内部因素在怎么折腾都影响不到外边。

 

                   overflow与BFC

                            1.革除浮动影响

                            2.防止margin穿透难题

                            3.两栏自适应布局

                   内部浮动无影响

                            .clearfix{*zoom:1;}

                           
.clearfix:after{centent:”;display:table;clear:both;}

                   幸免margin穿透难点

                            设置overflow:scroll

                                overflow:auto

                                overflow:hidden

                   为啥有诸如此类特点?

                            流体本性下自适应布局

                                     1.左浮动,右普通

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;background-color:#beceeb}

                                     2.左浮动,右margin

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;margin-left:150px;background-color:#beceeb}

                                     3.左浮动,右padding

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;padding-left:150px;background-color:#beceeb}

                                     4.左浮动

                                              
.left{float:left;width:128px;}

                                              
.right{min-height:190px;overflow:hidden;background-color:#beceeb}

                  
给div设置了overflow属性就是将成分BFC化,使用padding做流体自适应布局时候,万万不可让自适应层BFC化。

 

                   是还是不是拥有BFC属性都有这般表现

                            yes.由于自个儿特点,具体表现不一

                            overflow:hidden;      自适应,单溢出不可见限制使用场景

                            float + float 包裹性+破坏性
不能自适应,块状浮动布局

                            position:absolute 脱离文书档案流,自娱自乐

                            display:inline-block 包裹性,不能自适应

                            display:table-cell
包裹性,但天生无溢出特色,绝对宽度也能自适应。

                           
唯有overflow:hidden,display:inline-block,display:table-cell能使成分BFC化

 

                   两栏自适应布局

                            .cell{

                                     display:table-cell; width:两千px;
//三千保障比父成分大

                                    
*display:inline-block;*width:auto; //IE7-伪BFC特性

                            }

第五次:overflow与相对定位

         隐藏失效与滚动固定

         overflow:hidden失效

                   .overflow-hidden{

                            width:300px;

                            height:200px;

                            border:5px solid #333;

                            overflow:auto

                   }

                   img{postion:absolute;}

         失效原因

                  
相对定位成分不总被父级overflow属性剪裁,尤其当overflow在相对定位成分及其包罗块之间的时候

                   包罗块指
“含position:relative/absolute/fixed”注脚的父级成分,没有则body成分

         怎样防止失效

                   1.overflow成分本人成为包蕴块

                   2.overflow成分的子成分成为包括块

                   3.即兴合法transform申明当作包涵块

         overflow失效妙用

                   h0{height:0;}

                   .ovh{overflow:hidden;}

                   .tr{text-align:right;}

                   .abs{position:absolute;}

                   <div class=”h0 ovh tr”>

                             <img src=”” class=”abs ml10
mt30″></img>

                   </div>

第⑩回:overflow与相对定位

         隐藏失效与滚动固定

         overflow:hidden失效

                   .overflow-hidden{

                            width:300px;

                            height:200px;

                            border:5px solid #333;

                            overflow:auto

                   }

                   img{postion:absolute;}

         失效原因

                  
相对定位成分不总被父级overflow属性剪裁,尤其当overflow在绝对定位成分及其包罗块之间的时候

                   包涵块指
“含position:relative/absolute/fixed”注解的父级成分,没有则body成分

         怎么样防止失效

                   1.overflow成分自笔者成为包罗块

                   2.overflow成分的子元素成为包罗块

                   3.随机合法transform注明当作蕴涵块

         overflow失效妙用

                   h0{height:0;}

                   .ovh{overflow:hidden;}

                   .tr{text-align:right;}

                   .abs{position:absolute;}

                   <div class=”h0 ovh tr”>

                             <img src=”” class=”abs ml10
mt30″></img>

                   </div>

第五遍:依赖overflow的体裁表现

         resize拉伸

                   css3有个属性名为resize,可以拉伸成分尺寸。

                   .resize:both     水平垂直两边拉;

                   .resize:horizontal 唯有水平方向拉伸

                   .resize:vertical   唯有垂直方向拉伸

                  
可是,此证明想要其作用,成分的overflow属性值无法是visible!

                   <button
style=”resize:both;overflow:hidden”>按钮</button>

                   那样3个按钮就能够达成拉伸效果了。

                  

                   文本域自带resize属性,因为文件域私下认可overflow:auto

                   文本域resize拖拽渔区大小是17*17像素。
也等于滚动条的尺码

                  

         ellipsis文字溢出点点点省略

                   text-overflow:ellipsis

                   <button
style=”width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden”>那是3个按钮,宽度仅200像素</button>

第八回:依赖overflow的体裁表现

         resize拉伸

                   css3有个属性名为resize,能够拉伸成分尺寸。

                   .resize:both     水平垂直两边拉;

                   .resize:horizontal 只有水平方向拉伸

                   .resize:vertical   只有垂直方向拉伸

                  
然而,此注脚想要其效力,成分的overflow属性值不可能是visible!

                   <button
style=”resize:both;overflow:hidden”>按钮</button>

                   那样2个按钮就足以兑现拉伸效果了。

                  

                   文本域自带resize属性,因为文件域暗许overflow:auto

                   文本域resize拖拽渔区大小是17*17像素。
也正是滚动条的尺码

                  

         ellipsis文字溢出点点点省略

                   text-overflow:ellipsis

                   <button
style=”width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden”>那是3个按钮,宽度仅200像素</button>

第陆遍:overflow与锚点技术

         锚点定位的面目:该变容器的轮转中度

 

         锚点对位的触发

                   1.url地址中的锚链与锚点元素;

                   2.可focus的锚点成分处于focus态;

         锚点定位的效用

                   1.神速稳定

                   2.锚点永恒与overflow选项卡技术

 

         应用场景:单页应用     

第④回:overflow与锚点技术

         锚点定位的本来面目:该变容器的轮转中度

 

         锚点对位的接触

                   1.url地点中的锚链与锚点成分;

                   2.可focus的锚点成分处于focus态;

         锚点定位的功力

                   1.神速稳定

                   2.锚点定点与overflow选项卡技术

 

         应用场景:单页应用     

相关文章

admin

网站地图xml地图