Week 4 Part 2 Flashcards
Default behaviour is not to overlap
Block element
Will not overlap within the block they are contained in
Default is that inline elements will not overlap within the block they are contained in
T/F - Block and inline elements usually have their own height, independent of their content
False.
By default block and inline elements have the height of their content.
T/F - Inline elements have the width of their content
True
T/F - Block elements have a width that spans the width of their parent
True
This property was created to allow authors to specify how elements should behave in layouts
The display property
Default Layour
Display:Inline
display: block;
Displays element as block element (like <p>)
display: none;
Element will not be displayed (no effect on layout)
This makes elements appear in a chosen area in a sea of text
float. float left = element on left , text on right
After float is used, this is used to prevent subsequent elements from floating on the left / right
clear: left / right/ both / none
What does clear:none do?
Lets elements float on either side
Position properties: default, appear in document, linear flow
position: static
Position properties: positioned relative to its normal position
position: relative
Position properties: relative to a browser window
position: fixed
The CSS Flexbox is a simpler layout system, is the CSS Flexbox Layout typically used for the whole page?
No, it’s typically used for parts of a web page
Defines an element as a flexbox container
display:flex
This property defines the direction of the main axis of a flexbox
flex-direction - row, row-reverse, column, column-reverse
This property determines whether and how flex items wrap when the main axis is full
flex-wrap - nowrap (forces single line, may cause overflow),
wrap, wrap-reverse
Property defines how the browser distributes space between/around content items along the main axis of a flex container
justify-content - right, center, left
What do these do?
flex-basis: 200px/auto
flex-grow: 2
flex-shrink:
flex-basis: determines initial size of the flex item (any unit). “auto” means that the size is determined by the height and weight
flex-grow: Defines the growth factor of an element relative to the other items
flex-shrink: defines how much an item will shrink when not enough space in the container
Flexbox vs grid: What’s the main difference?
Flex is one dimensional, grid is two dimensional
The grid layout has 2 elements, what are they?
The grid container and grid items
This is a block-level element that acts as a parent to the elements inside of it. You can configure a set # of rows/columns
Grid container
Elements that reside within the grid container. Either the programmer or the browser will assign these to specific parts of the grid
Grid items
T/F - Height and width of grid columns and rows will in general be the same
False. Height and width of grid columns and rows will in general vary
- Free front end framework for faster and easier web development.
- Includes HTML, CSS design templates for typography, forms, buttons, tables, etc.
- Gives the ability to create responsive designs
Bootstrap
This term refers to websites that are designed to gracefully adapt to screen size.
Responsive Web Design
Fluid grid with the layout defined proportionally rather than with fixed dimensions
Flexible images and video that scale to fit within the grid
What am I describing?
Responsive Web Design
Comments, consistent naming conventions, meaningful class/ID, consistent formatting, group like style, split up files
What does this describe?
Great ways to organize CSS
By default, do block and inline elements have the width of their content?
Only inline elements, block elements have the width of the page
