Today I finished up with the classes on the box model concept. We went over the float property and the clear property, which clears the space around the floats. It can have a value of left, right, both, and none. None is the default value. It is useful in manipulating the layout in cases where another element on the page has a float property and the layout is not appearing the way you would like.
I learned that an element can have multiple classes. To do this, you simply insert the new class name into the quotation marks where the old class is, and just add a space between the first class and the second class.
I learned about the positioning property as well. This property can have four values, which are static, relative, absolute, and fixed. The default is static, which means the element is positioned according to the normal/default flow of the page. If the position property is given a value of relative, then this allows you to use the left/right/top/bottom properties to move the element outside of its normal place in the flow of the html file. If the value of absolute is used with an element, then that element is completely removed from its normal position in the flow of the html page. If an element with a position property is given a value of relative, then any child elements with a left, right, bottom, or top property will base the results of these properties on the positioning of the parent element with the position property set to relative. So, keep in mind that the absolute value in a position will always be relative to the first parent element with a position other than static. If no parent elements (or any elements up the nesting chain) have a position property set, then the position will be based on the browser window or viewport.
If the position value is set to fixed, this fixes the element relative to the viewport. This is used, for example, for the header/nav bar at the top of a page when you want the header/nav bar to stay in the same place on the screen, even if there is lots of content on the page and the user scrolls down to view more content.
With the z-index, we add a third dimension to a page. Higher z-index values sit on top of lower z-index values. The z-index property will only work with elements that have a position value other than static.
When using the position property, remember not to use the float property on the same element, because this creates conflicting positioning scales.
I learned that an element can have multiple classes. To do this, you simply insert the new class name into the quotation marks where the old class is, and just add a space between the first class and the second class.
I learned about the positioning property as well. This property can have four values, which are static, relative, absolute, and fixed. The default is static, which means the element is positioned according to the normal/default flow of the page. If the position property is given a value of relative, then this allows you to use the left/right/top/bottom properties to move the element outside of its normal place in the flow of the html file. If the value of absolute is used with an element, then that element is completely removed from its normal position in the flow of the html page. If an element with a position property is given a value of relative, then any child elements with a left, right, bottom, or top property will base the results of these properties on the positioning of the parent element with the position property set to relative. So, keep in mind that the absolute value in a position will always be relative to the first parent element with a position other than static. If no parent elements (or any elements up the nesting chain) have a position property set, then the position will be based on the browser window or viewport.
If the position value is set to fixed, this fixes the element relative to the viewport. This is used, for example, for the header/nav bar at the top of a page when you want the header/nav bar to stay in the same place on the screen, even if there is lots of content on the page and the user scrolls down to view more content.
With the z-index, we add a third dimension to a page. Higher z-index values sit on top of lower z-index values. The z-index property will only work with elements that have a position value other than static.
When using the position property, remember not to use the float property on the same element, because this creates conflicting positioning scales.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 1,464
Treehouse Points by Subject Matter: HTML 663, CSS 771, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 67% of all students."
Badge(s) Earned Today:
CSS Box Model
Courses Completed:
How to Make a Website
HTML
HTML
Books Read or in Progress:
"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)
Hours Spent Coding Today:4
Total Hours Coding: 98
No comments:
Post a Comment