The Box Model Flashcards
Which properties can be used to manipulate the dimensions of an HTML box?
height and width
What are the keywords you can use to set the thickness of a border?
thin, medium, and thick
Which property affects the corners of the border?
border-radius
How to create a perfectly circular border?
border-radius: 100%
padding
The space between the contents of a box and the borders of a box
margin
The space directly outside of the box
In order to center something, what attribute must be specified?
width
Otherwise it will default to the width of the containing element and there will be no effect.
Quick easy horizontal centering using margin (if it has width specified)
margin: 0 auto
What does it mean that vertical margins collapse?
Unlike horizontal margins, vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements.
min-width
max-width
min-height
max-height
this property ensures a minimum width of an element’s box.
this property ensures a maximum width of an element’s box.
this property ensures a minimum height of an element’s box.
this property ensures a maximum height of an element’s box.
overflow property
Controls what happens to content that spills, or overflows, outside its box. It can be set to one of the following values:
hidden - when set to this value, any content that overflows will be hidden from view.
scroll - when set to this value, a scrollbar will be added to the element’s box so that the rest of the content can be viewed by scrolling.
visible - when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.
The overflow property is set on a parent element to instruct a web browser how to render child elements. For example, if a div’s overflow property is set to scroll, all children of this div will display overflowing content with a scroll bar.
visibility property
The visibility property can be set to one of the following values:
hidden — hides an element.
visible — displays an element.
Note: An element with display: none will be completely removed from the web page. An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.
box-sizing: border-box;
Changes the box model to border-box
In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.
