写在前面
编程的道路上,尤其指自己赖以生存的编程语言,基础真的真的很重要,没有捷径。在前端若不去看原型,函数引用,类型转换,盒模型,css hack......或许可以摘抄部分代码片段拼出一个看起来不错的页面,但这并不是自己的东西,花拳绣腿,照猫画虎不是真功夫。
正文
某一年的某一天,用户要一个搜索页面,我用烦了之前的这种样式:
想要这样一种扁平,清晰,高大的样式,我脑中浮现出这样的框框:
于是乎:
.inp{ width:150px; height:30px; border:1px solid #4394d6;border-right-width:0px; }
.but{ width:40px; height:30px; border:1px solid #4394d6; color:#4394d6; border-left-width:0px; background-color:#fff; cursor:pointer; }
<input class='inp' /><input class='but' value=serch type=button />
整个过程还顺利,按下F5,但看到的是这货:
这是啥?U盘吗?丑爆了!
问题出在哪了?出在哪了?哪了?
感觉难不到我,于是不断的调整top,height,在IE上好歹对上了,但在chrome上还是对不齐,chrome上调好了,阿姨又不干了。。。。一个简单的样式花费了快半个小时还这样,理智耐心渐渐被恼怒所占据:CSS基础这么差,不能流利的操纵layout,以后还咋混!!
原因很简单:我在css上用的功夫太少,样式一直都是bootstrap。当我决心要重撸一遍css基础时,才发现css不仅仅局限于样式,它也可以干许多js的活,并且干的更漂亮。
回到本例:此处涉及到css的盒模型 ,如果当初我知道box-sizing,那么事情会在1分钟内解决。
添加如下rule:
*{ margin:0px;
padding:0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
世界重归美好>>
/*******************************************/
当设置一个元素为 box-sizing: border-box;
时,此元素的内边距和边框不再会增加它的宽度.