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