文档章节

block、inline、inline-block对比

路小磊
 路小磊
发布于 2015/07/23 22:55
字数 314
阅读 90
收藏 5

display:block

  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,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不会产生边距效果。

display:inline-block

  1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

本文转载自:http://www.cnblogs.com/KeithWang/p/3139517.html

路小磊

路小磊

粉丝 433
博文 55
码字总数 42397
作品 5
呼和浩特
程序员
私信 提问
加载中

评论(0)

block,inline和inline-block概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;i...

Galy_绿
2015/12/05
56
0
block,inline和inline-block概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;i...

巴顿
2015/08/27
391
1
IE6/IE7下:inline-block解决方案

IE6/IE7下:inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时,所有的浏览器都支持; 2、block元素的display属性设置为...

LorinLuo
2016/03/31
77
0
前端——display:inline-block兼容ie6/7的写法

1、display:inline-block作用? 使用display:inline-block属性,可以使行内元素或块元素能够变成行内块元素,简单直白点讲就是不加float属性就可以定义自身的宽、高,同时又能使该元素轻松在父...

coolrp
2016/12/02
8
0
inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; display:inline; zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是...

GIFCOOL
2012/09/04
121
0

没有更多内容

加载失败,请刷新页面

加载更多

3 汇编的函数调用

3 汇编的函数调用 3.1 无参数和返回值的函数调用 void func_void(){ printf("func, no param, no return value\n");}// func_void();asm ("call func_void"); // call指令调......

风从东方来
今天
59
0
AQS讲的很好,很透彻的一篇

JUC AQS ReentrantLock源码分析(一) https://blog.csdn.net/java_lyvee/article/details/98966684

南桥北木
昨天
49
0
0219 springmvc-拦截器和响应增强

拦截器 拦截器分同步拦截器和异步拦截器; HandlerInterceptor 方法和执行时机 可以看DispathcerServlet的原来确定它的三个方法的执行时机; AsynHandlerInterceptor 看注释,主要用来清理在...

李福春carter
昨天
44
0
返沪第一天,学习不能断,工作还要继续

返沪第一天 今天是2020年02月19日,是我返沪第一天,早上的体温是36.5,晚上的体温为36.6. 呵呵 -- 正常 说起返沪,海囧有木有。 回沪需要多转(转车三次) 从家开车到高铁站(这可是我第一次...

lihua20103181
昨天
82
0
Golang并发编程之互斥锁、读写锁详解

[TOC] Golang并发编程之互斥锁、读写锁详解 谢谢慕课网cap1537老师,写的不错. 我们对Go语言所提供的与锁有关的API进行说明。这包括了互斥锁和读写锁。我们在第6章描述过互斥锁,但却没有提到...

我爱吃炒鸡
昨天
48
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部