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权威指南>, ...
随机推荐
- xcode10 出现iPhone has denied the launch request
一般的处理这里不介绍,只要介绍因为证书的问题导致这个原因的.我的现象是,模拟器可以,iOS12以下设备可以,证书全部更新了一遍,只有一个没更新,还真是那个没更新的问题. 从钥匙串查看自己的证书配置,看 ...
- Linux系统安装与初用
1.结合实验尝试,并查阅资料,总结在实验准备中提出的7个问题. (1).Linux的发行版本.内核版本:二者区别与联系. 核心版本主要是Linux的内核,发行版本是各个公司推出的版本,他们与核心版本是 ...
- 【oracle】生成AWR报告
[第一步]找到awrrpt.sql文件 [ora11g@vm-kvm11820-app ~]$ locate awrrpt.sql /DATA/opt/app/ora11g/product//rdbm ...
- [LeetCode&Python] Problem 235. Lowest Common Ancestor of a Binary Search Tree
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...
- 转 Mac 下自带的中文输入法不显示汉字提示问题
原文 https://blog.csdn.net/moxi_wang/article/details/50721326 当时聊天的时候不知道那个手指头按错了什么键 导致Mac自带的中文输入法不能提示显 ...
- es6学习笔记-Proxy、Reflect、Promise
Proxy Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前 ...
- python 8
一.文件操作初识 1. path 文件路径 F:\文件.txt encoding 编码方式 utf-8, gbk ... mode 操作方式 只读,只写,读写,写读,追加... f1 = open(r ...
- flask中注册验证码和分页
注册验证码.核心思路,替换注册页面的img标签的src属性. 1.准备好文件夹:captcha2.导包 from utils.captcha.captcha import captcha3.验证码生成 ...
- mybatis:Parameter 'ids' not found.
https://www.cnblogs.com/baby-lijun/p/5908088.html ps:根本原因就是他们根本就没有理解foreach里面的collection应该放什么东西,错误的理 ...
- zoj 2524 并查集裸
Description There are so many different religions in the world today that it is difficult to keep tr ...