Overview
In CSS, the term “box model” is used as a theoretical framework to help understand page layout. When rendering a page, the browser represents each element as a rectangular box. So to construct a page, we essentially wrap boxes around our content areas and content.
The boxes can then be moved and modified using CSS to create dynamic page layouts.
The content area of each box contains the "real" content of the element — the text, image, video, etc. The most common CSS properties used when working with boxes are width, height, padding, margin, and border. As stated above, all HTML elements can be considered as rectangular boxes and can utilize these properties.
The <div> Element
To create "boxes" we use the <div> element.
<div class="logo">
Content goes here
</div>
In CSS the selector for a div is the class name of the box with a period (.) in front. Same as any other element that uses a class:
.logo{
height:50px;
width:200px;
background-color:#ffff00;
}