三生有幸,偶然之下知道了《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. HML

    1.元素分类: 2.浮动: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容 ...

  2. 微信小程序 数据库指引 前端操纵数据库失败

    把注释解开后,点击添加显示失败了 看了下注解,发现是数据库权限问题, 修改一下成第一个,然后点击又失败了,多点击几下,就会成功! 哦 别忘了时刻 ctrl +s 保存,如果你习惯了idea 自动保存的 ...

  3. github仓库主页介绍、用git管理本地仓库和github仓库、搭建网站

    github仓库主页介绍 名词解释: 工作区: 添加.编辑.修改文件等动作 暂存区: 暂存已经修改的文件,最后统一提交到git中 git(仓库): 最终确定的文件保存到仓库,成为一个新的版本,并且对他 ...

  4. python基础语法二

    迭代 test = "妹子有种冲我来" #可迭代对象 == 被for进行循环获取 for item in test: print(item) break #练习题: test = ...

  5. Day03_Python知识总结

    1.元组:  元组其实跟列表差不多,也是存一组数,但它一旦创建便不能修改,所以又叫只读列表. names = ("alex","jack","eric ...

  6. PHP错误日志和内存查看(转)

    本篇文章给大家带来的内容是关于PHP错误日志和内存查看的方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.通过命令查看服务器上一共开了多少的 php-cgi 进程: ...

  7. [LeetCode&Python] Problem 703. Kth Largest Element in a Stream

    Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...

  8. RSA 格式 - 转载

    转载自 RSA(三) 密钥的格式 https://www.shangyang.me/2017/05/24/encrypt-rsa-keyformat/#%E5%89%8D%E8%A8%80 PEM 和 ...

  9. git版本管理工具常用命令

    git是分布式版本管理工具,一台电脑既可以是客户端,也可以是服务端.工作过程中可以断开网络.svn是集中式版本管理工具,一台服务器控制很多客户端,使用过程不能断网. git的优点有:适合分布式开发,强 ...

  10. wpf 圆角TextBox 样式

    <Style x:Key="RoundCornerTextStyle" TargetType="{x:Type TextBox}"> <Set ...