为什么 input 元素能用 width 属性
前几天在是写网页的时候发现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会自动根据包含的内容来变化宽度 这是因为:对于内 ...
随机推荐
- stm32cube--ADC单次转换
stm32cube的ADC配置 ① ② ③ ④ ⑤ 二:用到的函数 HAL_StatusTypeDef HAL_ADCEx_Calibration_Start(ADC_HandleType ...
- JSONObject,JSONArray,Map,String之间转换
http://blog.csdn.net/superit401/article/details/51727739 1.String转JSONObject String jsonMessage = &q ...
- Android6.0之来电转接号码显示修改
Android6.0之来电转接号码显示修改 手机来电转接界面是在,点开Dialer-搜索框右边的三个点-设置-通话账户(要先插卡)-中国移动或者中国联通--来电转接--第一行,显示始终转接 将所有来电 ...
- 冰球项目日志3-yjw
小组讨论 今天大家讨论了之前各自想的方案的问题,基本确定了寻找击球点的方案,以及击球手运动轨迹规划的方案,这里我只是简单的说下我们的击球点的确定方案. 击球策略方案 方案分析 首先我们建立平面在直角坐 ...
- ActiveReports 11 新特性速递
又到了一年一度,翘首期盼的ActiveReports11 即将发布,ActiveReports 10 表控件横空出世,成为中国式复杂报表的救星后,ActiveReports11 又会有哪些令人惊奇的新 ...
- CentOS7 安装MongoDB 3.0服务器
1,下载&安装 MongoDB 3.0 正式版本发布!这标志着 MongoDB 数据库进入了一个全新的发展阶段,提供强大.灵活而且易于管理的数据库管理系统.MongoDB宣称,3.0新版本不只 ...
- leetcode刷题全纪录(持续更新)
2.Add Two Numbers 原题链接https://leetcode.com/problems/add-two-numbers/ AC解: public ListNode addTwoNumb ...
- ExtJS获取父子、兄弟容器元素方法
http://www.cnblogs.com/CoolHu/archive/2012/12/08/2808433.html 1.当前对象的父对象(上级对象) this.ownerCt: 2.当前对象的 ...
- 4.AE中的缩放,书签
1.书签 private void textBox1_TextChanged(object sender, EventArgs e) { if (txtBookmark.Text == "& ...
- Java注解入门
注解的分类 按运行机制分: 源码注解:只在源码中存在,编译后不存在 编译时注解:源码和编译后的class文件都存在(如@Override,@Deprecated,@SuppressWarnin ...