文档章节

浅谈block, inline和inline-block的区别

o
 osc_z1hvg4cu
发布于 2018/04/24 17:12
字数 655
阅读 21
收藏 0

精选30+云产品,助力企业轻松上云!>>>

block 块元素    inline 内联元素

常见的块元素有:div, p, h1~h6, table, form, ol, ul等

常见的内联元素有:span, a, strong, em, label, input, select, textarea, img, br等

display:block特点

1、独占一行,多个block元素另起一行,默认情况下,block元素宽度自动填满其父元素宽度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div style="width:200px;">
 9         <div>div块元素</div>
10         <p>p块元素</p>
11         <h1>h1块元素</h1>
12         <table border="1">
13           <tr>
14             <th>表头</th>
15             <th>表头</th>
16           </tr>
17           <tr>
18             <td>表格单元</td>
19             <td>表格单元</td>
20           </tr>
21         </table>
22         <form>
23             First name:<input type="text" name="firstname" value="Mickey">
24             <br>
25             Last name:<input type="text" name="lastname" value="Mouse">
26         </form> 
27         <ol>
28           <li>Coffee</li>
29           <li>Tea</li>
30           <li>Milk</li>
31         </ol>
32     </div>
33 </body>
34 </html>
35 
36 效果如下:

可以轻松的发现这些元素都是独占一行,通过审查元素我们可以看到这些标签的display属性都是block,当前父级元素的width是200px,当改变父级元素宽度为70px时,效果如下:
所以默认情况下,block元素宽度自动填满其父元素宽度

2、block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。

3、block元素可以设置margin和padding属性。

display:inline特点

1、inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化

2、inline元素设置width,height属性无效。

3、inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <span>span内联元素</span>
 9     <strong style="width:10px">strong内联元素</strong>
10     <em>em内联元素</em>
11     <label>label内联元素</label>
12     <input type="text" value="input内联元素">
13     <div style="width:10px">div块元素</div>
14 </body>
15 </html>

效果图如下:

可以看出对inline元素设置宽度不起作用,它的宽度是随着内容的长度变化的

display:inline-block特点

简单的说,就是将对象呈现为inline对象,让block元素不再独占一行,多个block元素可以同排一行,且元素具有block的属性,可设置宽高,是block和inline元素的综合体。

 

 

 

 
 
 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结。...

姚欣炜
2014/05/27
67
0
应不应该使用inline-block代替float

本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此...

石佛慈悲
2013/12/08
148
2
CSS中 inline、block、inline-block的区别

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象,block是声明块对象,那么inline-block是什么意思,即内联又成块?接下来做个测...

喜欢敲代码的感觉
2014/10/20
37
0
浅析inline-block--使用inline-block创建布局

  inline-block前端程序猿们肯定不陌生,它是display属性的一个取值。   之所以称之为inline-block。是因为它兼具行内元素(inline-element)和块级元素(block-element)的特征。 块级元素(...

Cgruppo
2016/05/27
0
0
display:inline、block、inline-block的区别以及该死的ie6兼容问题

display:block就是将元素显示为块级元素.   block元素的特点是:   总是在新行上开始;   高度,行高以及顶和底边距都可控制;   宽度缺省是它的容器的100%,除非设定一个宽度   <...

周轩宇
2013/12/03
37
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈对python pandas中 inplace 参数的理解

这篇文章主要介绍了对python pandas中 inplace 参数的理解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 pandas 中 inplace 参数在很多函数中都会有,它的作用是:是否...

Linux就该这么学
55分钟前
20
0
C++ 从基本数据类型说起

前言 int 在32位和64位操作系统,都是四个字节长度。为了能编写一个在32位和64位操作系统都能稳定运行的程序,建议采用std::int32_t 或者std::int64_t指定数据类型。*与long随操作系统子长变...

osc_sxdofc9c
55分钟前
9
0
游戏音乐的作用以及起源

游戏音乐是由特殊的音乐、语言符号、美学符号组成,在电子游戏的发展下,游戏音乐越来越成熟,游戏音乐与美术相融合,能够带给玩家视觉与声音的感官冲击,形成游戏音乐所具有的独特的审美效果...

奇亿音乐
55分钟前
10
0
2020,最新Model的设计-APP重构之路

很多的app使用MVC设计模式来将“用户交互”与“数据和逻辑”分开,而model其中一个重要作用就是持久化。下文中设计的Model可能不是一个完美的,扩展性强的model范例,但在我需要重构的app中,...

osc_mfzkzkxi
56分钟前
4
0
面对职业瓶颈,iOS 开发人员应该如何突破?

我们经常看到 iOS 开发人员(各种能力水平都有)的一些问题,咨询有关专业和财务发展方面的建议。 这些问题有一个共同点:前面都会说“我现在遇到了职业困境”,然后会问一些诸如“我是否应该...

osc_gfpedeca
57分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部