前几天在是写网页的时候发现input可以设置宽高,很疑惑,上网查了之后发现:
简单的认为 input 就是 inline 元素是片面的。元素默认以何种 display 属性值显示出来,这个其实更多的时候是由浏览器决定的(不同浏览器的差异性,导致我们需要 reset CSS),下面是部分浏览器 input 元素默认 CSS:
background-color: #FFF;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
Webkit-r61376
input, textarea, keygen, select, button, isindex, datagrid {
margin: 0__qem;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0;
text-shadow: none;
display: inline-block;
text-align: -webkit-auto;
}
input[type="search"] {
-webkit-appearance: searchfield;
-webkit-box-sizing: border-box;
}
我们可以看到在IE中,input 默认样式 zoom:1; overflow: hidden;都是触发了 hasLayout 或者 Block formatting contexts。webkit 内核浏览器中是默认定义为 inline-block 的,firefox 和 opera 默认没有定义任何 display 属性值。所以 IE 中 input display 默认属性值并不是 inline-block,只是触发了 hasLayout 或者 BFC使其具有了 inline-block 类似的特性(可设置宽高)。webkit 中如果 input type=search,由于默认的 box-sizing 是 border-box,对其设置宽高和其他浏览器表现出来也是有差异的,所以有时候我们会重置为:
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
为什么 input 元素能用 width 属性的更多相关文章
-
html input元素的所有type属性
<input /> 属性 type="text" 输入框的类型为文本 type="password" 输入框的类型为密码 type="ra ...
-
了解HTML表单之input元素的30个元素属性
目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...
-
HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
-
CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
-
定制input元素
定制input元素 input元素可以用来生成一个供用户输入数据的简单文本框.其缺点在于用户在其中输入什么值都可以.有时这还不错,但是有时设计者可能希望让用户输入特定类型的数据.在后一种情况下,可以对 ...
-
HTML 5 服务器发送事件、Input 类型、表单元素、表单属性
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...
-
css中 Span 元素的 width 属性无效果原因及多种解决方案
先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...
-
修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
-
css中span元素的width属性无效果原因及多种解决方案
先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...
随机推荐
-
CentOS 下使用yum安装nodejs
在xenserver虚拟机器上安装nodejs 尝试失败方法, 1.比如解压编译好的文件,使用ln设置全局变量,因为解压出来没有bin目录无法使用 ln -s /home/kun/mysofltwar ...
-
IO(七)----转换流
输入字节流的转换流:InputStreamReader 是字节流通向字符流的桥梁. 输出字节流的转换流:OutputStreamWriter 可以把输出字节流转换成输出字符流 . 是符流通向字节流 ...
-
TP复习6
## ThinkPHP 3.1.2 查询方式#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.普通查询方式 a.字符串 $arr=$m->wher ...
-
Pascal 语言中二维数组:矩阵问题
[题目]方阵填数:在一个 N*N的方阵中,填入 1,2..... N*N个数,并要求构成如下格式: 图例:10 11 12 1 9 16 13 2 8 ...
-
Asp.Net中使用Couchbase——Memcached缓存使用篇
Asp.Net中使用Couchbase——Memcached缓存使用篇 前言 在上一篇Asp.Net中使用Couchbase——Memcached缓存入门篇http://www.cnblogs.com ...
-
JAVAEE——BOS物流项目05:OCUpload、POI、pinyin4J、重构分页代码、分区添加、combobox
1 学习计划 1.实现区域导入功能 n OCUpload一键上传插件使用 n 将文件上传到Action n POI简介 n 使用POI解析Excel文件 n 完成数据库操作 n 使用pinyin4J生 ...
-
Android Service 基础
启动方式 startService(Intent) 这种方式启动的Service可以在后台无限期的运行,与启动它的组件没有关系. bindService 绑定Service.它提供了一种类似C/S结构 ...
-
JavaScript(第四天)【运算符】
ECMA-262描述了一组用于操作数据值的运算符,包括一元运算符.布尔运算符.算术运算符.关系运算符.三元运算符.位运算符及赋值运算符.ECMAScript中的运算符适用于很多值,包括字符串.数值.布 ...
-
如何使用vs将asp.net core项目添加容器支持并发布docker镜像到私有dockerhub和添加k8s/helm管理
这篇文章介绍一下,如何使用VS2017给asp.net core添加容器支持,并发布镜像到私有docker hub,然后用chart管理容器镜像的操作流程. 话不多说,just do it. 新建项目 ...
-
Android软键盘事件imeOptions响应
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在android发开过程中,有时候需要对EditText的软键盘进行监听. 当点击软键盘回车位置按键的时候,需要实现 完成.前进.下 ...