Skip to content

Instantly share code, notes, and snippets.

@gringogidget

gringogidget/ALIGNING NOTES

Last active February 23, 2016 23:36
Show Gist options
  • Save gringogidget/50b8847166a21699eb1b to your computer and use it in GitHub Desktop.
Save gringogidget/50b8847166a21699eb1b to your computer and use it in GitHub Desktop.
Download ZIP
Helpful Newb Programming Sites
Raw
ALIGNING NOTES
// Aligning notes:
- The default for most elements is usually block or in-line
- A separate block that takes up the whole width available based on the width of its parent element.
- When you use margin: auto, the browser automatically calculates the margins on each side. It will make equal amounts of space on the left and right sides of the margins.
- display: none; (removes styling)
- display: inline;
when an element's display is set to inline, the browser will not apply any width or height properties, or top and bottom margin settings. An inline element will only accept left and right margins and any padding value.
Inline elements naturally float next to each other, just like text in a paragraph. So any margin or padding values will only push surrounding elements away horizontally (they never push them away vertically). Links are inline elements by default.
```
ie:
link, link, link,
will become:
link,
link,
link,
```
How do you get rid of the spaces between elements that are display: inline-block;? target the <li> and make the right-margin a negative number. They will squish together. The size of the gaps will also affect the size of these gaps.
- display: inline-block;
The display value inline block generates an element that's like a block element but it's also flowed with its surroundings as if it were an in-line element, so you get a combination of both inline and block level display. The advantage to using inline block
over the inline method is that you can style an inline block element as you would a block level element with width, height and top and bottom margins while keeping it on the same line as the elements beside it.
two columns eg:
.primary, .secondary {
display: inline-block;
width: 40%;
margin: 20px;
}
- box-sizing: border-box; /* forces the padding and borders into the width and height of the element instead of expanding it)
- max-width: 900px; /* If the content area grows bigger than 900px, it won't grow any bigger than that)
- max-width: 100%; /* Will make an image fluid with resizing and will shrink and grow as you resize the browser)
- background-size: cover; /* perfectly scales full-page images
background-image: url('img/bear.jpg'); /* adds image, duh, but be sure to add ../ if it goes up in the folder structure.
background-repeat: no-repeat; /* makes the image not repeat, duh
background-position: center; /* centers in the middle of the page
background-size: 100%; /* Makes the image fit the container
background-size: cover; /* displays full image while maintaining ratio
- User agent stylesheet: default styles set by the browser.
- Giving the wrapper a width prevents the layout from stretching too wide.
- Setting the left and right margins to the value auto centers the wrapper in the browser.
One advantage to using <body> as the wrapper is that you don’t have to add an extra <div> in your markup to contain your layout.
- If you want to give your page a full background color or image, you'll need to apply it to the <html> element, and you can't place any elements outside of the <body>.
- Using a wrapper <div> is more appropriate if your site has elements that need to be placed outside the wrapper.
// Floats (to make columns! yay)
- When an element is floated, the element is taken out of the normal flow of the page and placed along the left or right side of its container.
float: right; /* takes it out of the vertical stack and brings to the right
float: left; /* takes the left column and doesn't let it interrupt the right. Clears the margin
/* you can change the order of your columns by simply switching left/right.
overflow: auto; /* the browser takes account for the height of the columns and div is no longer collapsed
***not recommended. Can cause scroll bars in some browsers and some of the content area can get cut off. Okay for very small projects.
(CLEARFIX generates a blank pseudo element after the content of our div with the class "class" actually creating content from the CSS, essentially. clear: both clears floats on both sides of the container.):
.class:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 60%;
}
// Why do vertical margins collapse?
- If there is no content, padding, or border area to interrupt two touching margins, the margins collapse to the largest of the two margin values.
- You may experience margins collapsing in adjacent elements like paragraphs and divs.
- If a div's bottom margin is larger than the top margin of the div below it, the margin area between the divs collapses to the largest of the two margin values.
// WHEN WHY HOW
Use inline-block to lay out navigation items side by side or create a simple two-column layout
Use inline-block when you need control over center and vertical alignment
Use floats to flow content along the left or right side of an element
Floats do not create default horizontal white space between elements
Be aware of collapsing containers
// ABSOLUTE
- Elements with absolute positioning are neither affected by or do not affect other elements in the normal flow of the page.
- They are like layers in Photoshop or Illustrator; you're free to place them anywhere you wish on the page.
- Positioned elements rely on you telling the browser where to place the them, using values called positioning offsets, for the element's top, right, bottom or left position.
- When you use absolute positioning, you place the absolutely positioned elements in relation to a parent container; the parent container is the positioning context.
- You can change the positioning context to other containing elements; this lets us position elements precisely where we want them.
// RELATIVE
- Absolute and relative positioning work hand in hand.
- An element with relative positioning gives you the control to absolutely position elements anywhere inside it.
- An element with absolute positioning is always relative to the first parent that has a relative position.
- If no parent element has a relative position, the browser viewport is the positioning context by default.
// FIXED
- Unlike absolute positioning, an element with fixed positioning stays fixed to one spot on the page, regardless of the size of the browser window.
- Fixed headers and navigation bars are common in web design. For example, the navigation bar on Twitter.
- Fixed positioning is always relative to the browser's viewport. Like absolute positioning, you determine the fixed spot using offset values.
- When you use relative, absolute or fixed positioning on elements, you may end up with several elements occupying the same space. This can make elements overlap or completely cover up other elements from view.
// Z-INDEX
- Positioned elements follow a stacking order that determines which elements display above or below other elements.
- By default, the stacking order of positioned elements is the order they appear in the in source code.
- Elements appearing later in the code sit on top on elements appearing earlier in the code.
- The z-index property is directly related to stacking order and it's what prevents elements from overlapping other elements.
- An element with a higher z-index value overlaps an element with a lower z-index value.
- Positioned elements have a z-index of 0 by default.
- z-index works only on elements with a position property set to absolute, fixed, or relative.
- If you set a z-index on an element with no position, it will do nothing.
Raw
FLEXBOX
- CSS layout methods like floats, inline-block and absolute positioning have limitations and were not designed to handle
the layout demands of today’s complex responsive websites.
- With flexbox you get the benefits of floats, block and inline-block, like stacking elements and laying them out
side-by-side, without any of the strange browser behaviors that come with using them.
- For example, You can evenly distribute the space inside a container so that the columns are of equal width.
- You can grow the width of one column while automatically shrinking the width of the two columns beside it.
- You can easily rearrange column order and display columns vertically on smaller screen sizes, without ever changing
the markup.
eg:
<ul> (flex container)
<li> (flex item)
<li> (flex item)
<ul> (flex container)
Flexbox Axis:
----------> main axis _ cross start
|
|
|
|
v cross axis _ cross end (default)
|main start main end| (default)
- Before you can use any flexbox property, you need to define a flex container in your layout.
- You create a flex container by setting the display property of an element to one of the flexbox
layout values: flex or inline-flex.
- By default, flex items are laid out horizontally on the main axis from left to right.
- By default, flex items stretch to fill the flex container's height.
- display: flex; creates a block-level flex container.
- display: inline-flex; creates an inline flex container.
- Any element outside a flex container is not affected by the flexbox layout.
- Only children of a flex container automatically become flex items.
@gringogidget
Copy link
Author

Stuff I've been learning that is like "whoa".

In Chrome, you can "inspect" vertically or horizontally. Just click the three-dotted line beside the X

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment