input怪胎 內部寬度詳解

2022-05-01 04:09:08 字數 1580 閱讀 8898

前段時間在寫網頁頁面時,在寫到input標籤時,給他們都定乙個相同的寬高,但是發現其type型別不一樣時,其表現出來的寬高完全不一樣,先上測試**:

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

title

>test

title

>

<

style

type

="text/css"

rel="stylesheet"

>

div, input

style

>

head

>

<

body

>

<

div>div

div>

<

input

type

="button"

value

="button"

>

<

input

type

="submit"

value

="submit"

>

<

input

type

="text"

value

="text"

>

<

input

type

="password"

value

="password"

>

body

>

html

>

其結果圖如下:

我明明將所有的input都設定了 width:300px;height:200px;

但是對於設定了padding的情況,不同型別的type 處理方式不同,現總結如下(不完全包含,望補充,ps以後遇到再一一補充):

當 type="button",type="submit",時:

input 將設定的width 和 height 當做我們見到的寬高,內部的「width」與「height」 =設定的「」width"與「height」減去padding;

當 type="text",type="passport",時:

我們所看到的 寬與高 等於 設定的「width」與「height」加上padding.

這對於設定 前面是乙個型別為type="text",後面為乙個 提交框,且設定了內邊距padding的時候,尤其要注意。

個人愚見,歡迎相互交流,批評指正。

內部類詳解

放在乙個類內部的類就叫做內部類 二.內部類的作用 1.內部類可以實現很好的隱藏 一般非內部類不允許有private,protected修飾的 內部類可以 2.內部類擁有外圍類所有的訪問許可權 3.可以實現多繼承 public class son class mother 1 extends moth...

內部類詳解

outer2.inner oi new outer2 new inner 方法2 thr 02 th new thr 02 inc1 i1 th.new inc1 注釋 i1和i2是同乙個物件的不同內部類物件 inc2 i2 th.new inc2 public class innerclassde...

內部類詳解

內部類的訪問特點 區域性內部類訪問區域性變數的注意事項 匿名內部類 定義 把類定義在其他類的內部,這個類就被稱為內部類。成員位置 成員內部類 區域性位置 區域性內部類 成員內部類 成員變數 靜態成員內部類 靜態成員變數 區域性內部類 區域性變數 匿名內部類 public class outer pu...