在做登录框的时候,需要一个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. react项目和next项目修改默认端口号

    creat-react-app生成的项目默认端口号是3000,如下可以更改: 在package.json中修改 "start":"react-scripts start& ...

  2. 深度学习中交叉熵和KL散度和最大似然估计之间的关系

    机器学习的面试题中经常会被问到交叉熵(cross entropy)和最大似然估计(MLE)或者KL散度有什么关系,查了一些资料发现优化这3个东西其实是等价的. 熵和交叉熵 提到交叉熵就需要了解下信息论 ...

  3. windows 10 更新补丁包

    http://www.catalog.update.microsoft.com/Search.aspx?q=windows%2010%20prohttp://www.catalog.update.mi ...

  4. 单行显示三级分销记录(同表自join)

    1)首先是一个简单的三级分销(邀请与被邀请),表结构是酱紫的 CREATE TABLE `d_user_invite` ( `invite_id` ) NOT NULL AUTO_INCREMENT, ...

  5. scala 隐式详解(implicit关键字)

    掌握implicit的用法是阅读spark源码的基础,也是学习scala其它的开源框架的关键,implicit 可分为: 隐式参数 隐式转换类型 隐式调用函数 1.隐式参数 当我们在定义方法时,可以把 ...

  6. Ubuntu 安装mono

    Ubuntu 安装mono 我的系统:Ubuntu 16   Mono参考: http://www.mono-project.com/docs/getting-started/install/linu ...

  7. C - Friends and Subsequences

    Mike and !Mike are old childhood rivals, they are opposite in everything they do, except programming ...

  8. error_match问题

    当nginx的sendfile处于on的情况下,在docker的环境下修改js文件会出现error_match的问题,应该要在nginx的配置中把sendfile设为off

  9. gym102007 E

    我计划预习五个小时离散,然后hmc补了这道他自认为非常的裸并且很傻逼自己可以一眼秒的简单题,然后给我讲了讲,然后我失去了一整晚的生命迹象. 首先我们可以发现一个神奇的现象,啊,先排个序,然后我们会发现 ...

  10. PL/SQL控制结构

    顺序结构 按先后顺序 分支判断结构 IF语句 IF condition THEN statements; [ELSIF condition THEN statements;] [ELSE statem ...