为什么在input中加了display:inline;再加宽，还有作用？
以前一直一位input是个行内元素，但是，行内元素的特性就是没有宽高的概念，元素多高，多宽，全凭内容撑起来的。
但是今天写了个demo,用chrome控制台显示：display:inline-block。
但是给label和input同时加上宽度和高度，input的高宽居然变了，但是奇怪的是在IE6.0下居然也生效，IE6.0不是不支持inline-block么？demo如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
label {width:500px;height:50px;}
input {width:200px;height:50px;}
</style>
</head>
<body>
<label for="mail">email</label>
<input id="mail" type="text" />
</body>
</html>
搜翻看论坛的过程中，得到的解释是：input和img属于可置换inline元素（Replaced element），可置换元素拥有内在尺寸（intrinsic dimensions），所以说他是天生的inline-block。
另外了解到inline-block就是由 替换元素 演变而来，IE没有将二者区分开，此外，inline-block 在 CSS 2.1 中才正式确定，而 IE6 的诞生远早于 CSS 2.1。
通过审查元素,IE7下input是属于inline标签,IE8及以上就都是display：inline-block;
下图是关于display的声明，网站原地址
另外label标签是是属于inline元素，这个没啥问题。
当然了，你如果将input人为设置为block，它自然是独占一行了，如下图
当你将input设置了float属性，它会脱离文档流，就没有换行，多个input会在一行上面。 如下图：
为什么在input中加了display:inline;再加宽，还有作用？的更多相关文章
- JS实现input中输入数字，控制每四位加一个空格（银行卡号格式）
前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法! ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- xBIM 实战02 在浏览器中加载IFC模型文件并设置特效
系列目录 [已更新最新开发文章,点击查看详细] 在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
随机推荐
- 【c语言】输入一个递增排序的数组的一个旋转，输出旋转数组中的最小元素
//旋转数组的最小数字 //题目:把一个数组最開始的若干个元素搬到数组的末尾.我们称之为数组的旋转. //输入一个递增排序的数组的一个旋转.输出旋转数组中的最小元素. //比如:数组{3.4,5,1, ...
- JavaFX学习之道：JavaFX之TableView
TableView表 TableColumn列 构建一个表主要有TableView,TableColumn,ObservableList,Bean. 加入列table.getColumns ...
- CSS文本简单设置
文本的设置直接影响到用户对界面的感受,好的文本设置能够让用户对界面有一种赏心悦目的感受,在这地方我们来简单的说说说对文本设置的时候,有哪些格式. 文本设置的时候我们应该注意什么: 平时我们文本设置的时 ...
- node09---中间件
如果我的的get.post回调函数中,没有next参数,那么就匹配上第一个路由,就不会往下匹配了. 如果想往下匹配的话,那么需要写next() 1app.get("/",funct ...
- [Android] Android开发优化之——对界面UI的优化（1）
在Android应用开发过程中,屏幕上控件的布局代码和程序的逻辑代码通常是分开的.界面的布局代码是放在一个独立的xml文件中的,这个文件里面是树型组织的,控制着页面的布局.通常,在这个页面中会用到很多 ...
- CoreData 从入门到精通 （一） 数据模型 + CoreData 栈的创建
CoreData 是 Cocoa 平台上用来管理模型层数据和数据持久化的一个框架,说简单点,就是一个数据库存储框架.CoreData 里相关的概念比较多,而且初始化也非常繁琐,所以对初学者的学习还是有 ...
- WPF学习（一） － XAML
Window.Grid.TextBox.Button等,都叫元素 xaml文档中,<>用来定义标签,标签可以用来描述元素或元素的属性,如: <Window> <Windo ...
- JS报错：Cannot read property 'type' of undefined
在做图片上传功能的时候,遇到了JS无法识别图片type的问题,在使用过程中是没有问题的,但是不知道为什么浏览器的Console报这个错误: Uncaught TypeError: Cannot rea ...
- ASP.NET MVC 使用FluentScheduler做定时任务
源代码地址: https://github.com/fluentscheduler/FluentScheduler 使用NuGet安装FluentScheduler 这是我实际项目中用到的代码,也可看 ...
- C#压缩和解压缩字节（GZip）
标题:C#压缩和解压缩字节(GZip的使用) 作用:此类在 .NET Framework 2.0 版中是新增的.提供用于压缩和解压缩流的方法和属性.定义:表示 GZip 数据格式,它使用无损压缩和解压 ...