css深入理解之overflow

第一回 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 - 浏览器宽度;100%-可用内容宽度

         自定义滚动条-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:2000px; //2000保证比父元素大

                                     *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">

                            &nbsp;<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>

                   这样一个按钮就可以实现拉伸效果了。

                  

                   文本域自带resize属性,因为文本域默认overflow:auto

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

                  

         ellipsis文字溢出点点点省略

                   text-overflow:ellipsis

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

第六回:overflow与锚点技术

         锚点定位的本质:该变容器的滚动高度

 

         锚点对位的触发

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

                   2.可focus的锚点元素处于focus态;

         锚点定位的作用

                   1.快速定位

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

 

         应用场景:单页应用     

转载于:https://www.cnblogs.com/zhongke/p/6597248.html

NetGain是Stack Overflow(StackExchange)开源的一个高性能的websocket服务端类库。       它只有一个dll:StackExchange.NetGain.dll。     Stack Overflow使用 websocket 向用户推送实时的更新内容,比如顶部栏中的通知、投票数、新导航数、新的答案和评论等等。      socket 服务器本身在 web 层上运行,使用原生的 socket。这是一个基于我们的开源库实现的非常小型的应用程序:StackExchange.NetGain。在高峰时刻,我们大约有 50 万个并发的 websocket 连接,这可是一大堆浏览器。一个有趣的事实:其中一些浏览器已经打开超过 18 个月了,得找人去看看那些开发者是不是还活着。下面这张图是本周 websocket 并发量的模式:       为什么用 websocket?在我们这个规模下,它比轮询要有效率得多。通过这种方式,我们可以简单地使用更少资源来推送更多数据,而且对用户而言实时性也更高。安装:Install-Package StackExchange.NetGain代码示例:using System;using System.Net;using StackExchange.NetGain;using StackExchange.NetGain.WebSockets;namespace Example{  public class Program   {    public static void Main (string[] args)     {         IPEndPoint endpoint = new IPEndPoint(IPAddress.Loopback, 6002);        using(var server = new TcpServer())         {             server.ProtocolFactory = WebSocketsSelectorProcessor.Default;             server.ConnectionTimeoutSeconds = 60;             server.Received  = msg =>             {                var conn = (WebSocketConnection)msg.Connection;                string reply = (string)msg.Value   " / "   conn.Host;                 Console.WriteLine("[server] {0}", msg.Value);                 msg.Connection.Send(msg.Context, reply);             };             server.Start("abc", endpoint);             Console.WriteLine("Server running");             Console.ReadKey();         }         Console.WriteLine("Server dead; press any key");         Console.ReadKey();       }     }   } } 标签:WebSocket
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值