input搜索框+button按鈕 之 content-box 和 border-box

恍然大悟又 --能夠用CSS3的box-sizing來設置下文中的"正常盒子"和"不正常盒子/怪異盒子"

* 正常盒子   box-sizing:content-box
* 不正常盒子 box-sizing:border-box;

原因

咱們常常要寫一個<input type="text"><input type="button">的搜索框,由於已經寫習慣了,老是拿來就寫,沒有注意一些特殊的地方.今日,女神學CSS的時候遇到問題,拿來問我,一開始我以爲就那樣寫就是了,不那樣寫確定出問題,可是細究之下,不寒而慄...

幾個值得注意的地方

1. 咱們知道,兩個input以前是有間隙的,因此,若是不想讓他倆手拉手,而是肩並肩的挨着的話,你須要這樣寫兩個挨着的input

   <input type="text"><input type="button">
   	<!--也能夠這樣-->
   
   	<input type="text"><!--這行註釋拉近了他們的距離/笑
   	--><input type="button">

2. input[type = button/reset/submit]這三個傢伙是有默認的padding,border,margin值的.可是通常的咱們在開始都是清除默認樣式,例如最簡單的這樣

   *{
   	    padding:0;
   	    margin:0
   	}

   • 這裏就清除了button三兄弟的默認padding值
   • 三兄弟默認的 border寬度是2px,還有個默認的灰色,因此咱們通常會用"本身喜歡的顏色"來從新設置他們的border,順便從新設置下寬度,例如這樣

   border:1px solid red

   • 接下來就是最重要的!!! button三兄弟的盒子模型不是正常的盒子模型,也就是說,button是不正常的盒子

正常盒子和不正常的盒子

• 正常盒子 (非怪異模式) 好比咱們設置了一個div,或者input[type=text],我以下寫它的CSS樣式

  height:50px;
  	width:50px;
  	border:10px solid red;
  	padding:5px;
  	background:yellow

  經過chrome查看它的盒子模型

  咱們發現正常的盒子模型:

  1. 其"可視高度" = width(咱們手動設置的50px)+padding(5px2)+border(10px2) = 80px

  2. width < padding < border是向外堆疊的,一層一層構成了其"可視高度"

• 不正常的button盒子

  height:50px;
  	width:50px;
  	border:10px solid red;
  	padding:5px;
  	background:yellow

  不正常的盒子:-> 特質button/submit/reset的input

  1. 其"可視高度" = width(咱們手動設置的)

  2. width > padding > 內容 是一層層的向裏堆疊的.若是手動設置了width和padding,其內容的高度(或者寬度)會被自動壓縮

怪異模式與box-sizing

• 其實一個盒子實際佔據的空間(下面叫實際寬度)是由它的"但是寬度"+ margin決定的.

• 咱們通常在開發中會把全部的盒子都改寫成border-box模式即 ` *{ box-sizing: border-box }

  `

  1. box-sizing:border-box
     • 實際寬度 = 手動設置的width + margin,(盒子的padding,border會向內擠佔,真實"content"的寬度會變小)
  2. box-sizing: content-box
     • 實際寬度 = 手動設置的width + padding + border + margin(盒子內部的"content"寬度就是咱們手動設置的width,padding,border會向外擠佔盒子的真實寬度)