Like this:

In assignment 4 in my CSS class we are supposed to go over the three examples on page 132 in the book and then discuss the differences and addvantages as well as the disadvantages in using each of the three.  We are supposed to use the box model 1 and 2 observation.  Also I’ll be discussing what I will be using in the site of the class that I’m creating.
The first example dealt with creating a column with an inner div and nested elements, the second was clearing floated elements, and the third was controlling the positioning and display of elements using the position and display properties.  Using the Box model we define a width, style and color of  the box border.  The contents of the box is what we are really going to talk about.  Normally the easiest type of information is a column of information within the box and using the css file, we can change multiple boxes attributes simultaneously along with text color and font attributes.  So the box acts like a container and makes changing multiple areas on multiple pages quite easy.  I found that it was very helpful to display the border of the boxes that I used in my student website because they helped separate the contents in to distinct areas of interest.  Managing element widths is very important when it comes to using more than one column.  A handy trick is to set the box color the same as the background color so that you end up having your text content defined and easy to manipulate separately from the rest of the page but still look like it is sitting on the page without being in a box.  In box model observation #2 I found that elements that had no width set expanded to fill the width of their containing element.  The result of adding horizontal borders, padding and margins caused the text to change width.  The thing that I have learned out of this is that when you set the width of an element, I am actually setting the width of the content within that element.  When learning about floating and clearing in chapter 4, I found that floating an element was a way to move it out of the normal flow of the document. Elements that move next to the floated elements tend to sit next to them if there is enough room.  Using the clear property allows you to keep those elements from moving next to the floated elements.  Positioning comes in four flavors: static, relative, absolute and fixed.  We use positioning to get away from having to use tables. Since every element has a position property, it also has a display property.  The display property is powerful because it allows you to force an inline element to fill its containing element.  You can also set the value to none which will disallow the contents of the element to be visible.

Advertisement