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权威指南>, ...
随机推荐
- Web服务器软件 (Tomcat)
1.什么是服务器? 安装了服务器的软件的计算机 服务器软件:接收用户的请求(request),处理请求,做出响应. Web服务器软件:接收用户的请求(request),处理请求,做出响应,再Web服务 ...
- 关于django用户登录认证中的cookie和session
最近弄django的时候在用户登录这一块遇到了困难,网上的资料也都不完整或者存在缺陷. 写这篇文章的主要目的是对一些刚学django的新手朋友提供一些帮助.前提是你对django中的session和c ...
- SAMTOOLS使用 SAM BAM文件处理
[怪毛匠子 整理] samtools学习及使用范例,以及官方文档详解 #第一步:把sam文件转换成bam文件,我们得到map.bam文件 system"samtools view -bS m ...
- Touch Gesture手势总结
- zabbix AGENTS 在WINDOWS的安装
1.下载 https://assets.zabbix.com/downloads/3.4.0/zabbix_agents_3.4.0.win.zip 解压 zabbix_agents_3.4.0.wi ...
- CSS3圆环动态弹出菜单
体验效果:http://hovertree.com/texiao/css3/44/ 代码如下: <!DOCTYPE html> <html lang="zh"&g ...
- yii2.0 curd操作
$customer=new Customer();//插入操作 $customer->name='小熊'; $customer->save(); //修改操作 $model=Custome ...
- 1. ReactJS基础(开发环境搭建)
本文主要介绍通过React官方提供的create-react-app脚手架进行开发环境的搭建. 1.安装node环境(安装过程这里不做介绍,可参考其他博文) 在cmd中输入node -v 如果可以看到 ...
- Feign源码解析系列-最佳实践
前几篇准备写完feign的源码,这篇直接给出Feign的最佳实践,考虑到目前网上还没有一个比较好的实践解释,对于新使用spring cloud的同学会对微服务之间的依赖产生一些迷惑,也会走一些弯路.这 ...
- 【Linux】awk指令
介绍: awk是一种可以处理数据,产生格式化报表的语言.其工作方式是读取数据文件,将每一行数据视为一条记录,没笔记录按分隔符(默认空格)分割成若干字段,输出各字段的值. 实例: [jboss@vm-k ...