I’ve recently taken a deep dive into the world of CSS. As a former print designer-turned software engineer, I often find myself turning to knowledge gained in my previous career to help me with situations I encounter while developing. And I’ve learned that CSS is like my warm, fuzzy blanket.
I’ve also come to realize I’ve ignored a lot of its complexity, which leads to me throwing various class names at divs until I get the result I’m looking for. It’s effective if not practical, but I wanted to know the complexities of this powerful styling library, which has led me to the first in what I expect to be a series of CSS basics blog posts.
To start, I wanted to know how CSS works in the background, which led me to the visual formatting module. It’s an algorithm that calculates the size of boxes and figures out how to lay these boxes out on the page.
It’s one of the fundamentals of CSS and it takes into account a number of factors, including: the box type (is it inline? Inline-block? Block?); the box’s dimensions; any positioning directives its been give (is there a float? Is the position absolute?); where it’s stacked on the Z-axis; and how it relates to other elements in the render tree.
All elements are looked at as rectangles in the CSS model, and the box model is the epitome of that philosophy. Boxes can have width, height, margin, padding and border, and they are all optional.
Content is at the heart of the box model. It’s the text or images that make up your div. Padding is the transparent area immediately surrounding the content and is used to create white space inside the box.
The border goes around the padding and the content, and the margin is the space that is between the boxes on the page. Put it all together and you’ve got the fill area, in which you can place a background image or set a background color.
The total width of a box in the box model is the sum of the right border and padding, the specified width, and the left border and padding. Similarly, the height is determined by the top border and padding, the specified height and the bottom border and padding.
When you define height and width in CSS, it includes border and padding.
The visual formatting module also takes into account box type. Block-level boxes are elements that are formatted visually as blocks, and they take up 100 percent of the parent’s width. Block level boxes display stacked on top of each other vertically.
Inline boxes, on the other hand, are basically the opposite. Content in inline boxes is distributed in lines, and it occupies only the content’s space. You can’t set the height or width, and the padding and margin of inline boxes can only be set horizontally.
Another factor in the visual formatting module are positioning schemes. In a normal flow of content, rectangles are not floated, there's no absolute positioning, and elements are laid out according to their order in the source code.
Floats, on the other hand, shift elements to the right or left as much as possible. Elements are removed from the normal flow, and text and inline elements will wrap around the floated element. With floats, the container won't adjust its height to the element.
With absolute positioning, the element is also removed from the normal flow, but it has no impact on the surrounding content. It uses top, bottom, left and right values to offset the element from its relative positioned container.
Top comments (0)