【CSS】block,inline和inline-block细节对比

转载 2015年11月20日 22:15:16

• display: block

  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

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

  3. block元素可以设置marginpadding属性。


• display: inline

  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width, height属性无效。
  3. inline元素marginpadding属性,水平方向的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的同行特性。

CSS中display属性:block、inline和inline-block的区别

设置span的高度和宽度无效,span的margin和padding无效
  • aitangyong
  • aitangyong
  • 2015年02月28日 20:51
  • 3336

HTML5 CSS block / inline / inline-block

这一章节讲到了block,inline还有inline-block的知识 block:块元素 inline:内联元素 具体的转载了一片文章过来,可以看下面的 转载地址:http://www.c...
  • bestallen
  • bestallen
  • 2016年07月29日 12:57
  • 392

display属性值block,inline和inline-block概念和区别

一、总体概念1、block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block...
  • javaloveiphone
  • javaloveiphone
  • 2016年03月18日 17:32
  • 3119

关于display的属性:block和inline-block以及inline的区别

介绍一些简单的布局,block,inline-block,inline的简单区别,处女作哈哈
  • sinat_31311369
  • sinat_31311369
  • 2016年09月03日 20:48
  • 2021

inline-block和block元素水平居中显示

http://jingyan.baidu.com/article/e2284b2b67b5f1e2e6118d22.html 一般来说,在页面中需要进行水平居中的元素,大致分为两种,一种是块级元素,...
  • tel15277169530
  • tel15277169530
  • 2016年11月03日 19:57
  • 2715

HTML学习笔记(一)block,inline和inline-block的概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block...
  • u013780235
  • u013780235
  • 2016年03月02日 11:20
  • 2194

display:inline-block的icon不垂直居中问题

需要了解知识点: 1、基线:基线并不是汉字的下端沿,而是英文字母x的下端沿; 2、行高指的是文本行的基线间的距离; 图片来源链接地址! 进入正题: 父元素设置line...
  • u012076852
  • u012076852
  • 2016年09月07日 11:50
  • 3762

告诉你CSS中 display:inline-block到底是个什么鬼

display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了in...
  • Vera0707
  • Vera0707
  • 2015年11月15日 22:13
  • 469

css强制换行和强制不换行

转自:http://chenfengming.cn/front-end/css-qiang-zhi-huan-xing-he-qiang-zhi-bu-huan-xing.html 中文情况...
  • ystyaoshengting
  • ystyaoshengting
  • 2015年05月21日 20:12
  • 3422

html的块级block、内联inline、内联块级inline-block元素基础

概念 块级:block 内联:inline 内联块级:inline-block   在html元素中,元素会有display属性 display属性默认值是bloc...
  • kongxh_1981
  • kongxh_1981
  • 2015年11月21日 23:05
  • 2046
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【CSS】block,inline和inline-block细节对比
举报原因:
原因补充:

(最多只允许输入30个字)