为什么在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 ...
随机推荐
- CSS3可伸缩框属性，可用于等分显示子元素或按比例显示子元素的大小
使用方法跟Android的android:layout_weight属性类似.可类比Android中的使用方法.这样比較好记,因为眼下全部浏览器都不支持大部分的属性,所以全部的属性都须要加上Firef ...
- CDOJ 876 爱管闲事 DP
爱管闲事 春希非常爱管闲事,他每天都会抽空帮助一些同学,由于春希非常死板,出于公平性,春希不会先帮助后来找他的同学. 现在有n个同学需要他的帮助,虽然他很想一天之类帮助所有人,但毕竟精力有限,于是他决 ...
- bzoj2663: [Beijing wc2012]灵魂宝石(二分+匈牙利)
2663: [Beijing wc2012]灵魂宝石 题目:传送门 题解: 又是一道卡精度的题目. 很容易就可以看出单调性啊,如果R越大,选的人就越多,R越小,选的人就越少. 那最小值就直接搞咯. 那 ...
- CxImage学习
官方下载地址是:http://www.xdp.it/cximage/ 打开工程后可以看到下例这些工程: - CxImage - CxImageCrtDll - CxImageMfcDll - dome ...
- [JZOJ 5894] [NOIP2018模拟10.5] 同余方程 解题报告（容斥）
题目链接: http://172.16.0.132/senior/#contest/show/2523/0 题目: 题解:(部分内容来自https://blog.csdn.net/gmh77/arti ...
- [JZOJ 4307] [NOIP2015模拟11.3晚] 喝喝喝 解题报告
题目链接: http://172.16.0.132/senior/#main/show/4307 题目: 解题报告: 题目询问我们没出现坏对的连续区间个数 我们考虑从左到有枚举右端点$r$,判断$a[ ...
- SQL Server: Windows Firewall with Advanced Security
SQL Database Engine: TCP 1433 & UDP 1434 SQL Analysis Service: TCP 2383 (2382 if named instance) ...
- 「JavaSE 重新出发」01. Java介绍
「白皮书」关键术语 简单性(C++--) 面向对象 分布式 健壮性 安全性 体系结构中立 可移植性 解释型 高性能 多线程 动态性 Java 发展历程 SUN公司--Stanford Universi ...
- unserialize反序列化错误的解决办法
1. UTF-8编码解决反序列化出错问题 function mb_unserialize($serial_str) { $serial_str = str_replace("\r" ...
- 被我忽略许久的set
心塞,set一直是我忽略的一个数据结构 1.生成一个set: 1) set(iterable) 传入一个可以迭代的数据结构: eg:字符串;元组;列表,字典 2) {v1,v2,.......,vn} ...