A webpage is like baking a cake. HTML is the ingredients, flour, milk and eggs etc. CSS is the decoration, the icing, candles, or even the way you cut it. The DOM is the recipe, the correct way to put the ingredients and decoration together to produce the desired result.
Everything on a webpage is inside a box. You can break a design down into boxes to better understand how a webpage fits together. Boxifying design makes it easy to see how to structure your HTML
The Box Model relates to the sizing of boxes on a webpage, which can include the box content, padding, border and margin. This can get quite tricky, because if you set the size you want the content to be, without taking the padding and border into account you can get boxes that overflow into each other. A way to avoid this is to use border-box, which means the box remains the same size. If you increase the border size the padding and content will readjust their size, rather than the box.