CSS布局基础
2019-04-27 本文已影响0人
小废柴JH
- 块级元素高度由其内部文档流元素的高度总和决定的。
- 文档流是文档内元素的流动方向，行内元素从左往右，块级元素从上往下。
- 行内元素从左往右流动。如果流动遇到阻碍，换行继续流。
- 行内元素，英语字母，则不会分开，会一直往前顶,但是可以使用word-break属性强行使英文分开。
- 块级元素每个块占一行，所有的块依次从上往下流。
- 可以使用display:inline-block属性把块级元素，一行多个，不推荐使用。使用float-left也可，推荐使用。
- 除非不得已，否则不用height和width，会出现bug。
- 行内元素不接受宽高。可以使用display:inline-block，把行内元素转换成块级元素，这样就可以了。
- 设置padding后，可能会造成在不同设备上值不同，可以设置一下line-height来确定行高。
- 块级元素里没有设置高度，就是0；但是不写width，会自适应。
- 目前了解到的脱离文档流的三种方法：position：fixed可以脱离文档流，相对于窗口定位；而position：absolute是相对于祖先的第一个position：relative定位；还有就是float。
- 写height会出现bug，可以通过不设置height，而去设置line-height，然后再去设置padding。
- position取值有static; relative; absolute; fixed; sticky.
- 给 display: inline 元素设置宽高是无效的。给 display: inline 元素设置 margin-top margin-bottom 是无效的。
- 文档流的英文是 Normal Flow。
