span与div 行内元素和块元素(标签)
来源:互联网 发布:游戏官方网站源码 编辑:程序博客网 时间:2024/05/22 15:55
讨论span与div的区别实质是行内元素与块元素有什么不同
span 是 行内元素
div 是 块元素
w3c关于行内元素与块元素的定义 w3c
块元素:块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内元素:行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
不知看懂了没有
用代码测试 就容易验证下面两点
其实 第一点 块元素的宽度是占据整行 而行内元素的宽度是根据元素内容的宽度
例如 <p>标签 与 <span>标签 就很容易测试出来
第二点 行内元素 属性height width margin-top margin-bottom padding-top padding-bottom是无效
但是margin-left margin-right padding-left padding-right是有效的,而块元素全部height width margin padding都是有效的
display属性 其实就是设置标签具有行内元素属性特性或着是块元素属性特性 更详细的说明查w3c手册
block: 设置成块元素
inline:设置成行内元素
inline-block: 让标签具有块元素 和 行内元素的属性特性 如有疑问 用代码测试最容易理解
0 0
- span与div 行内元素和块元素(标签)
- html从入门到放弃(7)-入门标签:块元素与内联元素<div/>和<span/>
- 行内元素span和块级元素div的区别
- xhtml的块级元素(div)和内联元素(span)
- 08-DIV+CSS-块元素和行内元素
- html标签之块级元素与行内元素
- html标签(行内元素和块元素)
- div 块元素(block)与 span 内联元素(inline)
- span元素与块级元素(div、p)位于同一行时的垂直居中问题
- 块级元素与行内元素(内联元素)
- 块元素和行内元素(内联元素)
- 块级元素和内联元素(行内元素)
- 块级元素与行内元素(内联元素)的区别和联系
- 行内元素与块级元素区别和转换
- 块元素与行内元素
- 行内元素与块级元素
- 块级元素与行内元素
- 行内元素与块级元素
- 显示意图激活另外一个activity(检查用户的网络情况2.3.3)
- stars
- linux内核学习(20)设备模型第二层之一
- 打开一个URL并获取http状态码
- OC视频笔记-5
- span与div 行内元素和块元素(标签)
- 关于java中Double类型的运算精度问题
- C++ 工厂模式
- Python::SocketServer
- Linux设备模型分析之device(基于3.10.1内核)
- IOS UI结构分析
- [水]ZOJ1284 POJ1528
- Hardwood Species
- POJ 1321 棋盘问题