CSS Learning Notes

CSS compatibility issues http://www.quirksmode.org/css/selectors/
Programmers learn English http://blog.csdn.net/friendbaby/article/details/6937290
About browser compatibility for CSS properties, http://caniuse.com/
Browser page Rendering Process http://blog.csdn.net/lihongxun945/article/details/37830667

What is Table-cell
BFC

Specification
Using @import to introduce other CSS files is not recommended he will cause some page rendering performance issues
Category naming layout G-Module M-
Semantic naming
The order in which attributes are written
The Display property is first written and then its own property is followed by the Text property and other properties
Displaywidthfont
Visibilityheighttext-align
Positionmargintext-decoration
Floatpaddingvertical-align
Clearborderwhite-space
List-styleoverflowcolor
Topmin-widthbackground

The large order is from left to right and then from top to bottom.

Hack Way
IE6 _property:value; Add _ only IE6 can recognize the attribute name
Ie6/7 *property:value; in front of the property name * only IE6/7 can recognize

CSS modularity

. M-nav {}
. M-nav Li,.m-nav a{}
. M-nav li{}
. M-nav a{}
The module extension is to add a class example on the original class as follows
. M-nav-1 {}
. M-nav-1 Li,.m-nav a{}
. M-nav-1 li{}
. M-nav-1 a{}

Border-radius IE8 and below are not supported
Box-sizing IE7 and below are not supported
Box-shadow IE8 and below are not supported
Outline IE7 and below are not supported

Selector Selector

