为什么 input 元素能用 width 属性

时间:2021-09-08 12:06:21

前几天在是写网页的时候发现input可以设置宽高,很疑惑,上网查了之后发现:

 简单的认为 input 就是 inline 元素是片面的。元素默认以何种 display 属性值显示出来,这个其实更多的时候是由浏览器决定的(不同浏览器的差异性,导致我们需要 reset CSS),下面是部分浏览器 input 元素默认 CSS:

IE6、IE7、IE8、IE9(部分)

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 属性的更多相关文章

  1. html input元素的所有type属性

    <input /> 属性 type="text" 输入框的类型为文本 type="password" 输入框的类型为密码 type="ra ...

  2. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  3. HTML(七)HTML 表单&lpar;form元素介绍,input元素的常用type类型,input元素的常用属性&rpar;

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input&gt ...

  4. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  5. 定制input元素

    定制input元素 input元素可以用来生成一个供用户输入数据的简单文本框.其缺点在于用户在其中输入什么值都可以.有时这还不错,但是有时设计者可能希望让用户输入特定类型的数据.在后一种情况下,可以对 ...

  6. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  7. css中 Span 元素的 width 属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  8. 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

    一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...

  9. css中span元素的width属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

随机推荐

  1. CentOS 下使用yum安装nodejs

    在xenserver虚拟机器上安装nodejs 尝试失败方法, 1.比如解压编译好的文件,使用ln设置全局变量,因为解压出来没有bin目录无法使用 ln -s /home/kun/mysofltwar ...

  2. IO(七)----转换流

    输入字节流的转换流:InputStreamReader 是字节流通向字符流的桥梁. 输出字节流的转换流:OutputStreamWriter  可以把输出字节流转换成输出字符流 .  是符流通向字节流 ...

  3. TP复习6

    ## ThinkPHP 3.1.2 查询方式#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.普通查询方式 a.字符串 $arr=$m->wher ...

  4. Pascal 语言中二维数组:矩阵问题

    [题目]方阵填数:在一个 N*N的方阵中,填入 1,2..... N*N个数,并要求构成如下格式: 图例:10 11 12  1            9  16 13  2            8 ...

  5. Asp&period;Net中使用Couchbase——Memcached缓存使用篇

    Asp.Net中使用Couchbase——Memcached缓存使用篇 前言 在上一篇Asp.Net中使用Couchbase——Memcached缓存入门篇http://www.cnblogs.com ...

  6. JAVAEE——BOS物流项目05:OCUpload、POI、pinyin4J、重构分页代码、分区添加、combobox

    1 学习计划 1.实现区域导入功能 n OCUpload一键上传插件使用 n 将文件上传到Action n POI简介 n 使用POI解析Excel文件 n 完成数据库操作 n 使用pinyin4J生 ...

  7. Android Service 基础

    启动方式 startService(Intent) 这种方式启动的Service可以在后台无限期的运行,与启动它的组件没有关系. bindService 绑定Service.它提供了一种类似C/S结构 ...

  8. JavaScript&lpar;第四天&rpar;【运算符】

    ECMA-262描述了一组用于操作数据值的运算符,包括一元运算符.布尔运算符.算术运算符.关系运算符.三元运算符.位运算符及赋值运算符.ECMAScript中的运算符适用于很多值,包括字符串.数值.布 ...

  9. 如何使用vs将asp&period;net core项目添加容器支持并发布docker镜像到私有dockerhub和添加k8s&sol;helm管理

    这篇文章介绍一下,如何使用VS2017给asp.net core添加容器支持,并发布镜像到私有docker hub,然后用chart管理容器镜像的操作流程. 话不多说,just do it. 新建项目 ...

  10. Android软键盘事件imeOptions响应

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在android发开过程中,有时候需要对EditText的软键盘进行监听. 当点击软键盘回车位置按键的时候,需要实现 完成.前进.下 ...