盒模型
早就耳闻盒模型的大名,今日一见,果然如此
content 内容区 width height 决定内容区的大小
padding 内边距 1个值 上右下左 2个值 上下 左右 3个值 上 左右 下 4个值 上 右 下 左
border 边框
margin 外边距 会影响盒子的位置 不会影响盒子可见框的大小 值可以为负值
上面情况指的是 标准盒模型 box-sizing:content-box (默认值) 可见框的大小 = content(width) + padding + border
还有一种情况是 怪异盒模型 box-sizing: border-box(怪异模式) 可见框的大小 = border+padding+content = width
小结:盒子模型的前提是box-sizing,主要跟这几个样式名有关:width、padding、border、margin