display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以像span一样显示在一行了。

它可以让行内显示为块的元素,变为行内显示,例如
<div> DIV1 </div>
<div> DIV2 </div>
这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2这时候显示在同一行了,试试看吧。
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>

display:inline比较经典的用法是用在 <ul> 下的 <li> 中 内联 block一般一个块占一行,除非float inline是自动排为一行,就象段内的文字一样,可成为多行。

display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div> <span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>

display:inline与display:block——行内元素显示与块级元素显示的更多相关文章

  1. 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

    块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的 ...

  2. line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  3. 浅谈css的行内类型标签和块级标签

    常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...

  4. 重要的事情说三遍:列表 ul / ol 等是块级元素,是块级元素,块级元素

    HTML 块级元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:“块级元素”译为 block level element,“行内元素”译为 inline element. 块级元素在浏 ...

  5. html:常见行内标签,常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

  6. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  8. CSS中的块级元素(block)与行内元素(inline)

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

  9. 块级元素、行内元素、display属性

    块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...

随机推荐

  1. A Deep Compositional Framework for Human-like Language Acquisition in Virtual Environment

    论文地址:https://128.84.21.199/abs/1703.09831 这篇论文来自于百度的机器学习研究院,作者为:徐伟.余昊男.张海超 这篇论文用了多种技术的组合: reinforcem ...

  2. 用HTML创建表格

    本章目标:了解掌握表格的基本结构<table><tr><th><td> 掌握跨行.跨列属性colspan rowspan 掌握表格相关修饰属性borde ...

  3. CI和CD的意思

    openstack中CI和CD的意思: 持续集成(CI)和持续交付(CD)

  4. Python入门(六):标准库

    操作系统接口 os模块提供了不少与操作系统相关联的函数. import os os.getcwd() # 返回当前的工作目录 os.chdir('d:/') # 修改当前的工作目录 os.system ...

  5. phpstorm 内存设置

    https://blog.csdn.net/qq_33862644/article/details/81938970

  6. iOS App 审核被拒的原因搜罗

    本文转载至 http://ju.outofmemory.cn/entry/108500   iOS app 审核 1.程序有重大bug,程序不能启动,或者中途退出. 2.绕过苹果的付费渠道,我们之前游 ...

  7. Activity公用跳转到主Activity

    public class VSession { private VSession() { } public static VSession getInstance() { if (session == ...

  8. python序列中添加高斯噪声

    def wgn(x, snr): snr = 10**(snr/10.0) xpower = np.sum(x**2)/len(x) npower = xpower / snr return np.r ...

  9. git、git bash、git shell的区别

    之前安装了github(CSDN上找的,官网的下不来,貌似要FQ - -)后,自带了git shell,如图: 输命令的时候发现网上的一些命令不管用,譬如:git ls –a 查看隐藏的 .git 文 ...

  10. PHP下SESSION无法跨页传递的解决

    修改PHP.ini1.Windows下PHP的session文件保存路径要设置成为一个绝对路径session.save_path = C:\windows\temp2.为temp设置权限,允许User ...