为什么span，label，是行级元素，div，p等等是块级元素

2024-06-19 14:08:28

这期的问题非常有意思，我们一直说span，label，a都是行元素，div，p还有h1~h5是块级元素等等，但是你有想过为什么吗？别告诉我这是大家约定俗成的东西，实际上，他还真的不是。

先知道啥是行级元素和块级元素吧。

块级标签与行级标签的区别：

块级元素可以设置宽高，行级元素不能设置宽高（只能根据文字来设置，比较特殊的是img\input是可以设置宽高）；
块级元素是独占一行，行级元素不行；
简单一句，行级标签占一块，块级标签独占一行；

块级标签与行级标签的决定性是什么

首先通过一个问题进行反思，一个标签元素，其实对于我们开发来说，真正决定一个它是否为一个行或者块级元素的真正原因是什么？
答案是：dispaly的属性，inline是行级，block是块级；在浏览器中，也正是这个属性决定了一个元素标签的行或者块级元素。我们可以把p标签设置成display：inline，这样就设置不了他的宽高，如图：

如图和代码，这是一段很正常的，对p标签的设置都很正常，我们打开浏览器上发现，浏览器是对p标签（div标签同理）有一个预置的display属性值，如图为div的默认值：

p的默认值：

可以看到，浏览器是有对他们加上默认的display属性值的。
，但是我们在标签属性上加上display：inline时，一切都变了：

可以看到，我们的浏览器对标签是有预置属性值的，这既是为何span是行级标签，为何标签p标签默认有外边距

另外，对于display属性有个很值得一提的东西，就是当元素进行定位，浮动等脱离文档流的操作后，元素的display属性会被自动设置成为display：block，也是就说，会被设置为块级元素

我在刚刚p标签下面搞了一个span标签，设置他的float：left，然后可以设置宽高了，很神奇吧，为什么呢，我们打他浏览器的computer项，搜一下span的display属性：

而且，这个定位后被更改display：block属性是不能够被我们手动更改会inline的。

看起来能够设置对吧，但是你会发现这个属性没有效果，没有变回行级元素，为什么，还是老样子，打开computer项，找出他的display属性值:

发现他的值并没有被我们更改掉。

最后麻烦大家看完以后能够点个赞，谢谢啦！

为什么span，label，是行级元素，div，p等等是块级元素相关推荐

css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素
元素有行内元素(inline).块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同. 1. 行内元素(inline) 通过display: inli ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
html内联元素和块元素的特性,HTML中块级元素和内联元素的特性详解
原标题:HTML中块级元素和内联元素的特性详解在网站布局中经常会遇到元素进行居中的时候,设置了text-align:center:margin:0 auto;有时候会起作用,但有时候对居中无效,刚接 ...
css变成块级元素_【CSS】块级元素
完整的框模型(Box Model) 不同的宽度.高度.内边距和外边距相结合,就可以确定文档的布局. 大多数情况下,文档的高度和宽度由浏览器基于可用的显示区域和其他一些因素自动确定. 1.元素框的最内部 ...
Java是块级作用域吗_javascirpt如何模仿块级作用域(js高程笔记)
由于javascript没有块级作用域的概念,所以在块语句中定义的变量,实际上是在包含函数中而非语句中创建的. 如: function outputNumbers(count){ for(var i= ...
html中双标签、单标签、块级元素、内联元素
双标签: <html> <head><title><body><span> <p><form>< h1 > ...
行内元素，块级元素div在一行显示
行内元素,块级元素div在一行显示行内元素无法设置padding-top,padding-bottom,margin-top,margin-bottom,width,height:除非将行内元素改为 ...
html5块元素代码,html5 区块与内联div 与span html块级元素(示例代码)
HTML 和可以通过和将 HTML 元素组合起来. HTML 块元素大多数 HTML 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level e ...
php div行内块元素,行内元素与块级元素的区别详细介绍
首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比较常用的块级元素,详 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...

最新文章

热门文章