CSS 文档流技巧
作者:
懒懒猫 | 来源:发表于
2021-08-10 16:52 被阅读0次
文档流
- 文档流：是引导网页中的元素排列和布局的，它默认的方向是从左向右，从上而下。
- 而「流」具有最大的一个特点就是自适应性。
- 文档流中有两个比较重要的概念：块级元素（block）、内联元素（inline），对应到最具代表性的元素就是<div>、<span>。
- 块级元素默认会充满整个屏幕，具有自适应性，而内联元素默认则是水平排列。
你可以想象为块级元素就想是水流一样充满容器，而内联元素就是漂浮在水里按照从左到右排列的物体。
失去流动性
span {
display: block;
width: 100%;
}
- 如果明白流的特性的话，其实 width: 100%; 这个属性是多余的，因为块级元素在流布局中默认是自动充满容器的。
- 一旦你给元素添加了宽度（width）属性，它就会失去流动性，即便是它的值为 100%，也是会失去。
- 尽量少用宽度，甚至是「无宽度」。
参考自：https://zhuanlan.zhihu.com/p/64190768
本文标题：CSS 文档流技巧
本文链接：https://www.haomeiwen.com/subject/ajucbltx.html
网友评论