在做登录框的时候，需要一个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. Web重温系列（一）：利用寄宿于IIS的WCF序列化文件

    这两年一直在做WinForm,对于Web已经比较生疏了,其实之前做的也不是很多. 这两天做了一个小工具,功能很简单,就是想有个地方存放办公室同事的机器名和IP的信息,包括附加的用户名和更新时间.比较之 ...

  2. Gin框架初识

    一.安装 使用go下载gin库,命令行输入:go get github.com/gin-gonic/gin ,一般使用需要的依赖: import "github.com/gin-gonic/ ...

  3. java直接生成zip压缩文件精简代码（跳过txt文件）

    /** * @param args */ public static void main(String[] args) throws Exception{ ZipOutputStream zos = ...

  4. Win2008R2+Apache+PHP+Tomcat配置

    一.VC运行库 对于Apache和PHP,在Windows上运行的话都需要对应VC运行库的支持,即Apache.PHP和VC运行库这三者的版本必须相对应,这就会带来很多问题,比如下了较新的Apache ...

  5. The processing instruction target matching "[xX][mM][lL]" is not allowed.

    现象: ERROR   : The processing instruction target matching "[xX][mM][lL]" is not allowed.  异 ...

  6. Kafka 2.1.0压缩算法性能测试

    Apache Kafka 2.1.0正式支持ZStandard —— ZStandard是Facebook开源的压缩算法,旨在提供超高的压缩比(compression ratio),具体细节参见htt ...

  7. 《转载》强大全面的C++框架和库推荐！

    C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...

  8. 删除JS 对象属性（元素）

    var a={"id":1,"name":"danlis"}; //添加属性 a.age=18; console.log(a); //结果: ...

  9. Android学习：ActionBar活动条

    菜单定义: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android=" ...

  10. Visual Studio 2015编译wxWidgets

    宫指导说,换帅如换刀 程序员的编译器一换,基本套路必须都重练几次 使用wxWidgets并不难,但不能使用现有的库和工程配置文件,细节就必须理清楚 获取wxWidgets 官方的下载页面,下7z或zi ...