博客
关于我
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/

    你可能感兴趣的文章
    memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
    查看>>
    memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
    查看>>
    Memcached:Node.js 高性能缓存解决方案
    查看>>
    memcache、redis原理对比
    查看>>
    memset初始化高维数组为-1/0
    查看>>
    Metasploit CGI网关接口渗透测试实战
    查看>>
    Metasploit Web服务器渗透测试实战
    查看>>
    MFC模态对话框和非模态对话框
    查看>>
    Moment.js常见用法总结
    查看>>
    MongoDB出现Error parsing command line: unrecognised option ‘--fork‘ 的解决方法
    查看>>
    mxGraph改变图形大小重置overlay位置
    查看>>
    MongoDB可视化客户端管理工具之NoSQLbooster4mongo
    查看>>
    Mongodb学习总结(1)——常用NoSql数据库比较
    查看>>
    MongoDB学习笔记(8)--索引及优化索引
    查看>>
    mongodb定时备份数据库
    查看>>
    mppt算法详解-ChatGPT4o作答
    查看>>
    mpvue的使用(一)必要的开发环境
    查看>>
    MQ 重复消费如何解决?
    查看>>
    mqtt broker服务端
    查看>>
    MQTT 保留消息
    查看>>