三生有幸,偶然之下知道了《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. KeepAlive--高可用解决方案

     原文地址https://segmentfault.com/a/1190000011078937 一:keepalive简述 一;高可用的解决方案 1)vrrp协议的实现keepalive 2)ais ...

  2. MS SQL 全局临时表的删除

    本来已经搜索到怎么删除了 如下: IF OBJECT_ID( 'tempdb..##TEMP_COPTD') IS NOT NULL Begin DROP TABLE ##TEMP_COPTD End ...

  3. (转)解决NSMutableAttributedString富文本,不同文字大小水平轴对齐问题(默认底部对齐)

    默认是底部对齐,其实对的也不齐, 目标效果:  代码: NSBaselineOffsetAttributeName 基线偏移量: 调整: NSBaselineOffsetAttributeName的值 ...

  4. 关于indexof和substring经常记不住的点

    indexof 找到的字符位置是 字符串从0位开始算起的. lastIndexOf也一样,http://localhost:8080/aaa,的lastIndexOf("/")是2 ...

  5. python 异步发送邮件 aiosmtplib

    aiosmtplib is an asynchronous SMTP client for use with asyncio.文档地址 与 smtplib的用法大体相同 有几个地方需要注意下: 加密S ...

  6. MSP430G2553 TimerA中断说明

    一.TimerA中断向量. G2553一共有2个TimerA,分别是TimerA0和TimerA1,中断入口地址分别是: TimerA0中断向量名称     <--> 中断源 ------ ...

  7. 【leetcode】476. Number Complement

    problem 476. Number Complement solution1: class Solution { public: int findComplement(int num) { //正 ...

  8. HQL知识点一

    Hive创表语法 create [external] table [if not exists] [db_name.]table_name (col1_name data_type,col2_name ...

  9. Python学习之路基础篇--04Python基础+数据类型

    1 int 只需知道 i.bit_length() 是算其二进制的位数, 如3 就是2: 5就是 3. 2 bool 要知道 while True == while 1   :除零以外的所有数都为真 ...

  10. ODI Scenario 场景

    ODI中,场景的作用类似发布版本,当映射最终修改版完成时,可以生成场景.无论是映射(Mapping)还是包(Package)都可以生成场景. 包调用映射和调用场景的区别: 1,包直接调用映射,当映射修 ...