本章主要参考来源：
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 <div>) withoverflow-x:autoaround the <table> element to make it responsive:
Eg:
<div style="overflow-x:auto;"><table>... table content ...</table></div>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 beforemax-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-xspecifies what to do with the left/right edges of the content.
overflow-yspecifies what to do with the top/bottom edges of the content.
- float
- 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, usetext-align: center - Center an Image
usemargin: auto;and make it into a block element - using
position
When aligning elements with position, always definemargin(0 is okay) andpadding(0 is okay) for the <body> element. - using
float
When aligning elements with float, always define margin and padding for the <body> 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
- add a arrow
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
- box
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - attribute selectors
- [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===========================
- background
- 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;
- Gradients
display smooth transitions between two or more specified colors
=========================10.30==============================
- 2/3D transform
- 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());
- Transitions
