First, how to understand the box model
Box model ( box model ) is part of a very important part of css knowledge, CSS when dealing with pages that each element in an invisible box. Idea box model, all the elements are imagined as a box, then the time for the page layout of the box can be understood as arranged. As you want to put the appropriate box to the appropriate location in the page to complete page layouts.
CSS box model ( Box Model ) defines the elements of the frame processing element content, padding, borders and margins of way
Box model includes a width width, height height, border frame, padding the padding, margin margins, content contents of these parts .
Two, CSS box model overview
Positional relationship
Box model innermost part is the content region (Content);
Content was directly wrapped padding (padding);
A border edge of the padded (border);
But the border is the outer border (margin), the outer frame Default Default is transparent, and therefore does not obstruct the subsequent contents.
Third, the composition of the box model
The actual height of a box, width: content + padding + border + margin
Box model attributes may be provided are:
. 1, width / height: setting the height and width of the content area (except the size of the content area, rather than the size of the entire box.)
2, border Border: For details click on the link to blog about border properties
3, inner padding margins: For details click on the link to the blog about the padding properties
4、margin外边距：详细内容点击链接转到有关margin属性的博客
5、overflow属性：
overflow属性规定的是当盒子里的内容溢出盒子框时，所显示的样式。共有三个属性值：
- hidden 超出的部分不可见
- scroll 显示滚动条
- auto 自动，如果有超出的部分，显示滚动条。
上图是没超出盒子边框的显示效果，当里面内容超出盒子边框的时候
