三生有幸,偶然之下知道了《CSS世界》这本书,让我产生了探究 CSS 的想法。

  

  这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理。

  可能对于我们前端开发人员来讲,一般接触到的元素就三大类:块级、行内块、行内,也因为 display 的常用属性值为正好是三个: block、inline-block、inline,我们很可能就会将概念搞混,认为 块级元素就是 display 的值是 block 的元素,内联元素就是 display 的值是 inline 的元素。

  

  而标准真的是这样规定的吗?不。细心的人可能会发现,<li> 标签的 display 值不属于 block、inline-block、inline 中的任何一个,而是 list-item,而 <table> 标签的 display 值同样不是三大常用属性值中的一个,而是 table。

  那么问题来了,<li> 和 <table> 属于块级元素还是内联元素呢?答案呼之欲出,块级元素和内联元素的定义指的是:只要符合 “独占一行” 的特性就是块级元素,而只要符合 “不独占一行” 的特性就是内联元素。

  最后推荐一下出自大神 张鑫旭 之手的《CSS世界》一书,重新定义你的 CSS 世界观。

CSS的块级元素和内联元素的概念的更多相关文章

  1. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  4. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  5. css中块级元素、内联元素(行内元素、内嵌元素)

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  6. CSS的块级元素和内联元素,以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  7. CSS 块级元素、内联元素概念

    p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong.span等元素称为行内元素,它们的内容显示在行中,即“行内框”.(可以使用display=block将行内元素转换成块元 ...

  8. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  9. CSS块级元素、内联元素概念[转]

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

随机推荐

  1. 网易2019校招内推编程题-俄罗斯方块-C++实现

    [编程题] 俄罗斯方块 时间限制:1秒 空间限制:262144K 小易有一个古老的游戏机,上面有着经典的游戏俄罗斯方块.因为它比较古老,所以规则和一般的俄罗斯方块不同.荧幕上一共有 n 列,每次都会有 ...

  2. Eclipse is running in a JRE, but a JDK is required Some Maven plugins may not work when importing projects or updating source folders.

    安装Maven后每次启动出现警告信息: Eclipse is running in a JRE, but a JDK is requiredSome Maven plugins may not wor ...

  3. openssl rsa java 大于117的长字符串加密

    package org.yood.rsa.util; import org.bouncycastle.asn1.ASN1Sequence; import org.bouncycastle.asn1.p ...

  4. C语言权威指南和书单 - 中等级别

    注:点击标题免费下载电子书 1. Object-oriented Programming with ANSI-C 2. C Interfaces and Implementations 3. 21st ...

  5. Qt 学习-----helloword

    (参考:http://www.qter.org/portal.php?mod=view&aid=27&page=3) 1. 打开“文件→新建文件或项目”菜单项(也可以直接按下Ctrl+ ...

  6. Spring Boot 打war包后自定义404页面不生效解决方法

    最近做一个项目,自定义了404页面,本地测试可以到自定义页面,但是打包放到tomcat里面就不行.搞了一天终于看到一个比较正确的方法.下面附上连接,非常感谢各位博主们 1.https://blog.c ...

  7. 前端自定义format函数,做字符串格式化功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【转】Cookie/Session机制详解

    Cookie/Session机制详解   会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息 ...

  9. APIPA

    自动专用IP地址(Automatic Private IP Address,APIPA)是当客户端无法从DHCP服务器中获得IP地址时自动配置的地址.IPv4地址前缀169.254/16已经被IANA ...

  10. 导出excel,并将数据返回给前端(包含权限判断)

    一.先写导出按钮接口 1.此接口对用户权限进行判断 2.此接口将前端的参数组合拼凑到下一个接口的url中去,用于条件筛选 3.用户有权限的情况下将用户的权限信息保存到redis中去,并将token写到 ...