display:inline、block、inline-block 的区别
一、块级元素 与 行级元素
要理解display:inline、block、inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素。
1、块级元素
总是另起一行开始;
高度,行高以及顶、底边距都可以控制;
宽度缺省是它所在容器的100%,除非设定一个宽度。
块级元素通常作为其他元素的容器,可以容纳内联元素和其他块元素。block element的HTML标签如下:
address-地址
blockquote-块引用
center-居中对齐块
div-常用块级元素
dl-定义列表
form-交互表单
fieldset-form控制组
hr-水平分隔线
ol-排序表单
ul-非排序列表
dir-目录列表
p-段落
pre-格式化文本
isindex-input prompt
menu-菜单列表
table-表格
h1...h6-标题
noframes-frames可选内容(对于不支持frame的浏览器显示此区块内容)
noscript-可选脚本内容(对于不支持script的浏览器显示此内容)
2、行级元素
和其他元素都在一行上;
高度,行高以及顶、底边距不可改变;
高度就是它所容纳的文字或图片的宽度,不可改变。
一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其他内联元素,内联元素的HTML标签分类如下:
a-锚点
abbr-缩写
acronym-首字
font-字体设定(不推荐)
b-粗体(不推荐)
big-bidi override
em-强调
br-换行
small-小字体文本
strong-粗体强调
i-斜体
img-图片
input-输入框
label-表格标签
select-项目选择
textarea-多行文本输入框
u-下划线
var-定义变量
cite-引用
code-计算机代码(在引用源码的时候需要)
dfn-定义字段
kbd-定义键盘文本
q-短引用
s-中划线(不推荐)
strike-中划线
sub-下标
sup-上标
tt-电传文本
HTML中有些元素是可变元素,可根据上下文语境决定该元素为块元素或者内联元素。
applet-java applet
button-按钮
del-删除文本
iframe-inline frame
ins-插入的文本
map-图片区块(map)
object-object对象
script-客户端脚本
二、inline、block、inline-block 的区别
1、display:block就是将元素显示为块级元素
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
div, p, h1, form, ul 和 li是块元素的例子。
2、display:inline就是将元素显示为行内元素
inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
span, a, label, input, img, strong 和em是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
3、display:inline-block
将对象呈递为内联对象,但是对象的内容作为块对象呈递旁边的内联对象会被呈递在同一行内,允许空格。inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性),但是该元素具有块元素的特性,可以设置其高度,宽度等属性。在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
兼容性
并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
对IE8以下的版本,可以采用以下两种方法来实现inline-block的效果
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:
div {display:inline; zoom:1;...}
display:inline、block、inline-block 的区别的更多相关文章
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- (转载)display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- block, inline和inline-block的区别
display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...
- 2017-08-20 block,inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- div横排放置对齐问题;block,inline,inline-block区别
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. 缺点:不易控制 2.只有左侧div设置为float:left,右侧div设置 ...
随机推荐
- python生成RSS(PyRSS2Gen)
既然能够用python解析rss,那么也顺带研究下生成rss. 其实很简单,只是生成一个比较特殊点的xml文档而已. 这里我使用了PyRss2Gen,用法很简单,看代码就知道了,如下: import ...
- 浅学JSON——Json.NET之首次试手
首次遭遇Json格式,缘由项目中用到Json数据,需要进行解析,为此,将Json数据转为了自己较为熟悉的DataTable格式,以此展示至DataGridView中,验证是否成功. 直接上代码: // ...
- The Basics of 3D Printing in 2015 - from someone with 16 WHOLE HOURS' experience
全文转载自 Scott Hanselman的博文. I bought a 3D printer on Friday, specifically a Printrbot Simple Metal fro ...
- 编译器 expected unqualified-id before numeric constant 错误
今天调试代码,碰到expected unqualified-id before numeric constant 错误,代码的错误模块出现在一个函数模块上, 奇怪的是这个函数模块之前编译了很多次,也没 ...
- Android图像处理实例教程
Android图像处理实例教程 原始出处 http://vaero.blog.51cto.com/4350852/856750
- 批量删除SharePoint 2010的List中的item
第一种方式:循环遍历List中的所有item,然后根据条件去判断当前item是否应该被删除[注:要用 i-- 方式去遍历,这也是删除集合里面item的常用做法,如果用 i++ 的方式去遍历删除,会出错 ...
- XStream-----把JavaBean转换为xml的工具
1. 什么作用 可以把JavaBean转换为(序列化为)xml 2. XStream的jar包 核心JAR包:xstream-1.4.7.jar: 必须依赖包:xpp3_min-1.1.4c(XML ...
- 如何将Android Studio项目提交(更新)到github
转载:http://blog.csdn.net/jinrall/article/details/45787477 前言 在写这篇文章之前首先我假设你已经安装了Android Studio 并已经会用A ...
- Android 自定义实现switch开关按钮
前几天在看蘑菇街上有个开关按钮: 就在想是怎样实现的,于是反编译了它的源码,但是这时得到了下面的几张图片: 图片对应的名称: 无色长条:switch_frame; 白色圆点:switch_btn_pr ...
- C#中Invoke的用法()
invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和beg ...