God I hated the CSS Box Model. For a thing with such an unassuming name, it caused me a lot of mental stress!
First I tried to learn it at the Billy Blue design school in North Sydney
Then I tried to learn it on Lynda.
Then a For Dummies book (I was getting desperate, shut up).
And while I kind of got it…I didn’t really. I could repeat the rules, but I didn’t truly understand how those words were reflected in the look of the page. When I tried to make something happen – it wouldn’t work. So I ignored it, and copied CSS code from other places and thought – I don’t need to get it 100%
Of course, I couldn’t handle not getting it – so I decided to try the multiple videos on the CSS box model on Treehouse. Treehouse was a bit more in depth, and now I get the scary feeling that maybe I understand it somewhat now.
So here I go, trying to explain it – in an attempt to maintain the grasp I think I have on it. Please let me know errors or improvements, and also let me know other resources to help with this topic!
The CSS Box Model
So, basically html elements are broken into two types – block elements and inline elements.
Block elements are ones which will take up the whole width of the parent element, and so each block element must go on a new line. Examples of block elements are <h1>, <div> and <p>.
Inline elements can sit next to each other on the same line. Examples are <p> and <span>.
Despite the default propensity of these elements to be block or inline, you can force them to be one or the other with the display property.
The Display Property
Display: none – this means that It disappears from the page and everything moves over it as if it wasn’t there at all.
Display: block – takes up whole width of parent element
Display: inline – places on the same line
Display: inline-block – places the elements on the same line, but gives them a box so that you can style it with margins etc. (Can’t use negative margins).
Note that Visibility:hidden is similar to Display:none – but it affects the layout as if the element was still there. i.e. like it is in the same spot, but invisible.
You can assign the height and width of elements using three different measurements:
% - makes it relative to the containing element. Note that you can’t make it 100%, unless every element above it (i.e. all parents, grandparents) have explicit height/widths (can be %). Including the html element.
em – makes it relative to the font
px – allows you to have precise control over the size of the box
Note that when you give an element a width or height – this is for the content area only – you need to consider padding and border width separately.
However! If you add this property to an element Box-sizing:Border-box; the padding and borders will be forced into the assigned width and height of the element.
When elements are too small to contain their content you can control what they will look like using the overflow properties:
- Overflow: visible
- Overflow: scroll
- Overflow: auto (which will show scroll if it is needed)
- Overflow: hidden
Position is one of the properties that I got most confused by.
Position:Static; This is the default, and it means that the element will be positioned in the normal flow. It won’t acknowledge any offsets for top/left, etc, nor will it acknowledge z-indexes. So if you want to use either offsets or z-index – you need to set the position, and it can’t be set to static.
Position:Relative; This changes the position of an element without affecting other elements. You use the offsets of top, right, left, to move it. These offsets will offset the element relative to its original position in the document
e.g. left:100px; will move that property 100px to the right, but all other elements will stay as they were.
Position:Absolute; the element is completely removed from the normal document flow, and positioned wherever you say. If you use absolute and don’t put in offsets, it will be where it is in the normal document flow, but will sit on top of whatever comes after it because whatever comes after it is acting like the absolute positioned element isn’t there. This is no good, so you need to always use offsets.
The absolute position will be relative to the first parent element that has a position value which is not ‘static’. If there is none, then it will be absolute to the browser view.
Position: Fixed; A fixed element remains fixed no matter whether you resize or scroll the screen. Fixed positioning will be relative to the browser view. Even if you add a relative position to the parent element, the positioning won’t change. A fixed element needs to have offset values assigned to it.
Note:You can’t apply both positions and a float to the same element!
Z-index introduces dimensions, and it shows how they are stacked on top of each other. Higher z index values sit on top of lower z index values. Z-index can only be applied on elements with positioning : Absolute, fixed or relative. Not static!
So there – that’s it! As I write this, I feel like I am understanding, but I am going to do some projects this week to try and prove to myself that I have gotten the gist correct.
If anyone has any advice on the best ways to understand these concepts, please let me know.
p.s.– Apparently there is some issue around clearing floats which apparently this hack is the best at fixing, but I think I need a bit more time to wrap my head around it.