A Quick Guide To CSS3 - Box-model, Selector and Box Layout

CSS3 Box Model

It is one of the most important concept of CSS3. Every HTML element is surrounded by a box weather its a div, span, paragraph, anchor etc. CSS3 Box Model concept revolves around Margin, Border, Padding, and Content of the box. This makes browser takes complete control on how the box and its contents will be rendered on the webpage.

  • The margin is transparent. It clears the area of outside the border. If margin width is 0, then the edge of margin is same as border edge.
  • Border defines the border of the box. If the border width is 0, then the edge of the border is same as padding edge.
  • Padding edge surrounds the box padding. It can be controlled by padding-top, padding-bottom, padding-left and padding-right.
  • Content is the actual area which contains real content of an element. It has color, image or background. We can also set the width, the height of the content box.

Property Value options
height auto | % | length
width auto | % | length
margin margin-bottom | margin-top | margin-right | margin-left
float left | right | none
padding padding-bottom | padding -top | padding -right | padding -left
visibility visible | hidden | collapse
display inline | block | flex | inline-block | inline-table | list-item | table | none | initial | inherit

CSS Selectors

CSS3 Selectors used to select different elements on the webpage and manipulate their properties. There are different selectors with which we can select one or more elements in the webpage.

Selector Description
.<className> It is used to select all elements with .<className> class
#<identifierName> It is used to select all elements with id attribute set to <identifierName>
* It is used to select all elements.
div It is used to select div elements
[attribute] It is used to select all elements with the specified attribute
[attribute=value] It is used to select all elements where the specified attribute is equal to value
a: link It is used to select all unvisited links.
a: active It is used to select the active link and so on.

Box Layout

This property is used to set the layout of the box in the Webpage. It is very new in CSS3. The template is tested to check its compatibility with all requirements on multiple platforms.
Property Value options
box-direction normal | reserve
box-align start | end | center
box-lines single | multiple
box-orient vertical | horizontal | block-axis | inline-axis
box-sizing padding-box | content-box | margin-box | border-box
box-pack start | end | center | justify