CSS学习笔记（无体系）

本章主要参考来源：

W3C - CSS Tutorial

outline
like border；
Eg:
p {border: 1px solid black; outline: 5px dotted red;}
font
Eg:
p {font: italic 20px Verdana;}
=======================10.24============================
selector nth-child(even/odd)
Eg:
tr:nth-child(even) {background-color: #f2f2f2}
responsive overflow-x
Add a container element (like
) with overflow-x:auto around the element to make it responsive:
Eg:

... table content ...
display
Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element withdisplay: block;
is not allowedto have other block elements inside it.
display:none & visibility:hidden// still take up the same space as before
max-width
using max-width in stead of "width", so that it can be displayed well on the small brower.
position

relative
adjust away from its normal position(top right bottom left properties)
Other content will not be adjusted to fit into any gap left by the element.
fixed
positioned relative to the viewport
absolute
positioned relative to the nearest positioned ancestor;if no ancestor, relative to body;

z-index
z-index property
An element with greater stack order is always in front of an element with a lower stack order.
If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
img opacity
img{opacity: 0.3;}
overflow
only works for block elements with a special height.

visible - default ,not clipped and renders outside the element's box
hidden - clipped, the rest is hidden;without scroll;
scroll - clipped, and a scrollbar is added both horizontally and vertocally (even if you do not need it)
auto - similar with scroll, but only add scrollbar when necessary;
overflow-x/y
overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.

Elements after a floating element will flow around it. To avoid this, use the clearproperty.
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto; to the containing element to fix this problem.

inline-block
to create a grid of boxes that fills the browser width and wraps nicely, instead of float and clear.
align

Center Align Text
To just center the text inside an element, use text-align: center
Center an Image
use margin: auto;and make it into a block element
using position
When aligning elements with position, always define margin(0 is okay) and padding(0 is okay) for the element.
using float
When aligning elements with float, always define margin and padding for the element
Center Vertically - Using padding
To center both vertically and horizontally, use padding and text-align: center:
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal to the height property.
.center {line-height: 200px; height: 200px; border: 3px solid green; text-align: center;}
/* If the text has multiple lines, add the following: */
.center p {line-height: 1.5; display: inline-block; vertical-align: middle;}
Center Vertically - Using position & transform
If padding and line-height is not an option, a third solution is to use positioning and the transform property.
.center { height: 200px; position: relative; border: 3px solid green; }
.center p {margin: 0;position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%);}

=============================10.25===============================

Combinators
- descendant selector (space)
- child selector (>)
  the immediate children of a specified element, no grandchild.
- adjacent sibling selector (+)
  Sibling elements must have the same parent element, and "adjacent" means "immediately following".
  just one.
- general sibling selector (~)
  all elements that are siblings of a specified element， not just after it.
Pseudo-classes/即伪类
Opacity / Transparency
The opacity property can take a value from 0.0 - 1.0.
IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

Transparency using RGBA
div { background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */}
div { opacity: 0.3; filter: alpha(opacity=30); /* For IE8 and earlier */}

Navigation bar
Add an "active" class to the current link to let the user know which page he/she is on:
li a.active { background-color: #4CAF50; color: white;}
li a:hover:not(.active) { background-color: #555; color: white;}
tooltip

[attribute~="value"] Selector
[title~="flower"] { border: 5px solid yellow;}
The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".

=========================10.29===========================

display one img on top of the current background image
background-image: url(img_flwr.gif), url(paper.gif);//img_flwr is on top.
Change the size of the background image so it always fits the entire page.
background-size: cover;

=========================10.30==============================

The matrix() method combines all the 2D transform methods into one.
transform: matrix(1, -0.3, 0, 1, 0, 0);
//matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());