文档章节

关于display的属性:block和inline-block以及inline的区别,float相关说明

o
 osc_y8yehimr
发布于 2019/03/20 09:04
字数 371
阅读 26
收藏 0

首先是block和inline的区别,说通俗点block就是让其形成块级元素,而且其前后都会有换行符;而inline的话就是让元素设置为内联样式(对其设置的宽高都没有什么卵用,不产生效果,但是颜色效果还是有的),前后是没有换行符的。

而inline-block恰好是两者的综合,即行内块,其属于块级元素,而且没有换行符,在行内形成。废话了这么多,我怕以后还是忘了,那就直接上一个例子:

如图设置四个链接,分别作对比:inline(公共样式common对其宽高并没有影响),inline-block,block(在行内会换行,而且独占一行)

 

拓展:如果对block设置。。。回家写

/*****************第二天才补上**********************/

后面又分别对block,inline-block,以及inline分别加上float:left。发现无论是谁,一旦加上float属性,其前后的换行符都会被取消;

而其中例如后面已经浮动的元素,前面有换行符的情况下,是不会被挤压的,也就是如下图:链接三后面因为有换行符。后面浮动的元素即使有了浮动,前面的换行符

还是会产生作用。

 

原文:https://blog.csdn.net/sinat_31311369/article/details/52425317 

版权声明:本文为博主原创文章,转载请附上博文链接!

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

face-api.js 示例

该示例是基于GitHub的一个开源项目:https://github.com/justadudewhohacks/face-api.js 其核心的库是用js写的,所以它可以在web项目或nodejs 中使用 Html: <!DOCTYPE html><html lang="en......

Canaan_
13分钟前
13
0
树莓派4b + Ubuntu20.04 Server 安装Java8

安装环境: 树莓派4b + Ubuntu20.04 Server 32位 1. 下载jdk https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 2. 解压 tar -zxvf jdk-8u251-linux-arm32-vf......

SummerGao
46分钟前
9
0
项目实战:Qt+OpenCV图像处理与识别算法平台

若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062 本文章博客地址:h...

红模仿_红胖子
49分钟前
7
0
北京智源大会 | AI + 医疗的下一个十年:从公共卫生预警到人类基因密码破解 道翰天琼认知智能api机器人接口。

医疗事关人身安全,要求极高,容错率极低,因此,知识壁垒和技术壁垒都很高。过去,AI系统更多的是服务于终端,辅助医生诊断、决策。但是,医疗很复杂,直接切入终端问题很多。未来十年,AI+...

jackli2020
52分钟前
16
0
源于HystrixCommandStartStream和RollingCommandMaxConcurrencyStream 的 RxJava demo

其实,最近在工作之余看Hystrix源代码已经有一个多月了, 除了对 HystrixCommandProperties ,HystrixCommand 和AbstractCommand 几个类比较了解以外,其余看山不是山,比较懵, 主要是因为H...

专业写BUG的程序员
55分钟前
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部