# display总结:
# inline总结: # 1.同行显示, 就相当于纯位文本, 当一行显示不下, 如就是一字显示不下, 那么显示不下的那个字会自动换行;
# 和纯文本的区别就是有纯文本的概念, 标签与标签间有一个空格隔断. * /
# 2.支持部分CSS样式, 不支持宽高 | 行高不支持(行高会映射到父级block标签) | margin上下 | 支持margin左右 * /
# 3..content由文本内容撑开 * /
# 4.inline标签只嵌套inline标 # inline-block总结:
# 1.同行显示,当一行显示不下,标签会作为整体换行显示
# 2.支持所有css样式
# 3.contebt默认由文本(图片)内容撑开,也可以自定义宽高(显示区域不足时,内容会在标签内容换行显示,可能会超出显示区域)
# 4.inline-block标签不建议嵌套任意标签 # block总结
# 1.异行显示,不管自身区域多大,都会独占一行
# 2.支持所有css样式
# 3.width默认继承父级,height由内容(文本,图签,子标签)撑开,当设置自定义宽高后,一定采用自定义宽高
# 4.block标签可以嵌套任意标签,多数作为架构和布局层出现 # overflow知识
# 本质
# overflow:处理内容超出盒子区域
# auto自适应,内容超出,滚动显示超出部分,不超出则正常显示
# scroll:一直采用滚动方式显示
# hidden:隐藏超出盒子显示范围内容

display总结 overflow知识的更多相关文章

  1. 前端(七)—— 盒模型之display、overflow、隐藏、border、margin、样式支持,层级结构

    display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...

  2. position,display,float,overflow,margin,padding之间的相互影响

    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...

  3. display:none,overflow:hidden,visibility:hidden之间的区别

    一,display:none; 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着) 二,overflow:hidden; 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高 ...

  4. 同行span标签设置display:inline-block;overflow:hidden垂直对齐问题

    1 问题描述:一个div包含 三个span 当span2 类样式设置如下图时,将导致垂直方向不对齐的情况 2解决方案: 将前面的也设置同样的样式 overflow:hidden; display:in ...

  5. display和overflow

    一.display <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. Intel WIDI (Wireless Display) 相关技术知识分析

    一. WIFI 1.如何查找WIFI设备 非p2p设备 Beacons 包(同步,SSID) 速率 1M/s 2.4G HZ 13个信道,1,6,11三个信道不重叠 2.P2P 认证 客户端在每个通道 ...

  7. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?

    这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...

  8. 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  9. Runloop基础知识

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

随机推荐

  1. Vrrp和Hsrp的区别

    VRRP原理协议简述简单来说,VRRP是一种容错协议,它为具有组播或广播能力的局域网(如以太网)设计,它保证当局域网内主机的下一跳路由器出现故障时,可以及时的由另一台路由器来代替,从而保持通讯的连续性 ...

  2. 在项目中使用react

    1. 运行 ’cnpm i react react-dom -S' 安装包 react:专门用于创建组件和虚拟DOM,同时组件的生命周期都在这个包中 react-dom:专门进行DOM操作,主要应用场 ...

  3. 删除gitlab 上的文件

  4. 如何查找php-fpm监听的端口

    1. 找到php的安装位置.如: /usr/local/php-7.3.3 2. 进入安装目录下的etc/php-fpm.d目录,然后你会看到: 3. 打开www.conf,搜索listen关键字,你 ...

  5. 笔记react router 4(一)

    用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...

  6. 小程序setData修改数组某一项的值

    官方文档是这样的: changeItemInArray: function() { // you can use this way to modify a danamic data path this ...

  7. windows配置教程

    1.卸载预装软件 2.卸载非安装的预装软件 有些软件被改成了“绿色版”软件不能通过软件列表卸载,一般在C:\Program Files (x86)目录下 可以直接删除其文件夹,如果提示文件夹无法删除则 ...

  8. 利用模板导出文件(二)之jacob利用word模板导出word文件(Java2word)

    https://blog.csdn.net/Fishroad/article/details/47951061?locationNum=2&fps=1 先下载jacob.jar包.解压后将ja ...

  9. 未能加载文件或程序集“Oracle.DataAccess”或它的某一个 依赖项。如何解决?

    之前项目做大数据批量添加使用了OracleBulkCopy,这个是引用Oracle.DataAccess.Client的命名空间,所以项目要引用一个Oracle.DataAccess.dll, 但是运 ...

  10. 运行B/s项目时,出现尝试访问类型与数组不兼容元素问题?

    1.问题描述 运行B/s项目时,浏览器出现应用程序中服务器错误(尝试访问类型与数组不兼容的元素) 2.问题原因 本人是项目引用的dll版本不一致问题,引用的System.Web.Mvc版本是4.0.0 ...