css深入理解之overflow

最新推荐文章于 2021-08-04 01:23:10 发布
最新推荐文章于 2021-08-04 01:23:10 发布
阅读量78 收藏
点赞数
原文链接：http://www.cnblogs.com/zhongke/p/6597248.html
版权

第一回 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

weixin_34401479
关注
overflow: hidden; 如何隐藏上面部分
12-26
overflow: hidden; 如何隐藏上面部分的实现方式 纯html代码，举例说明思路 <div style="width: 100px;height:100px;overflow:auto"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
css中text-overflow属性与文本截断详解
09-27
本文将深入探讨`text-overflow`属性以及与文本截断相关的技巧。 ### text-overflow 属性 `text-overflow`属性在CSS Basic User Interface Module Level 3中定义，标准值包括`clip`和`ellipsis`。`clip`会简单地...
css transform scroll,html - CSS Transform scale scrolling issue - Stack Overflow
weixin_27215337的博客
08-04 336
I am creating a web app that uses CSS' transform scale property. As shown by the image below, I have an object inside of a container, which fits nice and snugly inside, without any overflowing content...
深入理解之overflow属性（第五期）
奔跑的面条博客
03-19 1万+
一、overflow特征 overflow-x：hidden;/ overflow-y：hidden;，当一方被隐藏的时候，另一方会自动变成visible； IE7浏览器下，文字越多的时候，按钮两侧的padding空白会越大。解决方法：给所有按钮添加overflow：visible; 二、overflow与滚动条 无论什么浏览器，默认滚动条来自于HTML，而不是body。 body/html...
overflow溢出处理
路漫漫~
05-03 4万+
overflow 属性规定当内容溢出元素框时发生的事情 overflow: hidden:隐藏 visible:出现，默认 scroll:滚动条 auto:自动隐藏出现滚动条 IE存在一个bug，当宽高特别小的时候显示效果不一致，可以使用overfollow:hidden来处理。 为了 保证不出问题，在reset.css的.cls 下添加 overfollow:hid
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
在CSS布局中，`overflow:hidden` 是一个非常重要的属性，它可以解决多种布局问题，包括隐藏溢出的内容、清除浮动以及防止margin坍塌。...理解和熟练运用 `overflow:hidden` 对于优化和维护CSS布局至关重要。
CSS深入学习之让你认识不一样的margin
09-24
为了深入理解margin，文章从几个方面详细介绍了margin的用法和常见问题。 首先，文章对margin的基本概念进行了讲解。我们通常所说的margin指的是物理级别的设置，实际上CSS还提供逻辑级别的设置，如start、end、...
CSS属性探秘系列(二)：overflow及相关属性text-overflow
09-25
在本文中，我们将深入探讨`overflow`及其相关的属性`overflow-x`、`overflow-y`和`text-overflow`，理解它们的用法和应用场景。 首先，我们来看`overflow`属性。它的主要功能是定义当内容超出元素的边界时，浏览器...
StackExchange开源WebSocket类库NetGain.zip
07-19
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
html显示base64的pdf,html - base64 embeded PDF files won't render in Chrome - Stack Overflow
weixin_33047553的博客
06-25 1849
Some PDF files won't render in Chrome browser but will render fine in Firefox. All files render fine in all browsers if emeded directly.The confusing part is that the problem is only for some files an...
Element Form表单动态增删改
qq_29050279的博客
04-02 2075
html <el-form-item v-for="(item, index) in dataForm.discounts" :label="'里程折扣' + index" style="position: relative;" required> <el-col :span="11"> <el-form-item :prop="'discounts.' ...
2021年常见web前端面试题
Time_Flies_lei的博客
04-27 6087
2019精选面试题.notehttps://blog.csdn.net/weixin_34099526/article/details/91461153 1、Vue实现数据双向绑定的原理是什么？ 2、这些年解决过那些困难问题 3、平时通过什么途径提升自己 4、vue响应式原理 5、prosy的优缺点 6、怎样监听数组 7、计算属性和watch的区别 8、vueX简述 9、vuex可以做什么 10、在vue遍历数组时，请简述:key的作用? 11、虚拟dom与真实dom的区别 11、1
overflow:hidden对于溢出到padding的内容不隐藏
m0_37828249的博客
06-24 1万+
盒子模型的内容区域其实包括content+padding，即padding box，虽然正常情况下元素只在content内排布，但是当内容溢出到padding也是允许的，故overflow:hidden对此不做影响。 利用这个特性，我们可以使用div的padding为图片占位，防止图片加载出现抖动现象： &lt;div class="wrapper"&gt; &lt;img ...
overflow实现隐藏滚动条同时又可以滚动
qq_29069777的博客
10-28 542
.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-...
resize属性研究
whqet
11-09 3773
resize属性是[CSS3 UI](http://www.w3.org/TR/css3-ui/)中的一个属性，允许用户调整元素的尺寸。今天通过一个图像对比案例来简要学习下。
overflow:hidden;与position搭配使用出现超出部分没有隐藏的问题
热门推荐
xhbd_933的博客
04-24 4万+
overflow 属性规定当内容溢出元素框时发生的事情。以下是overflow可能的值及其作用的简单描述值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflo...
css3自由缩放属性—resize
越努力，越幸运！
03-03 1414
在resize属性出来之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。resize属性主要是通过拖动的方式来改变元素尺寸大小的，其主要目的是增强用户体验。 resize属性值 属性值 说明 none 用户无法拖动调整元素的尺寸。 both 用户可拖动调整元素的高度和宽度。 horizontal 用户仅可...
dm.jdbc.driver.DMException: 第 1 行, 第 37 列[comment]附近出现错误: 语法分析出错
程序员青戈
10-21 2万+
最近使用国产数据库达梦，遇到一个大坑。 数据库有一个字段名称叫comment，sql是这样的： CREATE TABLE "CFGC"."CFG_LABEL" ( "ID" INT NOT NULL, "COMMENT" VARCHAR(765), "DEF" CHAR(21), "NAME" VARCHAR(96) NOT NULL, PRIMARY KEY("ID")) 可是在使用jpa的时...
深入理解CSS溢出机制及其应用
了解溢出机制有助于解决元素未受祖先元素`overflow:hidden`影响、滚动条归属不明以及如何添加或控制滚动功能等问题。 CSS溢出机制涉及以下几个关键点： 1. **溢出定义**：当一个块级容器（如div）内的内容超出其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值