Notes from Codeschool CSS Cross Country Course - Level 3
The Box Model
Every element on the page is outlined by an imaginary things called the box model that looks like this:![]() |
css box model |
The total width of an item is dependent on each of the box model properties.
How to Calculate Width Using Box Model:
total calculated box width = content width + padding width + border width
![]() |
box model example |
.downhill {
border: 5px solid #2E3192;
padding-left: 10px;
padding-right: 5px;
width: 100px;
}
To get total item width:
border-right: 5px
border-left: 5px
padding-left: 10px
padding-right: 5px
+ width: 100px
----------------------
125px
When adapting a design, you can calculate the content width area by doing:
total box width (design) - (padding width*2) - (border width*2) = content area
Example:
.uphill {
border: 1px solid #fff;
padding: 14px;
width: ?
}
To calculate do:
340px (let's say this is your design area) - 28px - 2px = 310px (this is the size of your content area)
The Overflow Property
When setting boundaries on containers, you'll need to know how to deal with content that does not fit inside that container. This is where setting the overflow property comes into play.overflow: visible / auto / hidden / scroll
overflow: visible
Visible is the default value and allows content to flow outside container boundaries.![]() |
content overflows the boundaries of parent container |
overflow: auto
Auto adds a scrollbar as needed when content overflows. This allows our container to stay the size we set and you can see all content by scrolling.![]() |
scrollbars appear when needed |
overflow: hidden
Hidden hides content that extends beyond the container. Content inside the container that doesn't fit will be cut-off, but the container will stay the same size.
![]() |
overflow content is hidden |
overflow: scroll
Scrollbars will be added to the container whether or not they need to be there.
![]() |
scrollbars are present, whether or not they are needed |
Positioning
The four main values of positioning are:position: static / relative / absolute / fixed
Anything on the page within the normal flow is considered static. Using a value other than static gives that element a value of positioned. We'll go into why this is important later.
Positioned items can use the top, right, bottom, and left properties for placement.
Relative Positioning
Relative positioning renders and element within the normal flow of the document, then is shifted via positioning properties.
In the below example we want to make the 2 look like an exponent. This is using an html boilerplate, don't worry too much about the first 3 css items, but know that the last two cause it to be positioned relatively then moved off the top by one half em. To learn more about boilerplates read: http://html5boilerplate.com/.
<!-- index.html -->
<article>
<h2>Sven's SnowshowX<sup>2</sup></h2>
</article>
/* styles.css */
sup {
font-size: 75%;
line-height: 0;
vertical-align: baseline;
position: relative;
top: -0.5em;
}
Absolute Positioning
Absolute positioning takes an item out of the normal document flow for manual positioning.
e.g.
<!-- index.html -->
<article>
<h2>New Snowshoes</h2>
<h3>by: Sven</h3>
<p>Some interesting text.</p>
</article>
/* styles.css */
h3 {
position: absolute;
right: 10px;
top: 10px;
}
In this example, we want the <h3> byline to be positioned to the right. BUT, this will position it next to the window, unless it is within an item that is positioned. In this case, you can give <article> a position of relative so that the byline will stick to the edge of the article container, not the window.
If you have something that you need positioned for another element but don't intend to actually position it, use position: relative.
![]() |
position parent container relatively to position child element absolutely |
Fixed Positioning
Fixed positioning affixes an element to a specific place in the window, where it will stay regardless of scrolling. Unlike absolute positioning, you cannot scope fixed positioned items to a specific container.![]() |
element stays visible no matter where on the page you scroll |
Z-Index
When dealing with multiple positioned items, it is a common occurrence that they will begin to overlap one another, you can determine the stacking order by using the z-index. The z-index only applies to items that have a positioned value other than static.If two images have no z-index or the same z-index, the item that appears second in the HTML will appear on top. Imagine the second item being laid down after (and thus on top) of the first item.
e.g.
<!-- index.html -->
<article>
<img class="ski" src="ski.jpg" alt="Ski!" />
<img class="sled" src="sled.jpg" alt="Sled!" />
</article>
![]() |
sled! appears on top of ski! because it was placed second in the HTML |
/* styles.css */
.ski, .sled {
z-index: 1;
}
In this example, .ski and .sled have the same z-index, but since .sled comes second on the HTML document, it will appear to be on top of .ski.
If you set the z-index of one item, but not the other, it will make the z-indexed item appear on top.
e.g.
<!-- index.html -->
<article>
<img class="ski" src="ski.jpg" alt="Ski!" />
<img class="sled" src="sled.jpg" alt="Sled!" />
</article>
![]() |
adding a z-index value to ski! allows it to stack on top of sled! |
/* styles.css */
.ski {
z-index: 1;
}
No comments:
Post a Comment