美文网首页
CSS布局基础

CSS布局基础

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

    相关文章

      网友评论

          本文标题:CSS布局基础

          本文链接:https://www.haomeiwen.com/subject/zvrhnqtx.html