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

    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾.1.命令格式:head ...

  2. iOS 九宫格解锁

    思路: 1.画9个按钮,通过按钮的选中状态控制按钮. 2.连线通过贝塞尔曲线绘制. 3.校验密码通过给按钮绑定tag值判断. 主要代码: OC版本: // // NineLockView.m // l ...

  3. shell截取指定字符串之间的内容

    #!/bin/bash#截取字符串 #path=ss/usr/share/src/root/home/admin path=ss/usr/share/src/root/home/admin/src/a ...

  4. 右键菜单添加包含ICON图片的快捷打开方式

    右键菜单添加包含ICON图片的快捷打开方式: ①保存如下代码为“submit.reg”, ②修改对应的程序地址 ③双击创建的文件,导入到注册表中,即可 Windows Registry Editor ...

  5. UVa 712

    这个题根本不用建树,因为是完全二叉树,可以把这个想成二进制.对于根是二进制数的首位,之后依次类推.到最后的叶子节点就是从0到pow(2,n)-1. 关键在于在第一次输入的不是按照x1,x2,x3,x4 ...

  6. Android版本28使用http请求

    Android版本28使用http请求报错not permitted by network security policy android模拟器调试登录的时候报错 CLEARTEXT communic ...

  7. Beff的学习

    Beff介绍 BeEF,全称The Browser Exploitation Framework,是一款针对浏览器的渗透测试工具. 首先打开kali,直接点击beef图标打开beef 浏览器会默认弹出 ...

  8. ORA-28000: the account is locked解决

    首先使用具有sysdba权限的账户登陆,如sys账户和system账户 新建一个sql窗体,并执行语句解锁被锁定的账户,如我这里sgyw账户: alter user sgyw account unlo ...

  9. 《DSP using MATLAB》Problem 7.26

    注意:高通的线性相位FIR滤波器,不能是第2类,所以其长度必须为奇数.这里取M=31,过渡带里采样值抄书上的. 代码: %% +++++++++++++++++++++++++++++++++++++ ...

  10. python------mysql API

    参考引用博客:http://www.cnblogs.com/wupeiqi/articles/5713330.html ifconfig是linux中用于显示或配置网络设备(网络接口卡)的命令,英文全 ...