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会向外挤占盒子的真实宽度)