行内元素,块级元素,各自特点及其相互转化

作为一名小前端,块级元素、行内元素用了几千几万次,除了“块级独占一行,行内不独占”之外,对细节属性的了解十分匮乏,今天做以部分属性的测试和阐述。

一、 对物理属性的支持

元素类别widthheightpaddingmargin是否独占一行
行内元素(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; 转化为内联块级,不单独占一行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369120.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql断开同步并记录位置_数据库同步自动断开问题的处理

堡垒机的实施过程中&#xff0c;因为做了双机&#xff0c;所以要对两台堡垒机进行数据库的主从同步和HA配置。在部署完mysql主从同步以后&#xff0c;发现同步会有中断的现象。中断表现为Slave_IO_Running: YesSlave_SQL_Running: NoReplicate_Do_DB:Replicate_Ignore_DB:Repli…

[NOIP2016提高组]换教室

题目&#xff1a;洛谷P1850、UOJ#262、BZOJ4720、Vijos P2005。 题目大意&#xff1a;有n个时间段&#xff0c;第i个时间段只能在教室$c_i$上课&#xff0c;另一个上这门课的教室在$d_i$。现在你最多可以进行m次申请&#xff0c;对于第i个时间段的申请如果成功&#xff0c;那么…

从RSS Feed和YQL创建数据表

Yahoo Query Language&#xff08; YQL &#xff09;是一种查询语言&#xff0c;例如SQL。 使用YQL&#xff0c;我们可以跨Web服务 查询 &#xff0c; 过滤和联接数据。 YQL也可以阅读RSS feed。 响应可以是JSON或XML。 雅虎提供了一个YQL控制台&#xff0c;用于调试 &…

background-image使用svg如何改变颜色

结论 在我多番测试之后&#xff0c;才发现background-image使用svg&#xff0c;改变颜色根本做不了。 分析 当svg图片被使用成background-image&#xff0c;颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式&#xff0c;却是无效&#xff0c;这其实可以从CSS选择器得到…

NOIP 2012 Day2

tags: 扩展欧几里得二分答案查分倍增二分答案贪心NOIP categories:信息学竞赛总结同余方程借教室疫情控制 同余方程 Solution 首先同余式可以转化为等式.\[ax\equiv 1\mod b\Leftrightarrow axby1\]   根据扩展欧几里得定理, 对于式\[axbyk(a,b),k\in \mathbf{R}\]一定存在整…

Qt之QSS(Q_PROPERTY-自定义属性)

版权声明&#xff1a;进步始于交流&#xff0c;收获源于分享&#xff01;纯正开源之美&#xff0c;有趣、好玩、靠谱。。。作者&#xff1a;一去丶二三里 博客地址&#xff1a;http://blog.csdn.net/liang19890820 目录(?)[] 简述 在Qt之QSS&#xff08;Q_PROPERTY-原始属性&a…

python print error 空_python笔记37:10分钟掌握异常处理,再也不担心程序挂了

主要内容&#xff1a;小目标&#xff1a;异常处理主要内容&#xff1a;错误与异常&#xff0c;try_except语句对于撸代码的程序员来说&#xff0c;程序运行中出现问题是常见的现象&#xff1b;实际学习与工作中&#xff0c;我们会花很大的精力去解决各种问题&#xff1b;1. 程序…

在URL参数中传递复杂对象

假设您要传递原始数据类型&#xff0c;例如复杂的Java对象 java.util.Data&#xff0c;java.lang.List&#xff0c;泛型类&#xff0c;数组以及通过URL参数所需的所有内容&#xff0c;以便在页面加载后在任何网页上预设默认值。 共同的任务&#xff1f; 是的&#xff0c;但是可…

contenteditable元素的placeholder输入提示语设置

在某些情况下&#xff0c;textarea是不够用的&#xff0c;我们还需要显示一些图标或者高亮元素&#xff0c;这就需要用富文本编辑器&#xff0c;而富文本编辑器本质上是HTML元素设置了contenteditable。 然后可能需要像input、textarea有placeholder的输入提示语&#xff0c;但…

CF 961E Tufurama

JYZdalao上课讲了这道题&#xff0c;觉得很好可做 其实也是一道理解了就水爆了的题目 把题意抽象化&#xff0c;可以发现题目求的满足 i<ja[i]>ja[j]>i的i&#xff0c;j对数。由于i&#xff0c;j顺序问题&#xff0c;可以在不考虑i&#xff0c;j顺序的情况下将ans>…

使用JCA的密码术–提供者中的服务

Java密码体系结构&#xff08;JCA&#xff09;是一个可扩展的框架&#xff0c;使您能够使用执行加密操作。 JCA还促进实现独立性&#xff08;程序不应该在乎谁提供加密服务&#xff09;和实现互操作性&#xff08;程序不应该与特定加密服务的特定提供者联系在一起&#xff09;。…

IE浏览器支持响应式网站设计

目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局&#xff0c;其理念是&#xff1a;集中创建页面的图片排版大小&#xff0c;可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 但是, 响应式设计并不能原…

python循环for不从零开始_Python-多处理-巨大的for循环

下午好&#xff0c;我对Python还是很陌生&#xff0c;我必须解决一个需要尝试数十亿个假设的问题...更具体地说&#xff0c;我需要迭代440个元素的列表&#xff0c;但我需要这样做8次...(是的&#xff0c;我知道OS迭代的次数完全是疯狂的。我的机器相当不错&#xff0c;所以我想…

Bridge Across Islands POJ - 3608 凸多边形间最小距离/旋转卡壳

旋转的部分始终感觉有点别扭。。后来发现是因为叉积顺序为负。。 所以让三角形面积逐渐变大实际上就是让三角形面积变小&#xff08;绝对值意义上的&#xff09;&#xff0c;这样就是让高变小了。。 至于为什么要选最下和最上。。应该是为了满足两条线始终可以生成所有多边形间…

绑定到JSON和XML –处理集合

EclipseLink JAXB&#xff08;MOXy&#xff09;的优势之一是能够通过一组元数据将对象模型映射到JSON和XML。 一个弱点是您需要在JSON键或XML元素上折衷集合属性。 我很高兴地说这个问题已经在EclipseLink 2.5&#xff08;和EclipseLink 2.4.2&#xff09;中得到解决&#xff0…

【WIP】Bootstrap 基础

创建: 2017/09/28 更新: 2017/10/14 标题加上【WIP】转载于:https://www.cnblogs.com/lancgg/p/8281714.html

xml mysql 模糊查询_mybatis+Spring mysql的模糊查询问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼查询的mapping.xml语法resultType"java.lang.Integer">SELECTcount(yy_id)FROMmc_usersystem_version like CONCAT(%,${system_version },% )比如当我为字段 system_version 赋值为 ”3512“ 的时候 能查询出来若是我…

css 浮动和清除浮动

在写页面布局的过程中&#xff0c;浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋&#xff0c;在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流&#xff0c;按…

Java Code Geeks和Packt提供的Hadoop书籍赠品

亲爱的极客&#xff0c;由于参与度很高&#xff0c;并且为了有机会赢得尽可能多的Hadoop粉丝&#xff0c;我们决定将竞赛延长一个星期&#xff0c;直到下周二。 各位极客&#xff0c; 赠品在Java Code Geeks上继续。 我们很高兴地宣布&#xff0c;我们再次与Packt Publishin…

【转】 差分约束系统详解(转化为最短路) (概念)

---恢复内容开始--- 转自&#xff1a;http://www.cnblogs.com/void/archive/2011/08/26/2153928.html 差分约束系统中&#xff1a; 如果求未知数的最大值&#xff0c;那么按小于等于建图后求最短路即可。&#xff08;因为求最短路是由无穷向下约束而得到的&#xff0c;所以得到…