Unit 1: Lesson 4 - CSS Layouts
what is the default behavior of block-level elements that are within another block-level element in terms of their dimensions?
a child block-level element will default to being the same width as their parent block-level element
how does a browser interpret a line break between two inline elements?
as a space
css property and value for setting background to cover entirety of the html
background-size:cover
css property for making border circular?
border-radius
what css property do you use to set block level elements to appear on the same line as one another?
display: inline-block
what is the primary use case for the float property?
getting text to wrap around an image (or some other container)
what are the characteristics of a block-level element? how do they contrast with in-line elements?
have the opposite qualities of in-line elements. they get displayed on a new line, they may contain other block-level elements, and their dimensions can be adjusted
what is the effect of applying the css position of fixed to an html element?
it will stay in place even when the user scrolls
what is the css for horizontally centering block level content relative to a parent element?
margin: auto
what css property would you use to insure that the text within a <p> element does not run on for too long?
max-width
will auto be able to center non-block-level content?
no
Inline-level elements occupy __________________ and start on _______
only the width that their contents require, the same line as where they were called within their parent element
what is the default value of the position property?
static
what are the most common values for the position property?
static, absolute, relative, and fixed
what is the behavior of auto when setting an elements margins?
takes the size of the parent element less the size of the element to be centered, divides the difference into equal parts, and sets the margin to that value
css for centering images?
text-align: center
what is the css for centering in-line elements within a block element?
text-align: center
how would you insure that a block level element does not appear in-line with floated elements?
the clear property
how do you change how an html element is displayed?
the css display property
when using a position other than static, how do you anchor that element to a specific location on the page?
the left, right, top, and bottom properties
what is the behavior of elements that have had the float property applied to them?
these elements are taken out of the normal flow which forces elements in the normal flow to wrap around them
what aspects do inline-block elements share with in-line and block level elements?
they display in-line but you can also modify their dimensions? this is useful when wanting to set blocks side by side
why would a block-level element appear in-line with other block-level elements that have had the float property applied to them?
this is because elements that have had the float property applied to them have been taken out of the normal flow. thus, as far as the block level element following the floated block level elements is concerned, that element is on a new line because the elements preceding it have been taken out of that flow
why would you use inline-block with list elements in a nav bar?
this way you can get each link to appear side by side rather than in a list with a new line for each list item
block level elements occupy any available ______, regardless of _____, and start on a ______
width, their content, new line
what about an in-line element cannot be adjusted? and why?
width,height, margin, or padding they are not block level elements, they fall in-line with their parent elements dimensions. ie when you surround text within a <p> element with the <span> element, that text does not create a new line and defaults to the dimensions of the p element
