CSS的块级元素和内联元素的概念
三生有幸,偶然之下知道了《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的块级元素和内联元素的概念的更多相关文章
- Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- css中块级元素、内联元素(行内元素、内嵌元素)
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- CSS的块级元素和内联元素,以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
- CSS 块级元素、内联元素概念
p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong.span等元素称为行内元素,它们的内容显示在行中,即“行内框”.(可以使用display=block将行内元素转换成块元 ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS块级元素、内联元素概念[转]
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
随机推荐
- Navicat连接mysql出现1045错误
使用Navicat连接mysql出现1045,可能的原因为忘记密码,下面方法可以帮助重置密码. 1,以管理员权限运行cmd程序: 2,cd C:\Program Files (x86)\MySQL\M ...
- 关于下拉列表HtmlDownlistFor的使用
1.定义下拉列表需要的数据 public static List<SelectListItem> GetProList() { List<SelectListItem> i ...
- ngix匹配规则
语法规则: location [=|~|~*|^~] /uri/ { … } =:开头表示精确匹配 ^~:开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因 ...
- android textiew自定义ClickableSpan无效问题
我们有个需求,需要将一段文本中的url跳转,替换成跳转我们app的某个页面.然后就开始搞,先自定义clickspan,在设置LinkMovementMethoid, 但是不管怎么搞就是不生效. 这是我 ...
- Vue慕课网音乐项目随手记--node代理及数据抓取
1.抓取数据 链接 https://y.qq.com/portal/playlist.html Parameters 通过上图能看到,qq音乐通过设置了refer和host来保护接口. 那么怎么才 ...
- webstorm 2018 LICENSE SERVER 最新激活网址
2018年8月更新:https://s.tuzhihao.com:666 (亲测)
- day09 小练习 斐波那契数列 文件
#2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素, # 并将其作为新列表返回. # def get_odd_list(info): # ul=info[1::2] # return ...
- Spring Boot + JPA 因为 javassist 包出现 NullPointerException 问题的解决
Caused by: org.hibernate.MappingException: Could not get constructor for org.hibernate.persister.ent ...
- CMDB-(paramiko模块 -- 实现ssh连接)
import paramiko # 实现ssh功能的模块 ssh = paramiko.SSHClient() # 实例化对象 ssh.set_missing_host_key_policy(para ...
- 学习笔记CB008:词义消歧、有监督、无监督、语义角色标注、信息检索、TF-IDF、隐含语义索引模型
词义消歧,句子.篇章语义理解基础,必须解决.语言都有大量多种含义词汇.词义消歧,可通过机器学习方法解决.词义消歧有监督机器学习分类算法,判断词义所属分类.词义消歧无监督机器学习聚类算法,把词义聚成多类 ...