overflow+文档流

子元素默认是存在父元素的内容区，理论上讲子元素的最大可以等于父元素内容区大小，

如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容

父元素默认是将溢出的内容在父元素外边显示

通过overflow可以设置父元素如何处理溢出内容

可选值：

visible 默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示

hidden 溢出的内容，会被修剪，不会显示

scroll 会为父元素添加滚动条，通过拖动滚动条来查看完整内容，无论内容是否溢出，都会添加水平和垂直双方向的滚动条

auto 根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7
 8         </script>
 9
10     <style type="text/css">
11         .box{12            background-color: #bfa;
13            display: block;
14            width: 200px;
15            height: 200px;
16            overflow: auto;
17         }
18         .box2{19             display: inline-block;
20             width: 400px;
21             height: 400px;
22             background-color: aquamarine;
23         }
24
25     </style>
26
27     </head>
28     <body>
29
30             <div class="box">
31                 <div class="box2">容，我们称为溢出的内容
32
33 父元素默认是将溢出的内容在父元素外边显示
34
35 通过overflow可以设置父元素如何处理溢出内容
36
37 可选值：
38
39 visible 默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
40
41 hidden 溢出的内容，会被修剪，不会显示
42
43 scroll 会为父元素添加滚动条，通过拖动滚动条来查看完整内容，无论内容是否溢出，都会添加水平和垂直双方向的滚动条
44
45 auto 根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加
46
47 </div>
48             </div>
49     </body>
50 </html>

文档流

处在网页的最低层，它表示的是一个页面中的位置
我们创建的元素都处在文档流中
元素在文档流中的特点
块元素
1.独占一行，自上向下排列
2.在文档流中的默认宽度是100%，，默认值是auto
当元素的高度或宽度的值为auto，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.在文档流中只占自身的大小，会默认从左到右排列，如果一行中占不下，会换到下一行，继续自左向右

转载于:https://www.cnblogs.com/zuiaimiusi/p/11206886.html

overflow+文档流相关推荐

CSS基础知识（display和visibility、overflow、文档流）
9.显示与隐藏 u display属性: (1)none:隐藏元素,不会再占有页面的任何空间,即不会影响布局. (2)inline:默认值.将元素[显示]为内联元素 (与HTML元素本身无关 ...
html脱离标准文档流,关于css脱离标准文档流的两种方式
所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. 不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个浮动一个不浮动,则浮动的盒子会覆 ...
文档自动排序长短_css 文档流
一个重要的观点!!! 元素部分inline元素和block元素!!! 元素可以通过以下3种来改变默认的属性. display:inline(内联元素) 流动方向:从左到右排列,直到这一行排满,会出现折 ...
HTML 文档流和文本流的理解
文本流,概括地说其实就是一系列字符,是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而position属性可以将元素从 ...
html的绝对定位脱离文档流吗,子元素设置绝对定位之后脱离文档流！
子元素设置绝对定位之后脱离文档流之后父容器宽高都为都不撑开了. 很多时候都是宽高都是0: 子元素设置绝对定位如何让子元素自己撑开高度? 下面的这个子元素设置绝对定位后,父元素宽高都为0 了. 如何让 ...
【Hello CSS】第六章-文档流与排版
作者:陈大鱼头 github: KRISACHAN 正常流什么是"正常流"? 其实就是我们日常所说的"文档流". 在W3C官方文档里对应的是"nor ...
css无效 https_【CSS非全解02】CSS基础-文档流
基本概念文档流 mdn 块.内联.内联块? margin合并两种盒模型文档流 Normal Flow 流式布局 mdn 文档流动方向从左到右:"https://developer.m ...
脱离标准文档流(1)---浮动
浮动标准文档流标准文档流分为三种:块级元素,行内元素. 标准文档流无法做到使两个盒子并排放在一起. 我们可以通过使块状元素或者行内元素转化为行内块元素,来做到将两个和盒子放到一排. 小偏方运用d ...
你不知道的 CSS 文档流技巧，让布局更简单
看文章之前,先来看两个例子.这是我们在项目中最常见的项目布局方式. 案例一:多个容器按照相同间距水平排列. 案例二:常见的菜单导航看到这两个案例时,你可以先短暂的想想平时都是如何实现的,很多同学的答 ...

overflow+文档流

overflow+文档流相关推荐

最新文章

热门文章