Week 6 - CSS Part 3 Flashcards
What does the box model consist of?
From out to in:
Margin, border, padding, content, background image/colour behind the content.
What’s the difference between margin and padding?
Margin is used to separate elements, whereas padding is used to changing distance between the content and border.
What do auto values do and how do they work?
Auto values will automatically assign a value to whatever the selector is.
In terms of margin: auto, this will center the content horizontally.
How do we layout a page with float?
Float is used for allowing elements to move around one another.
Clear stops elements from coming up due a float, and allows for things such as footers to stay at the bottom of the page.
What does responsive design mean?
Includes the webpage being able to adapt to different devices and their viewports in order to be displayed properly.
How can we implement responsive design?
meta viewport, media types, media queries
Meta Viewport
Used to set the initial scale that a web page will be presented in a browser.
Media Type
Used to specify the different style rules. This includes whether we’re going to be styling @media for screen, print, speech, etc.
Media Queries
Used to define style rules for different media types.
This is the whole statement which can also consist of a media type like screen or print.
*Marked with using @media …
z-index
Changes the stacking of elements
Fluid Layout
Using relative units to adapt to the display/viewport.
Can do this through using % values for width.
Fixed Layout
Layout based on specific values and not being adaptable.
CSS Pre-Processors
Helps to write maintainable, well-structured code and reduces the amount of CSS written.
Eg: Less, Sass, Stylus
CSS Frameworks
A third-party packaged collection of rules for extra functions.
Eg: Bootstrap
