display:block、inline、inline-block的区别及应用案例
A、display:block就是将元素显示为块级元素.
block元素的特点是:
1、总是在新行上开始;
2、高度,行高以及顶和底边距都可控制;
3、宽度缺省是它的容器的100%,除非设定一个宽度;
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
B、display:inline就是将元素显示为行内元素.
inline元素的特点是:
1、和其它元素都在同一行上;
2、高,行高及顶和底边距不可改变;
3、宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
C、inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:
1、让一个inline元素从新行开始;
2、让块元素和其他元素保持在一行上;
3、控制inline元素的宽度(对导航条特别有用);
4、控制inline元素的高度;
5、无须设定宽度即可为一个块元素设定与文字同宽的背景色。
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)
并不是所有浏览器都支持此属性,目前支持的浏览器有: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中块元素呈递为内联对象。
IE下块元素如何实现display: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;...}
此文来自于http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html
display:block、inline、inline-block的区别及应用案例的更多相关文章
- display:inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline-block,block,inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- 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& ...
随机推荐
- pro1
#include<iostream> using namespace std; int main(void) { int i,a[],sum; cin>>i; for(i=0; ...
- shell脚本修改文件
https://blog.csdn.net/qq_37674858/article/details/80066264 2.2 使用sed命令对文件中的字符替换 例如:将aaaa字符串修改为bbbb [ ...
- Wpf Page间跳转传参数 And Window To Page
这段时间用到Wpf,页面间的跳转网上有不少的示例,但是有些已经不能用了,尤其是页面间的传参问题更是一大堆,但正确的解决方案却没有几个,或者说写的不清楚,让人走了很多弯路,查看官方文档后发现了正确的姿势 ...
- Sql Server中使用存储过程来实现一些时间差的改变
Sql Server中的时间差是使用DATEDIFF来是现的 语法如下:DATEDIFF(要显示时间格式,开始时间,结束时间) 比如:DATEDIFF(minute,'2019-2-28 8:30', ...
- k8s 常用指令
kubectl rolling-update redis-master --image=redis-master:2.0 基于镜像灰度发布 推荐链接
- openstack 的 lbaas 疑问
1 为什么lbaas的haproxy实现没有将其放到vrouter中,而vpnaas/fwaas都放到vrouter中呢? 放在vrouter上,可以减少vrouter到haproxy的流量路径,是怕 ...
- OpenStack 业务链networking-sfc介绍 (2) - 底层原理
原文链接:https://blog.csdn.net/bc_vnetwork/article/details/65630475 1. SFC底层实现原理 port chain和ovs driver/ ...
- mysql--视图,触发器,事务,存储过程
一.视图 视图是一个虚拟表(非真实存在),是跑到内存中的表,真实表是硬盘上的表,怎么就得到了虚拟表,就是你查询的结果,只不过之前我们查询出来的虚拟表,从内存中取出来显示在屏幕上,内存中就没有了这些表的 ...
- 2018年秋PTA乙级回顾
距离上次我一个人参加PAT考试已经过去快一个学期了,想想上次自己也是搞笑,自己一个人被这个书包就去了ZZ,人生地不熟的,乘坐公交车还坐反了.考完试因为不知道要等到考试结束就可以领取成绩证书,自己连那张 ...
- C语言中宏定义与C++中的内联函数
一,宏定义:在预处理的时候把宏定义的内容替换到代码中,正常编译. 1,无参数宏定义和有参数宏定义 (1)宏定义不能加分号,比如:#define PI 3.24;错的,#define PI 3.24 ...