行内元素,块级元素,各自特点及其相互转化
作为一名小前端,块级元素、行内元素用了几千几万次,除了“块级独占一行,行内不独占”之外,对细节属性的了解十分匮乏,今天做以部分属性的测试和阐述。
一、 对物理属性的支持
元素类别 | width | height | padding | margin | 是否独占一行 |
行内元素(span,a等) | × | × | √ | √ | × |
块级元素(div,p等) | √ | √ | √ | √ | √ |
既行内又块级 | √ | √ | √ | √ | × |
备注:行内元素的上下padding(padding-top,padding-bottom)无效,可参考下例。
这是带有上下padding的效果:
{background-color: #eee;padding-left: 20px;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;border: 1px solid #666;
}
这是去除了上下padding的效果:
{background-color: #eee;
padding-left: 20px; padding-right: 20px; border: 1px solid #666;}
可见,span元素的位置及文本内容,相邻div元素的位置都没有发生改变,只是上下padding为其渲染了对应的上下背景色。
二、行内元素如何转化块级
① display:block; 转化为普通块级
②display:inline-block; 转化为内联块级,不单独占一行
③float: left/right;转化为内联块级,不单独占一行,但float使得行内元素脱离了文档流,记得使用clear清除浮动
span{float:left;width: 100px;height: 100px;background-color: #eee;padding-left:20px;padding-right:20px;border: 1px solid #666;}
<!--对应的html代码-->
<span>test-span</span><span>test-span</span><span>test-span</span><div style="clear: both;"></div><div style="width: 100px;height: 100px;background-color: lightblue;">test-div</div><div style="width: 100px;height: 100px;background-color: yellow;">test-div</div>
④使用定位
使用absolute或者fixed定位也可将行内元素隐式转化为块级元素,但也会使之脱离原先的文档流。
综上,float和定位,都可以隐式的将行内元素转化为块级元素。
三、块级转化为行内元素
①display:inline; 转化为行内元素
②display:inline-block; 转化为内联块级,不单独占一行
行内元素,块级元素,各自特点及其相互转化相关推荐
- 行内和块级元素区别?如何让行内元素设置宽高?
行内和块级元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素 ...
- Web行内和块级元素 及表格应用
一.转义字符 由<> 包裹的文本 会当做标签去解析 空格 &emsp: ? < .gt < > "我认为这些电影对我来说非常特别.这是令人难以置信的 ...
- HTML中行内元素块级元素 行内块元素
行内元素块级元素 1.当给行内元素定义一个具体的宽高时,是没有用的.只有对于块级元素是有用的.除非在行内元素里面写上内容,那个内容有多大,那就会被撑开有多大 例: 如果是块级元素 <style& ...
- CSS行内元素/块级元素
盒子模型并不一定就是div,它是一个泛指.所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. Margin(外边距) - 清除边框外 ...
- css 内联元素、块级元素、内联块级元素
对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素 ...
- html 图片是块元素吗,HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素...
原标题:HTML+CSS:html元素分类之块级元素.内联元素.内联块级元素 html元素主要分为3类,块级元素.内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点. ...
- 行内元素 块级元素之间的嵌套
默认的span标签是一个行内标签,页面构成时,尽量把它作为最后一个标签. 当然不绝对,你可以在内套用同是行内标签的元素:<i>.<span>.<em>...等等等. ...
- css元素显示模式(行内、块级、行内块)
1.块级元素 显示特点: 1.独占一行(一行只能显示一个) 2.宽度默认是父元素的宽度,高度默认由内容撑开 3.可以设置宽高 代表标签: div.p.h系列.ul.li.dl.dt.dd.form.h ...
- html:(40):块级元素和内联块级元素
1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才 ...
- HTML5 在a标签内放置块级元素
原文地址:HTML5: Wrap Block-Level Elements with A's 原文日期: 2010年06月26日 翻译日期: 2013年08月22日 对比起XHTML来说,HTML5通 ...
最新文章
- xml配置linux启动脚本,linux中利用Shell脚本实现自动安装部署weblogic服务
- python 单例模式内存泄露_彻底搞懂Java内存泄露
- Anychat的绝对路径与相对路径
- 数据结构树的基本操作_[数据结构]树的建立与基本操作 解题报告
- 腾讯技术直播间 | 零代码打造智能对话机器人
- 终端报错xcrun: error: unable to find utility “xcodebuild”, not a developer tool or
- 建立远程桌面连接计算机无密码,win7远程桌面空密码的步骤_win7系统如何设置让远程桌面登录无需密码-win7之家...
- C++学习系列笔记(八)
- 傅里叶变换的终极解释下
- Raki的读paper小记:Word2Vec
- 网秦创始人林宇称遭史文勇非法拘禁 后者称是恶意中伤
- 职场 | 联发科MTK手机通信协议软件开发工程师面试总结
- 正则表达式提取字符串全部汉字或者全部英文
- 小程序源码:网课查题微信小程序源码下载,题库资源丰富自动采集,支持语音拍照识别
- Using System.Messaging引用报错解决办法
- 汇文opac的openlink.php改造
- 贾小伟—Web前端开发工程师(作品集)
- 安装python2后中无scripts文件,无pip
- html5中top什么意思,margin-top在html中的意思是什么
- Google真的会退出中国吗?