刚才发现，在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. 使用iCamera 白平衡调试小结 CC1603@AR0134

    使用iCamera 白平衡调试小结 CC1603@AR0134 iCamera有强大的各种摄像头调试功能 之前演示过的有:曝光.增益.各种寄存器测试.RAW.yuv输出 今天测试下白平衡功能 绝大多数 ...

  2. PHP 7.4.0发布！一起看看有哪些新特性

    PHP 7.4.0 发布了,此版本标志着 PHP 7 系列的第四次特性更新. 看了英文手册后,发现其进行了许多改进,并带来了一些新特性,现在将这些新特性您: 1.Typed Properties 类型 ...

  3. Linux搭建NFS服务

    一.NFS服务简单介绍 NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中, ...

  4. OCR （光学字符识别技术）安装

    一.安装homebrew 1)打开终端直接输入安装命令:     /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.c ...

  5. 《Java练习题》习题集一

    编程合集: https://www.cnblogs.com/jssj/p/12002760.html Java总结:https://www.cnblogs.com/jssj/p/11146205.ht ...

  6. OpenSSL 自述

    1995 年, Eric A. Young 和 Tim J. Hudson 发明了 SSLeay,它是 SSL(Open-source Secure Sockets) 协议的实现.1998 年,You ...

  7. C#线程学习笔记六：线程同步--信号量和互斥体

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/23/Mutex_And_Semaphore.html,记录一下学习过程以备后续查用.     ...

  8. JavaFX如何为按钮设置快捷键？

    JavaFX为按钮设置快捷键的方式有很多,先说下常见的一种. 第一种: KeyCodeCombination kc1 = new KeyCodeCombination(KeyCode.W, KeyCo ...

  9. SAP B1：水晶报表中用Code128制作条型码的方法

    一.在[文件系统]中新建一个[Fonts文件夹],然后添加[Code128.ttf]文件. 二.在水晶报表里的[字段资源管理器]的[公式字段]中新建一个公式字段.点击[使用编辑器]之后弹出[公式工作室 ...

  10. VS激活（Visual Studio）

    以下是Visual Studio各个版本的激活密匙: Visual Studio Enterprise 企业版: BF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio ...