博客
关于我
2-2CSS概念-文档流
阅读量:197 次
发布时间:2019-02-28

本文共 840 字,大约阅读时间需要 2 分钟。

文档流与盒模型

文档流是网页元素排版的基本原则,它决定了元素的显示方式。文档流的核心规则是“从左到右,从上到下”排布。

  • 内联与块级元素内联元素(如span、a、i等)和块级元素(如div、p、h1等)在文档流中的表现有显著不同。
    • 内联元素会水平排列,若内容超出一行,则会自动换行,最后一个元素可能会被分割成两部分。
    • 块级元素则会占据整个行高,除非设置了width限制,默认情况下块级元素会自动填满当前行宽度。

    注意:不要在内联元素中嵌套块级元素,否则会导致布局混乱。

    1. 宽度控制
      • 内联元素的宽度由其内容决定,不能通过width属性指定。
      • 块级元素默认会占满整个行宽,除非设置width为某个具体值或百分比。
      • inline-block元素则会水平排列,宽度由内部内容决定,但可以通过width属性进行调整。
      1. 高度控制
        • 内联元素的高度由字体大小和行高(line-height)决定,与height属性无关。
        • 块级元素的高度可以通过height属性设置,高度范围内的内容会被截断或隐藏。
        • inline-block元素的高度控制与块级元素相同,可以通过height属性调整。
        1. 溢出处理当容器的宽度或高度有限时,内容超出部分会触发溢出。
          • overflow: auto:在超出部分添加滚动条。
          • overflow: scroll:总是显示滚动条。
          • overflow: hidden:隐藏超出部分。
          • overflow: visible:默认状态,超出部分可见。
          • overflow: none:完全隐藏溢出内容,不显示滚动条。
          1. 脱离文档流通过position属性可以让元素完全脱离文档流。
            • 使用position: absolute或fixed:元素位置由绝对值决定,不受父容器布局影响。
            • 使用float: left或right:元素会浮出文档流,但会占用父容器的空间。

            要避免的错误:

            • 不要在内联元素中嵌套块级元素。
            • 不要在块级元素中嵌套内联元素。
            • 不要在内联元素中使用display: block。

    转载地址:http://ifvi.baihongyu.com/

    你可能感兴趣的文章
    mysql中的rbs,SharePoint RBS:即使启用了RBS,内容数据库也在不断增长
    查看>>
    mysql中的undo log、redo log 、binlog大致概要
    查看>>
    Mysql中的using
    查看>>
    MySQL中的关键字深入比较:UNION vs UNION ALL
    查看>>
    mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏
    查看>>
    mysql中的字段如何选择合适的数据类型呢?
    查看>>
    MySQL中的字符集陷阱:为何避免使用UTF-8
    查看>>
    mysql中的数据导入与导出
    查看>>
    MySQL中的时间函数
    查看>>
    mysql中的约束
    查看>>
    MySQL中的表是什么?
    查看>>
    mysql中穿件函数时候delimiter的用法
    查看>>
    Mysql中索引的分类、增删改查与存储引擎对应关系
    查看>>
    Mysql中索引的最左前缀原则图文剖析(全)
    查看>>
    MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
    查看>>
    Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
    查看>>
    Mysql中视图的使用以及常见运算符的使用示例和优先级
    查看>>
    Mysql中触发器的使用示例
    查看>>
    Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
    查看>>
    mysql中还有窗口函数?这是什么东西?
    查看>>