CSS基本概念—文档流（Normal Flow）

2020-04-22 846 阅读3分钟

写CCS代码一定要加border！加border！加border！

流动方向

inline元素从左到右，到达最右边才会换行；
block元素从上到下，每一个都另起一行；

注：div是块级元素，即使给它们指定宽度也只占一行；
inline-block也是从左到右；

注：inline-block元素不会像inline元素一样出现头在上一行，尾在下一行的情况，inline元素一定是成块的，既具有inline的特性又兼顾了block；

HTML5里面不再将元素分为块元素和内联元素，所有元素可以随便改样式。你给它一个display:block;他就是一个块元素，你给它一个display:inline;它就是内联元素，无论元素本身是哪类元素。

宽度

inline宽度为内部内联元素宽度的和，不能用width指定，（设置了等于没设置）；

注：不要在inline元素里面用block的元素，不要写就对了；
block默认自动计算宽度（宽度是自动适应而不是100%的），可用width指定；

注：永远不要写<div style="width: 100%;"></div>
inline-block：默认不指定宽度的情况下，宽度是和inline元素一样，根据内容而定；设定宽度时，又和block一样，可以设定。

高度

inline高度由line-height间接确定，跟height无关；

相关误区：

注：padding只是撑高了可视高度，div的高度才是实际的span高度；

注：span的高度是由行高确定；行高会继承，所以你可以将行高写在div里面；

注：至于为什么说是间接确定，跟字体有关系，具体可以参考大佬的解释；

block高度由内部文档流元素决定，还可以设置height;
inline-block跟block类似，可以设置height;

overflow溢出

当设置的高度小于内容所需要的高度时，解决方案：

用overflow: hidden直接隐藏溢出部分：

注：默认情况下是overflow: visible（直接显示溢出部分，就放在那里，不管）；
用overflow: scroll设置滑动显示：

注：scroll有个bug，就是即使你没有溢出，它也会显示滚动条；
overflow: auto灵活设置：

注：解决scroll的bug，只有当你超出的时候才会显示滚动条；

思考：

overflow里面横着的滚动条什么时候会出现？

没错，就会你想的那样，给div1里面加个文档流元素，而且是有自己宽度的文档流元素，如图效果：

注：如果有横向滚动条，内联元素默认只在第一屏显示，后面是留空的。

如果div里面什么都没有，那么div的高度就是0，但是如果是span元素里面什么都没有，它是会存在高度的，因为span的高度是由line-height决定的

overflow还分overflow-x和overflow-y；

脱离文档流

第一种脱离文档流的方法：（这里演示的是将“你好”脱离文档流）
```
span{
   position: absolute;
}
```
注：还有position: fixed;
第二种脱离文档流的方法：
```
span{
    float: left;
}
```

只要你脱离文档流，那么你所在的容器就不会将你算在行高里面。