浅谈浅谈css溢出机制探究溢出机制探究
在实际开发的过程中，内容溢出是经常见到的。这篇文章主要介绍了浅谈css溢出机制探究，小编觉得挺不错
的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
为什么需要深入学习为什么需要深入学习CSS溢出机制？溢出机制？
在实际开发的过程中，内容溢出是经常见到的。如果不深入了解这个机制，你经常会碰到这样的问题：为什么这个元素没有受
到祖先元素的overflow:hidden的影响？这里出现的滚动条是哪个元素的？如果消除这个滚动条？如何在指定的元素上增加滚动
功能？
在这篇文章，我们将会从CSS标准出发，讨论CSS溢出机制的细节。
溢出溢出
当一个盒子（block container box）的内容（子元素、孙子元素等后裔）超过盒子本身的大小的时候，就会出现溢出。这个时
候CSS属性overflow决定如何处理溢出。这个css属性大家都知道，在这里不讨论了，在这里指出需要注意的几点：
overflow会影响所在元素的所有内容的裁剪、滚动，但是有一种情况例外："It affects the clipping of all of the element's
content except any descendant elements (and their respective content and descendants) whose containing block is the
viewport or an ancestor of the element." 也就是说，overflow的所在元素必须是内容元素的直接或间接containing block，这时
overflow属性才会影响这个内容元素。比如<A><B><C><C/><B/><A/>，一般来说，B的overflow会影响C，但是如果C是相对
于viewport或者A定位的（比如使用了position:absolute），那么C的显示就不受B的裁剪、滚动的影响。
当需要滚动条的时候，滚动条会放在border与padding之间。父元素产生滚动条以后，它产生的containing block的尺寸会减
少，以便给滚动条腾出空间。
在<html>和<body>上的overflow属性存在冒泡现象: "UAs must apply the 'overflow' property set on the root element to the
viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML
"BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the
first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the
viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow'
of 'visible'. "
可以推断出：
一般来说只有元素才能拥有滚动条（更准确地说，只有产生block container box的元素才能拥有滚动条）。但visual viewport
是个例外。它虽然不是一个元素，但是也可以拥有滚动条。如果在<html>和<body>上都没有设置overflow属性而使用默认值
visible（大部分场景都是这样），那么，visual viewport的overflow就是auto：当网页中有内容超出visual viewport时，visual
viewport上会出现滚动条。
<html>的最终overflow永远都是visible。也就是说，<html>元素永远不可能拥有滚动条。
如果你想要为<body>设置非visible的overflow，需要先为<html>设置一个非visible的值来冒泡，从而<body>的overflow不会被
冒泡。小练习
小练习：小练习：
利用以上原理，使visual viewport和<body>都拥有横、竖滚动条，总共4个滚动条。不能使用overflow: scroll（这样就太简单
了）。
步骤：
使visual viewport和<body>的最终overflow值都为auto，从而可以出现滚动条。
触发visual viewport和<body>的溢出。通过【为内容设置一个更大的尺寸】来做到。
代码+注释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38725531
- 粉丝: 5
- 资源: 873
我的内容管理
展开
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解：基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例：初学者入门教程
- Eclipse平台上的可视化开发：使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解：网络存储架构与管理
- 递归算法解析：文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式：用PHP编写Shell脚本教程
- MyBatis与Spring完美整合：1.0.0-RC3详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
