html 块状元素转换,块状元素与内联元素的转换
在布局页面的时候，HTML标签分成两种，块状元素和内联元素(我们平时用到的标签div和p就是块状元素，链接标签a就是内联元素)。它们是很重要的两个概念，既然说到概念就先看看块状元素和内联元素的定义，在定义中你要留意它们两个的不同之处。
块状元素
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。
在css设置display：block；就会将内联转换成块状，高和宽就会生效。
而设置display：inline；就会将块状转换成内联。
设置display：none；什么也不会显示。
以下我们来试验一下：
例：html>
span{
width:200px;
height:200px;
background:gray;
display:block;
}
当面对两个选择时，抛硬币总能奏效，因为在你把它抛在空中的那一秒里，你突然知道你希望它是什么。
以上代码是将(内联)元素转化为块状这样效果如下：
html>
span{
width:200px;
height:200px;
background:gray;
display:block;
}
div{
width:200px;
height:200px;
background:red;
/*display:none;*/
display:inline;
}
当面对两个选择时，抛硬币总能奏效，因为在你把它抛在空中的那一秒里，你突然知道你希望它是什么。
以上代码是将
我们再试下使用display：none 所出现的效果：html>
span{
width:200px;
height:200px;
background:gray;
display:block;
}
div{
width:200px;
height:200px;
background:red;
display:none;
}
当面对两个选择时，抛硬币总能奏效，因为在你把它抛在空中的那一秒里，你突然知道你希望它是什么。
那么看下效果：
出来的效果是不是让人感觉
html 块状元素转换,块状元素与内联元素的转换相关推荐
- html 内联元素转换,HTML 什么是内联元素？
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,而display属性为inline的元素就是行内元素. 内联元素(inl ...
- php块状元素,块状元素和内联元素
前几天写页面,搞不清楚块状元素和内联元素的区别,今天特地整理了一下, html标签分两种:块状元素和内联元素. 块状元素一般是其它元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用 ...
- html块级元素转换内联,HTML中的块级元素和内联元素
1.特性 块级元素(block level element) 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示 宽度(width).高度(height).内边距(padding)和外 ...
- html 内联元素转换,HTML中什么是内联元素？
在HTML中,内联元素是指display属性为inline的元素:内联元素也叫行内元素,在网页中总是随着文字流出现在"行内",这些元素不会在它本身之前或之后生成"分隔符& ...
- html中内联元素排列对齐原理,html标签中的内联元素（行内元素）详解
html内联元素,也叫行内元素,相邻的多个内联元素是水平横向排列显示在同一行,其宽度随内容的变化而变化,在同一行显示多个内容,就可以使用内联元素来实现,这样就不需要将块级元素设置为浮动或绝对定位也能在 ...
- html 图片是块元素吗,HTML+CSS：html元素分类之块级元素、内联元素、内联块级元素...
原标题:HTML+CSS:html元素分类之块级元素.内联元素.内联块级元素 html元素主要分为3类,块级元素.内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点. ...
- CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- HTML中的块级元素和内联元素
1.特性 块级元素(block level element)总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示 宽度(width).高度(height).内边距(padding)和外边 ...
最新文章
- 人工智能数理基础 · 前沿系列报告议程 第 6 期
- Java判断字符串是否是整数
- 卷积层数据放大_卷积神经网络重要回顾
- How is product data bound in Opportunity Edit page
- 一加7T系列发布时间公布：9月26日北美和印度率先亮相
- python动态创建字典_如何在Python中创建动态命名字典？
- python中文意思-请问在python中**是啥什么意思？
- c# mysql存储过程 输出参数值_C#获取存储过程返回值和输出参数值的方法
- JLU数据结构第七次上机实验解题报告
- 唯冠向苹果索赔100亿
- 如何对研发团队绩效进行考核--附各环节人员考核参考表
- 2021年12月电子学会图形化四级编程题解析含答案：棕熊大战
- haproxy的frontend/backend和listen区别
- 关于搭建简易广域网私人通信程序（python）一步到位！
- psid mysql_使用Python对MySQL数据库插入二十万条数据
- android输入法开发软件,开发安卓系统Android和码输入法软件的全过程(二)
- DNA双螺旋结构是大自然长期进化的结果
- Ollydbg使用技巧
- 快速了解 Java 9 - 16 新特性，助你脱离内卷
- 大潜能：如何借助他人的力量获得成功