Save
Busy. Please wait.
Log in with Clever
or
show password
Forgot Password?
Don't have an account?  Sign up 
Sign up using Clever
or
Username is available taken
show password


Make sure to remember your password. If you forget it there is no way for StudyStack to send you a reset link. You would need to create a new account. Your email address is only used to allow you to reset your password. See our Privacy Policy and Terms of Service.

Already a StudyStack user? Log In

Reset Password
Enter the associated with your account, and we'll email you a link to reset your password.
focusNode
Didn't know it?
click below
 
Knew it?
click below
Don't Know
Remaining cards (0)
Know
0:00
edit
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.

  Normal Size     Small Size show me how

CSS - Week 2

WTWD 210 - CSS Box Model & Positioning

TermDefinitionExample
Box Model Concept that explains the layout of HTML elements (margin, border, padding, content). div { margin: 10px; padding: 5px; border: 1px solid black; }
Margin Space outside the border of an element. margin: 20px;
Padding Space inside the border of an element. padding: 10px;
Border The area between the padding and margin. border: 2px solid #000;
Width Specifies the width of an element. width: 100px;
Height Specifies the height of an element. height: 200px;
Display Specifies the display behavior of an element. display: none;
Block Block Elements; start on a new line and take up the full width available (by default) meaning they extend to the left and right as far as they can. Block-level elements create a block or box for their content. display: block;
Inline Inline Elements; do not start on a new line and only take up as much width as necessary. Inline elements do not force line breaks and allow other inline elements to sit beside them. They only take up as much space as their content requires. display: inline;
Inline-Block A hybrid between inline & block elements. Inline-block elements are formatted like inline elements where they sit next to each other on the same line. However they also accept width & height properties and can have margins & padding like block elements. display: inline-block;
Flexbox Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items can grow or shrink to fill available space. display: flex;
Grid Grid is a two-dimensional layout method for creating complex responsive layouts. It allows for the precise control of rows and columns. display: grid;
Position Specifies the positioning method for an element (static, relative, absolute, fixed). position: fixed;
Static Positioning The default position for HTML elements. Elements are positioned according to the normal document flow and top, right, bottom, and left properties do not apply. position: static;
Relative Positioning The element is positioned relative to its normal position. The top, right, bottom, and left properties will offset it from its original position without affecting the layout of surrounding elements. position: relative; top: 10px;
Absolute Positioning The element is positioned relative to its nearest positioned ancestor (other than static) or relative to the initial containing block if no positioned ancestor is found. The top, right, bottom, and left properties are used to specify the offsets. position: absolute; top: 20px; left: 30px;
Fixed Positioning The element is positioned relative to the viewport which means it always stays in the same place even when the page is scrolled. The top, right, bottom, and left properties are used to specify the offsets. position: fixed; top: 0; right: 0;
Float Specifies whether an element should float to the left or right of its container. float: left;
Clear Specifies what elements can float beside the cleared element. clear: both;
Created by: ProfJordan
Popular Computers sets

 

 



Voices

Use these flashcards to help memorize information. Look at the large card and try to recall what is on the other side. Then click the card to flip it. If you knew the answer, click the green Know box. Otherwise, click the red Don't know box.

When you've placed seven or more cards in the Don't know box, click "retry" to try those cards again.

If you've accidentally put the card in the wrong box, just click on the card to take it out of the box.

You can also use your keyboard to move the cards as follows:

If you are logged in to your account, this website will remember which cards you know and don't know so that they are in the same box the next time you log in.

When you need a break, try one of the other activities listed below the flashcards like Matching, Snowman, or Hungry Bug. Although it may feel like you're playing a game, your brain is still making more connections with the information to help you out.

To see how well you know the information, try the Quiz or Test activity.

Pass complete!
"Know" box contains:
Time elapsed:
Retries:
restart all cards