Box Model

1.consists of margin border and padding.

image-20200831090330423

2.default width property: is designated to the content box

3.border box property:is designated to the entire box(including padding and border)

4.box-sizing will not be inherited

Star selector: Universal selector without being overridden (Often used to reset browser default setting)

 

5.horizontal margin is cumulative (A on the left and B on the right)

6.Vertical margin won't add up, the larger margin wins (2 margins collapsed)

 

Problem: Content overflow

image-20200831093050191

this is because the content of the box is restrained in a very tiny place

To fix:
  1. overflow parameter (by default is set to visible)

     

回到主页