在做登录框的时候，需要一个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. HTTP缓存及其合理使用

    以前以为HTTP缓存是个简单的事,项目中遇到后才发觉关于缓存实践有挺深的学问. from几篇文章详见: 使用 HTTP 缓存:Etag, Last-Modified 与 Cache-Control 合 ...

  2. JSP之开发环境搭建

    1.下载JDK1.8(或JDK1.7),并进行安装和配置,主要是配置环境变量JAVA_HOME及Path. 2.下载并配置Tomcat8.0(或Tomcat7.0). Windows平台请下载Tomc ...

  3. 在java.util中有EventListener接口：所有事件监听者都要实现这个接口。

    在java.util中有EventListener接口:所有事件监听者都要实现这个接口. java.util中有EventObject类:所有的事件都为其子类.   事件范例在\CoreJava\Gi ...

  4. MySQL优化之——备份和恢复

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46766919 备份 逻辑备份方法 使用MYSQLDUMP命令备份 MYSQLDUM ...

  5. there was an error running the selected code generator unable to retrieve metadata for

    there was an error running the selected code generator unable to retrieve metadata for PROBLEM: I ha ...

  6. NuGet Packages are missing,This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them.

    错误内容 This project references NuGet package(s) that are missing on this computer. Use NuGet Package R ...

  7. linux shell的here document用法(cat << EOF)

    什么是Here Document?Here Document 是在Linux Shell 中的一种特殊的重定向方式,它的基本的形式如下cmd << delimiter  Here Docu ...

  8. N76E003的环境搭建

    一.准备工作: 1.下载编译工具keil c51 2.下载N76E003提供的板级支持包(BSP),可到nuvoton上下载   二.开发环境搭建 1.安装keil c51,然后和谐...不能随便发链 ...

  9. LeetCode - 498. Diagonal Traverse

    Given a matrix of M x N elements (M rows, N columns), return all elements of the matrix in diagonal ...

  10. IE 浏览器旧版本下载

    1. http://www.oldversion.com/windows/internet-explorer/ IE10 浏览器 32bit & 64 bit:下载 2. https://ww ...