这两周放假在家决定找点事干。于是在W3school和慕课上将HTML+CSS部分重新看了一遍。看完之后觉得在学校学了一年半的网页好像白学了(苦笑)。当初了为了应付升学考(考试90分钟做一个主题网站)，大部分同学(包括我)都是用PS切片(切出来都是表格)直接导出站点然后再填充网页内容。因为用DIV+CSS时间上不太够，所以遇到这种方法的我沾沾自喜，熟不知这种做法根本就无益于网页制作。。。
这两天在做百度在github上的IFE/2015_spring task1 碰到了这样一个部分
一个搜索框(一对input和button)
天真的我以为给他们设置了同样的高度就O justin biber K 了(都是行内元素)
.keywords{
height: 40px;
width: 170px;
background-image: url(../img/search.png);
background-repeat: no-repeat;
background-position: left;
text-indent: 3.3em;
}
.submit{
height: 40px;
width: 50px;
background-color: rgb(221,221,221);
font-size: 16px;
font-family: "Century Gothic";
color: #fff;
}
结果...
好像有点货不对版...
一定是因为边框的原因！
.keywords{
/*加上边框*/
border: 1px solid #e2e2e2;
border-right: none;
}
.submit{
/*去掉边框*/
border: none;
}
这样就差不多了嘛
哎，等等。怎么感觉有点不对劲？
？？？
？？？？？？
经过一番baidu之后，发现button的默认盒模型是border-box而不是content-box于是乎我把input的box-sizing也设为border-box后
情况似乎变得严峻起来...
但是当我将他们的border都设为none后
懵β...
一头雾水的我给他们瞎β加了一通属性之后发现问题依然存在(其间还发现改字体大小可以让他们位置迷之变化然后对齐。。。)，然而当我觉得 vertical-align: middle; 并不会起作用的时候！
WTF...
这件事情告诉我们有时候问题并没有那么复杂，只是把问题想复杂了。。。
网友评论