1. Tag Selector Div,h1,p,span
2. Class selector (case sensitive) class= ""
3.id selector (case sensitive) id= ""
4. Property Selector
[Disabled] {background-color:red;}
[Type=button] {Color:blue;}
[ID=BTN] {color:red;} The ID selector is a special case of the property selector
[Class~=sport] Select the element containing sport in the class name
[lang|=en] Selects the element with the Lang attribute value beginning with en or en-<p lang= "en-US" >hello</p> (not much)
[href^= "#"] Select an element with an HREF value that begins with a # number if your attribute value is a symbol or contains a space inside it, you need to enclose it in quotation marks;
[Href$=pdf] Select an element with an HREF value ending in pdf
[Href*=lady] Select the element that contains lady in the href value
5. Pseudo-Class selectors (all beginning with a colon)
A:link Select all links in the page and the href is a value
Links visited by a:visited
A:hover when the mouse moves up
A:active the instant style of the Click
If you want to write four, the order must be this way.
: Enabled selects the available element settings style (input:enabled)
:d isabled Select an unavailable element to set the style ...
: Checked select selected element to set style
li:first-child{}
li:last-child{}
Li:nth-child (even) {} Select even items
Li:nth-child (3n+1) {} n is calculated from 0 n=0:1 1:4 2:7 3:10 is the element that selects 1 4 7 10 items
Li:nth-last-child (even) {} reverse the selection
: only-child{} Select elements that have only one child element such as UL, there is only one Li
dd:first-of-type{} selects the first DD element in all DD elements (of course not limited to DD, which can be any element)
Dd:nth-of-type (even) Select an element of the DD type for even items
Dd:nth-last-of-type (2n) inverted selection
span:only-of-type{} This span type element in the parent element of only one span type element in the selected neutron element is really around type-dependent
: empty{} Select elements that have no child elements that are empty, like <div></div>.
: root{} checked for HTML tags
: Not (P) Select an element that is not selected in parentheses
: target{} Select the anchor element that is currently active do not see the example Http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target
P:lang () Select each <p> element with the lang attribute value beginning with "en" as the beginning
6. Pseudo Element Selector
p::first-letter{} Select the first character below the P element to set the style
p::first-line{} Select the first row
:: Before{content: "." To insert content in front of the contents of the selected element (not front of the content)
:: After{content: "."}.. Behind..
:: selection{} is used for selected content
7. Descendant selectors and sub-selectors
. Main h2{} Select all the H2 elements inside the element with the class as main
. main>h2{} Select the first level of the H2 element in main (which is all H2 in the first level)
h2+p{} Select a p in front of this p (immediately preceding) must be a H2 so-called brother
h2~p{} Select the P element at all levels after H2 (behind)
8. Selector grouping
h1,h2,h3{}
CSS Inheritance

Child elements can inherit the style of the parent element

Some styles are inherited:yes that can be automatically inherited
Color Font text-align List-style
Some are inherited:no that cannot be inherited automatically.
Background Border position

CSS Precedence
A in-line style
B ID Selector
Class C Pseudo-Class and property selector
D tag Selector and pseudo element selector

Weight down from top down

Refer to the following table

Selector Abcdvalue
H1 0 0 0 1 1
P>em 0 0 0 2 2
Style: "" 1 0 0 0 1000
. Comment P 0 0 1 1 11
Div#content 0 1 0 1 101
A:link 0 0 1 1 11

The higher the value, the higher the priority

CSS Cascade if the precedence is the same as the back cover front

CSS change priority if priority is the same
1. You can change the order of the styles
2. Increase the priority of the selector + a tag selector such as. Tip and. Fuck priority so before. Tip plus a tag Selector p. Tip His priority is lifted.
3.color:blue!important; Empty one after the attribute value plus!important; Then his priority will prevail (only in this way when he is at his wits ' level)
Text
Font-size:[<length>|<percentage>] # (Note that the following # indicates that multiple property values can be written in, delimited)
Font-size:2em;
font-size:200%; The reference is the size of the font on the parent element
Font-family:<family-name>|<generic-family>
<generic-family>=serif|sans-serif|cursive|fantasy|monospace

The following three kinds are less commonly used in the first two are: Liner body, non-liner body is specified by the browser or the system default, if the browser default setting of the liner body is Microsoft ya Black, then we use this value is Microsoft ya black;
If you want to use a font in English, you can write it like this:
Font-family:arial, "the song Body"; Because Arial does not contain Chinese, use the following Chinese font.

Font-weight:bold|noraml; 100|200| ... 900 The weight is divided into 9, but most of the fonts do not support 9, etc.

Font-style:normal|italic|oblique
Italic is used in the font italic, is the font itself with the italic, oblique is inclined; If there's italic in the font, even if your value is oblique, then he's using italic.

Line-height:normal|number|length|percentage |1,16px,2em,200%|
The default is normal is about 1.14
If it is em,100% then his reference is the size of the font such as 2em font is 16px then his line-height=32px;
Line-height: When the value is number, for example, is 3, then his inheritance is directly inherited, meaning that his child elements of Line-height is also 3 if the parent element's font is a 30px child element of the font is 16PX then the parent element
Line-height is 90px and the child element only 48px;
A value of a percentage is calculated and then inherited, for example, 300% by the font is 30px to calculate, calculated that Line-height is 90px, then his child element of the line-height is 90px; no pipe element.
How the font change is 90px;

Abbreviation: FONT:30PX/2 Simsun,simsim;
Font:italic Bold 20px/30px SimSun;
font:20px SimSun;

(Font-size/line-height)
Three ways to Abbreviate
Color: color:red| #ffffff |rgb (255,0,0) |rgba (255,0,0,1) |transparent the last one to add an alpha channel to control transparency 1 is opaque

Horizontal text-align:justify; justified, spaces may increase by a bit more spacing to justify the ends
Vertical vertical-align:baseline,sub,super,top,text-top,middle,bottom,text-bottom,percentage,length;
The percentage reference is the row height;
Insert an emoticon image in the middle of a piece of text to set the style for the image.
If the value is 20px, then the meaning is to take baseline as the starting point to go up 20px;
If it is 50%, then look at the row height if the row height is 60px; then 30px; then go up 30px;
Highest point of top row
Text-top the highest point of the text
Indent Text-indent:2em|200%|10px;em is the size of the text several times if it is a percentage then the reference is the width of the entire container
-9999PX, this line of words can not be said to run outside the screen
We can use such a means to hide some words, seo inside

Line breaks do not want to keep a space do not merge tab to merge whether you want to wrap a line
white-space:normal|nowrap|pre|pre-wrap|pre-line|
Their way of handling look at the table below

NewLine Space and tab out of process
Normal merge Merge Wrap
NoWrap merge Merge does not break the line so that it exceeds
The pre reservation does not break the line so that it exceeds
Pre-wrap Keep Line Wrap
Pre-line Preserving merged Wrap

The merge in the table above is automatically merged [newline or Space and Tab] to a single space


word-wrap:normal|break-word|
Break-word: Long words allow automatic line wrapping;

Word-break:normal|keep-all|break-all
Break-all: Any of the two letters can be changed between lines;

Text-shadow: Text shadow: Length (each) && color
text-shadow:1px 2px #f00; Offset shadow color of the offset y-axis of the shadow x-axis
text-shadow:1px 2px 2px #f00; The third value is the color of the text color when there is no color for the Shadow's blur radius shadow;
Text-decoration:none;underline,overline,line-through;
Overline: underline;
Line-thought: Medium Dash
Text-decoration:underline overline; value can write multiple

Text-overflow:clip|ellipsis;

Text-overflow:ellipsis;
Overflow:hidden;
White-space:nowrap;

Three mates using text overflow in one line ... instead

cursor:[url,]* Custom mouse shapes; Cursor:url (xxx.cur), pointer;
auto; automatic processing;
Help: With a question mark
Pointer: Hand Type
Zoom-in: Zoom In
Zoom-out: Shrinking
Move: Mobile

Inherit forced inheritance

Box model

width:100px|3em|100%;
Max-width:
Min-width:
Max-height:
Min-height:
Margin merges the margins between adjacent elements to combine larger values; The margin of the parent element margin and his first child element or the last child element will also be combined with specific analysis


border-radius:0px 5px 10px 15px/20px 15px 10px 5px;1 and 5 corresponding horizontal radius vertical radius
border-top-left-radius:50%; set separately

Overflow:scoll display two scroll bars; auto automatically displays scroll bars
Overflow-x:
Overflow-y:

The default width height setting is the size of the Content-box

Content Box Content-box
Within (within) the border Border-box

Box-sizing:content-box|border-box/used to set the area specified by the width height

The same width and height padding border set different box-sizing display the size of the distinctly different

Box-shadow: can have multiple use, separate
box-shadow:4px 0px 0px 0px red
Horizontal cheap vertical offset blur radius shadow size
Blur radius and shadow size can not be set
When the color is not set, it is the text color
Box-shadow:inset 0 0 0, 0 0 0 0 red; Inner Shadow
Fuzzy radius How to understand, for example, the fuzzy radius is 3px; it is the outer edge of the shadow blur 1.5 inward Blur 1.5
Shadows are not space-occupying
And the contours are not space-occupying.

Outline contour with border similar color: there is a different value is invert is the current background color of the opposite color;

Background
Background-color: As with color
Background-image:url (), url (); A container will show two background images written first in the upper layer after the background color on the lower layer;
Background-repeat:space; Divide the space: tiled at the same time each picture will shed some space between;
Round: Scaling flattening possible: tiled co-workers ' pictures are scaled
When he is a two-value
The first value is the tile of the x-axis the second axis is the y-axis of the tile
background-attachment:scroll,fixed,local;
Background and content scrolling with local at the same time;
Content scrolling with scroll;
Fixed its reference is the whole viewport
Background-position: When used as a percentage of 20% 50%; This percentage is the picture of 20% 50% and also the container 20% 50%

Background-image:linear-gradient () Linear gradient
Linear-gradient (Red,green); Write only two colors default is from top to bottom so is red under the green
(to Top,red,green); Reverse from bottom to top so it's red and green.
(to right Bottom,red,green) toward the upper left corner of the corner red to the lower corner green
(0deg,red,green); 0 degrees gradient from bottom to top
(45deg,red,blue); Clockwise rotation of 45 degrees or 0 degrees in 0-degree direction.
(Red,blue,green); the first default defaults to 0, the third default defaults to 100, the middle default values are divided so that is 50%;
(Red,blue 20%,green); Set the middle 20%;
Radial-gradient () Mirror gradient
Extent-keyword Closest-side | Farthest-side | Closest-corner |farthest-corner
The farthest corner closest to the nearest edge of the center is the one near the nearest corner.
Radial-gradient (Closest-side,red,blue); The four sides are closest to the center.
(Circle,red,blue); The circle default size is the farthest corner
(red,blue); no write keyword the default is Farthest-corner
(100px 50px,red,blue); The x-axis radius is the 100y axis radius is 50 from outside the intranet color is red Blue
(100px 50px at 0 0,red,blue) can locate his center, for example, at 0, 0, then in the upper right corner.
(Red,green 20%,blue); You can set multiple
Understand these see annex
When we set background-position:right bottom for a certain background picture;
So this picture is in the bottom right corner of Padding-box why?
is by Background-origin: control Border-box Padding-box Content-box
His default value is Padding-box.

Background-clip:border-box Padding-box Content-box
Area clipping of the background image if you want it to appear in Content-box, then use Content-box as the other property.
Self-brain Repair
Background-size:auto,
20px 20px; The size of the fixed background picture
50% 50%; is 50% of the container and is likely to be stretched
Cover the whole container, maybe some part of it.
Contain, as large as possible, but not beyond the container.

Shorthand

Background:url (red.png) 0 0/20px 20px no-repeat;
Position/size
URL (green.png) 50% 50%/contain no-repeat Content-box Green;
The first box is Origin and the second one is clip if only one appears then he is Origin and clip

Block-level elements:d isplay:block;
Width is the width of the parent element,
Wide height can be set
Line break display
Row-level element display:inline;
Default width is content width
Cannot set width height
Peer Display
Display:inline-block;
Default width is content width
Wide height can be set
Peer Display
Wrap the whole block if it's out of the back, wrap the whole block.
You can set vertical-align:middle for this element, and the text nodes around him will be vertically centered
Display:none;
Display:none|visibility:hidden;
If Visibility:hidden, just not showing the location also occupies
Display:none; not shown and the position is not accounted for;

position:fixed; fixed positioned element his default width is the content width reference for the window
Mask layer is fixed positioning width:100% height:100%;

An absolutely positioned element if you give him left top right bottom all set the value then the value of his forehead will be open;
Three-line Adaptive layout
. head{position:absolute;top:0,left:0;width:100%;height:100px;}
. body{position:absolute;top:100px;bottom:100px;left:0;right:0;}
. foot{position:absolute;bottom:0,left:0;width:100%;height:100px;}

Relative positioned elements are not detached from the document flow

An absolutely positioned element is out of the document flow, and then the element behind him will occupy his original position.

Float
The default width of the floating element is the content width
Out of document Flow
An element that is out of the document flow the elements behind him will occupy his place.

Floating out-of-document flow and location-free document flow somewhat different
Float will be blocked by the border, not completely detached.

The elements of float are in the same document stream

Float to the element is out of the document flow to the content is in the text when the stream
Float: Is semi-detached from the document stream

. clearfix:after{
Content: "."; Display:block;clear:both;height:0;overflow:hidden;visibility:hidden;
}
. Clearfix{zoom:1;}
<div class= "Body Clearfix" > So write
Adding a clear float on the parent element will not occupy the following elements.

Center layout
. Child{display:inline-block;}
. Parent{text-align:center;}
The child element is inline-block; the parent element centers him.

. child{display:table;margin:0 Auto;}
disply:table; The width of the element is also followed by the content walk only set child does not need to set the parent element

. parent{
position:reative;
}
. child{
Position:absolute;
left:50%;
Trasform:translatex (-50%);
}


Vertical Center Table-cell + vertical-align
Vertical-align can be used for inline inline-block Table-cell elements

. parent{
position:reative;
}
. child{
Position:absolute;
top:50%;
Trasform:translatey (-50%);
}

A column of fixed width one column adaptive
A column variable width one column adaptive remaining width
Variable width adaptive for multiple columns

A column of fixed width one column adaptive
. left{float;left;width:100px; _margin-right:-100px;}
. right{margin-left:120px;}
IE6 next Bug

CSS Learning Notes