刚才发现，在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. python输出日志到文件（每天一个日志）

    import logging from logging.handlers import TimedRotatingFileHandler logger = logging.getLogger('sim ...

  2. 深入探讨多态性及其在Java中的好处

    多态是面向对象软件的基本原理之一.该术语通常表示可以具有多种形式的事物.在面向对象的方法中,多态使编写具有后期绑定引用的程序成为可能.尽管在Java中创建多态引用很容易,但其背后的概念对整体编程产生了 ...

  3. springboot自动装配(3)---条件注解@Conditional

    之前有说到springboot自动装配的时候,都是去寻找一个XXXAutoConfiguration的配置类,然而我们的springboot的spring.factories文件中有各种组件的自动装配 ...

  4. 【JS】312- 复习 JavaScript 严格模式（Strict Mode）

    点击上方"前端自习课"关注,学习起来~ 注:本文为 < JavaScript 完全手册(2018版) >第30节,你可以查看该手册的完整目录. 严格模式是一项 ES5 ...

  5. 【Html JS】使用问题记录

    [Html JS]使用问题记录 ================================================================ 1.td 文字换行 2.正则表达式 = ...

  6. Redis数据类型和操作

    <"Java技术员"成长手册>,包含框架.存储.搜索.优化.分布式等必备知识,都收集在GitHub JavaEgg ,N线互联网开发必备技能兵器谱,欢迎指导 Redis ...

  7. srvany.exe读取配置文件问题

    使用instsrv.exe与srvany.exe将自己的程序弄成免登录系统就能自动启动了,然而程序运行需要读取相应的配置文件,所以程序是跑起来了,但不能正常使用,找了很久终于找到了答案.在之前的基础上 ...

  8. mysql5.7搭建主从库

    #MYSQL单节点的mysql远远不能满于生成,以防止生产服务器宕机,磁盘空间溢满等种种原因,需要有一个备用数据库, 这时候主从库是不错的选择,在是数据库集群中也起到了很大的作用 #MySQL 主从复 ...

  9. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  10. ERP系统到底能做什么？

    ERP的定义:在先进的企业管理思想的基础上,应用信息技术实现对整个企业资源的一体化管理. 关键词:信息技术 先进的管理思想 企业资源一体化: 那么,ERP系统在企业日常经营管理中到底能做什么? 1.在 ...