盒子模型

一、盒子模型
1.width、height

宽高可以用px或者%实现。%表示父亲元素的百分之多少。

2.border
2.1)border-width:边框粗细

数字+px。border-width:上 右 下 左;

2.2)border-style:边框样式

实线:solid、虚线:dashed、点线:dotted。border-style:上 右 下 左;

2.3)border-color:边框颜色

border-color:上 右 下 左;

2.4)单边框不连写

border-方向-width/style/color

2.5)连写(无顺序要求)

border/border-方向:width style color
比如:border: 1px solid #eeeee

二、CSS3盒子模型(自动内减):box-sizing--border-box
3.1)box-sizing:content-box(不写这句话,默认这个盒子就是content-box)


box_base.jpg

3.2)box-sizing:border-box,此时这个盒子的宽度包含border、padding和内容。即border、padding不会撑开盒子了。这也就是IE模型


box_model.jpg

三、总结

margin不算在盒子本身大小上。开发中,如果因为添加了边框而导致一行的位置不够放,可以手动缩小内容宽高。
如果想保持一个盒子的真实占有宽度不变,那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的,这会把别的盒子挤下去。

你可能感兴趣的:(盒子模型)