刚才发现，在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. cs5642-v3各配置文件测试图片对比

    寄存器功能强大,可以配置很多参数,每个参数出来的图像都不同 我们以cs5642-v3的两个配置进行了对比测试 测试准备 配置文件:ov5642_960p_RAW和OV5642_YUV_VGA 测试摄像 ...

  2. Python3 函数实践之简易购物系统

    函数实践之简易购物系统 项目主要需求: 用户可以自行选择功能 该购物系统具有注册/登录/购物/购物车/退出登录功能 用户在登录后才能使用购物/购物车/退出登录功能 ''' 注册 登录 购物 购物车 退 ...

  3. 大数据学习笔记——Java篇之基础知识

    Java / 计算机基础知识整理 在进行知识梳理同时也是个人的第一篇技术博客之前,首先祝贺一下,经历了一年左右的学习,从完完全全的计算机小白,现在终于可以做一些产出了!可以说也是颇为感慨,个人认为,学 ...

  4. 小白的springboot之路（十）、全局异常处理

    0.前言 任何系统,我们不会傻傻的在每一个地方进行异常捕获和处理,整个系统一般我们会在一个的地方统一进行异常处理,spring boot全局异常处理很简单: 介绍前先说点题外话,我们现在开发系统,都是 ...

  5. Codeforces Round #592 (Div. 2)

    A. Pens and Pencils 题目链接:https://codeforces.com/contest/1244/problem/A 题意: 给定五个数 a , b , c , d , k 求 ...

  6. Java String 如何加双引号

    public class Test{ public static void main(String[] args){ String str1 = "\"name\"&qu ...

  7. Python与线性代数基本概念

    在Python中使用Numpy创建向量: x = np.array([1, 2, 3, 4]) 创建3 x 3矩阵 B = np.array([[1, 2],[3, 4],[5, 6]]) Shape ...

  8. ssh服务介绍及配置

    一.ssh介绍 1.什么是 ssh ssh 是 Secure Shell 的缩写,是一个建立在应用层上的安全远程管理协议.ssh 是目前较为可靠的传输协议,专为远程登录会话和其他网络服务提供安全性.利 ...

  9. Python学习之while

    count = 0while count <= 5: print('人生苦短,我用Python!', 'count = ', count) count += 1

  10. springboot搭建项目，实现Java生成随机图片验证码。

    这篇文章主要介绍了如何通过Java如何生成验证码并验证.验证码的作用我想必大家都知道,话不多说开始实施! 首先创建一个springboot项目以下是项目结构,内有utli工具类.存放生成图片验证码方法 ...