刚才发现，在Chrome下input标签的不同type类型所取的盒模型是不一样的。浪费了我很多时间去调试，唉。

type="text"时，给它设置宽度width：300px,此时的盒模型是这样的：

即300px指的是content部分的宽度，不包括padding，border，这是W3C标准下的标准盒模型；

而当type=search,buttom,submit时，width：300px的盒模型是这样的：

即包括了padding和border部分，这是微软IE浏览器版本678下的IE盒模型。使用时要注意。

关于input标签不同type下的盒模型的更多相关文章

  1. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  2. W3C标准下的盒模型与IE盒模型

    标准盒模型如下图所示: IE下盒模型如下图所示:

  3. Input标签中Type的类型及详细用法

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是text,这是我们见的最多 ...

  4. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  5. input标签写CSS时需要注意的几点（先收藏）

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  6. 盒模型与在低版本IE下的区别

    对css有一定了解的同学一定听说过盒模型,在这里以我自己的一点儿了解和认知来解释一下盒模型与盒模型在低版本IE浏览器下与其他浏览器下的区别. W3c标准下的盒模型 盒模型由 content(内容),p ...

  7. 关于input标签的需要注意的几个小问题

    1.input元素没有结束标签,只有开始标签,即使写上结束标签也不起作用.如下 <input type="text" value="text" /> ...

  8. Input标签使用整理

    0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能. ...

  9. input标签存在的兼容问题？

    当input标签在type为text时,在Firefox和Safari中的默认高度为22像素(包括上下边框)宽度为146像素(包括左右边框),而在IE中的默认高度为24像素,而宽度却和Firefox和 ...

随机推荐

  1. 笔记||Python3之字符串

    字符串是Python中最常用的数据类型.我们可以使用引号('或''或''')来创建字符串. 三引号特点:可以多行,也可以多行注释. a = 'hello world' a = "hello ...

  2. Dubbo源码分析之 SPI（一）

    一.概述 dubbo SPI 在dubbo的作用是基础性的,要想分析研究dubbo的实现原理.dubbo源码,都绕不过 dubbo SPI,掌握dubbo SPI 是征服dubbo的必经之路. 本篇文 ...

  3. 使用iCamera 测试AR0331 300w高分辨率摄像头小结

    使用iCamera 测试AR0331 300w高分辨率摄像头小结 先看下sensor特性 分辨率最高可达:2048*1536=300w像素 1080p帧率最高可达60fps 本次使用usb2,帧率14 ...

  4. 【CuteJavaScript】Angular6入门项目（3.编写服务和引入RxJS）

    本文目录 一.项目起步 二.编写路由组件 三.编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件 四.编写服务 1.为什么需要服务 2.编写服务 五.引入RxJS 1.关于RxJS 2.引 ...

  5. ConcurrentHashMap比其他并发集合的安全效率要高一些？

    前言 我们知道,ConcurrentHashmap(1.8)这个并发集合框架是线程安全的,当你看到源码的get操作时,会发现get操作全程是没有加任何锁的,这也是这篇博文讨论的问题——为什么它不需要加 ...

  6. 基于ATxmega128的ASF串口应用

    1.编辑串口的配置参数,一般将这些参数放在conf_usart.h配置头文件中,本程序将这些参数放在user_board.h头文件中 #define USART_SERIAL &USARTD0 ...

  7. HPS端的GPIO如何控制

    该笔记主要记录HPS端的GPIO如何控制,包括控制LED和Key 1.GPIO地址映射 Peripheral Base Address 0xf000_0000 64M 2.HPS外设 (1)GPIO ...

  8. 【ES6】函数的扩展

    1.函数参数默认值[详情例子参照ESMAScript 6入门 (阮一峰)] 允许为函数的参数设置默认值,即直接写在参数定义的后面.[例子1] 参数变量是默认声明的,所以不能用let或const再次声明 ...

  9. 《Java练习题》进阶练习题（三）

    编程合集: https://www.cnblogs.com/jssj/p/12002760.html 前言:不仅仅要实现,更要提升性能,精益求精,用尽量少的时间复杂度和空间复杂度解决问题. [程序68 ...

  10. appium+java（八）获取Toast内容信息

    前言 Appium中很经典的问题了,在两年前也就是2017年3月6号07:22分,我才看到appium1.6.3版本的发布,更新内容为Ios上可以实现Toast的获取,而Windows也就是安卓端,还 ...