在做登录框的时候，需要一个select 元素作为账号输入，一个input作为密码输入框。在css 文件中，将这两个元素的position 设置为relative ，并且width 设置为100%。刷新页面后发现，两个元素的长度居然不是一样的。最终在stackoverflow 中找到了答案。原来，实际宽度 = width + padding + border，实际高度 = height + padding + border 。要想自己设定的width 或者height 就是实际的宽度或者高度，可以设置box-sizing: border-box;

Select input 两个元素的宽度高度跟设定值不一致的问题的更多相关文章

  1. jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

    曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...

  2. jq 获取各个元素的宽度高度的方法

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  3. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  4. js 元素的各种宽度高度

    一.属性 1.只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和 ...

  5. 实现span设置宽度（行内元素本来不支持调宽度高度这些样式）（变成行内块元素：display:inline-block;）

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  6. box-sizing属性（指定针对元素的宽度与高度的计算方法）

    在css中,使用width属性与height属性来指定元素的宽度与高度.使用box-sizing属性,可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内部补白区域与边框 ...

  7. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  8. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  9. 【提取元素的值 】【追加文本append】【删除文本remove】【class的操作】【读取元素的宽度，高度】

    1.取值 $("#test").text()                                    //取id=test里面的文字 $("#test&qu ...

随机推荐

  1. VMware vCenter Server 6.5配置群集功能

    虚拟数据中心是一种容器,其中包含用于操作虚拟机的完整功能环境所需要的全部清单对象.可以创建多个数据中心,以实际需求创建 . 群集是一组主机,将主机添加到群集时,主机的资源将成为群集资源的一部分,群集管 ...

  2. Houdini技术体系 基础管线（四） ：Houdini驱动的UE4植被系统 下篇

    背景 在上篇中,实现了使用Houdini在UE4里根据地形过程生成植被的最基本的原型.并且支持把植被在UE4里Bake成使用的HierarchicalInstancedStaticMeshCompon ...

  3. 五、005-环境安装【docker、fabric】

    1.参考地址:https://hyperledger-fabric.readthedocs.io/en/latest/prereqs.html#install-curl 一.前置条件和系统配置 1.安 ...

  4. laravel5.8笔记六：公共函数和常量设置

    公共函数 创建bootstrap/common.php <?php // 发送短信 function sendSMS($mobile){ } // 发送邮件 function sendMail( ...

  5. vscode切换界面布局

    调整vscode的控制面板位置 鼠标操作 view>Appearance>Toggle Panel Position   调整控制面板在界面底部 或者界面右侧 2.编辑区分布 鼠标操作 v ...

  6. vue使用mockjs配置步骤(无需启动node服务)

    1.安装好mockjs命令行 npm install mockjs 2.在项目中引用mockjs [ 重要 ] ##在项目src目录下新建一个mock文件夹 ##在mock文件夹下新建 index.j ...

  7. phantomjs 是什么？----主要是mac下面

    phantomjs 是什么? PhantomJS是一个无界面的,可脚本编程的WebKit浏览器引擎.它原生支持多种web 标准:DOM 操作,CSS选择器,JSON,Canvas 以及SVG. pha ...

  8. mybatis06--动态sql

    1.if标签 public interface StudentDao { /** *动态sql的查询 参数是Student对象 不确定 用户输入几个属性值 */ List<Student> ...

  9. js设计模式（四）---迭代器模式

    定义: 迭代器模式是指提供一种方法,顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示,迭代器模式可以把迭代的过程从业务逻辑中分离出来,使用迭代器模式,即使不关心对象的内部构造,也可以按 ...

  10. c++试题2

    一．写出下列程序的运行结果(40 分) 1.for(i=1;i<5;i++); cout << “OK” << endl; 程序执行后的输出结果是:  OK    ___ ...