最近在开发的时候发现一个小问题，<DIV>我们很熟悉的一个盒子元素
关于他的描述
1.按照我们正常人的思维逻辑
编写好一个DIV盒子，然后再在盒子里面添加边框border、内边距padding、内容，这是我们的思维逻辑
但是DIV的编写会随着你添加的边框border+内边距padding 的增加而不断增加
例如以下：第一个是什么也没有加的，第二个盒子是加了内边距，第三个盒子是加了边框，总结出来的规律就是DIV在普通属性下，是按照逆向思维执行，从内到外进行添加，这样往往会破坏实际的逻辑结构，因此我们需要引入一个属性来控制DIV，这个CSS属性是box-sizing: border-box;
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中，就例如上面所示
当我们不希望自己的盒子被撑大，就需要box-sizing: border-box; 的属性控制盒子的大小，让盒子固定宽高，再在此基础上添加内边距和内容和边框
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。（转）
box-sizing: border-box;//其他浏览器
-webkit-box-sizing: border-box;//谷歌
-moz-box-sizing: border-box;//火狐
文字或者内容垂直居中只需要设置行高 line-height 等于父空间高度就行
文字或者内容水平居中需要设置 text-align:center 即可
看到选项卡导航条 就用ul和li 搭配float使用 去除一些固定的属性 再来个定位即可
input的快捷输入是 input+：+字母
有时候一些盒子放不下 其实不是盒子的问题 检查一下是否有默认空格的情况出现 这时候只需要合并一下即可
在企业开发中想让多个盒子的顶部对齐，我们可以让多个盒子同时浮动
使用绝对定位去控制位置的时候，很多标准都会失效 例如控制居中 margin:0 auto就是失效
用span作标签的时候，要注意这是一个行内元素 设置宽高的时候要设置属性display:inline-block变成行内块级元素才可以
开发中，看到某一元素覆盖在另一元素上面的时候 就要想到定位 定位的时候就要想到子绝父相，同时用了绝对定位后，由于脱离标准流，行内块级以及行内元素的改变属性就会消失
行高可以撑起盒子高度 例如有了line-hight后就可以把height删除
想要水平排版 只需要float:left就可以
删除样式可以用list-style:none
超出部分需要用overfloat:hidden 让导航条不拖动超过的部分
