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 |
