`CSS`杂记

• css属性
  
  • float
  • overflow/overflow-x/overflow-y
  • display
  • box-sizing
    
    • e.g.
    • Bootstrap3统一用 box-sizing: border-box;
• 应用
  
  • 让button input span 水平对齐

css属性

float

left
float
none
inherit

可以用 clear:both 清除

overflow/overflow-x/overflow-y

visible
hidden
scroll
auto
inherit

display

兼容性: IE 8+

值	代表标签	说明
block	div	纵向流, 默认宽100%
inline	span	横向流, 不能修改宽高
inline	button input	横向流, 可修改宽高
none		不会被显示

box-sizing

兼容性: IE 8+

box-sizing: content-box|border-box|inherit:

值	代表标签	css设置的width/height包含
content-box	input[type=”text”]	仅内容宽高
border-box	button	内容宽高+panding+border
inherit

e.g.

示例属性

width=50
pandding=3 (x2=8)
border=2 (x2=4)
margin=6

content-box 结果
内容宽=50 (=width)
offsetWidth=62
clientWidth=58
scorllWidth=58
Chrome inspect在页面中提示=62

border-box 结果
内容宽=38(width-border x2-pandding x2)
offsetWidth=50
clientWidth=46
scorllWidth=46
Chrome inspect在页面中提示=50

总结

offsetWidth = 内容宽 + pandding x2 + border x2

clientWidth = scorllWidth = 内容宽 + pandding x2

Bootstrap3统一用 box-sizing: border-box;

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

应用

让button input span 水平对齐

这哥三个放在div中水平不对齐

可以给他们如下设置

    box-sizing: content-box;
/*或border-box 总之要相同*/
    display: inline-block;
    vertical-align: middle;
    /* height: 60px; */
    /* line-height: 60px; */
    /* text-align: center */