review:
Sprite Figure use:
FIG PS cutting applications à
Figure Sprite called CSSSprite or CSS sprites
The pages of pictures Suixiao concentrated in a relatively large picture to load, so the goal is to reduce http requests, increase the speed of page loads
FIG Sprite implement key is to adjust the background-position
FIG Sprite into standard and non-standard FIGS Sprite Sprite FIG.
Positioning position
Static static positioning (default)
Relative positioning of the relative movement with respect to itself, and without departing from the document stream, still has the original position
Absolute absolute positioning and floating as a departure from the standard flow; ancestor elements, the first element positioned offset with respect to
Fixed fixed positioning out of the standard flow, no matter what the circumstances, are positioned relative to the page
Sticky viscous positioning
Tip: In actual use, using relative positioning or absolute positioning it? The answer is the parent element using relative positioning child elements using absolute positioning
Positioning four directions with the value of
Top
Right
Bottom
Left
Gland effect
定位 relative position fixed sticky
Floating left right
Gland order
z-index no units, pure numbers, the greater the value, the higher the priority (shown in the upper layer)
In the case where the presence of a nesting relationship, according to the parent element z-index display order of the lid, the child element is set invalid (relative to the parent element sibling element setting is invalid)
Sons nesting box has z-index
Z-index of the parent box gland determined order; z-index regardless of how the sub-set of the cassette
One, two kinds carousel figure presents
Breathing Carousel Figure: Jingdong
All pictures pile together
Scroll Carousel Figure: Taobao
All images displayed side by side
Two, CSS common units
em relative units: the box with respect to the ratio of the size of the parent
rem relative units: ratio relative to the root element (html) font size
px pixels, is the most basic point data is displayed on the screen. For web design, easy and intuitive, relative units
The pixel is relative to the screen resolution of the display.
For example, windows resolution used by the user is typically 96 pixels / inch. MAC used by the user and resolution is typically 72 pixels / inch.
pt is commonly used in the printing industry unit, 1pt = 1/72 inch. Absolute units
in inches, absolute units
mm absolute units, mm
cm absolute units, cm
1in = 2.54cm = 25.4 mm = 72pt = 6pc
you 度
turn ring
1turn = 360deg
Four, hack
hacker hacker
Because the browser compatibility issues, we write different html or css code for different browsers, in order to achieve a different browser to view the same effect.
html hack sum css hack
4.1 html hack
IE browser compatibility a big problem, give us a lot of port, writing hack.
| 1 <!--[if lte IE 9]> Part 2 content 3 <![endif]--> |
For different browsers on the same html file, html to write a different structure.
IE has a lot of compatibility issues, provides us with a number of interfaces.
Hack symbol represents the contents inside the only show in IE9 and below the browser, IE10 and above or advanced browser will think this is a comment.
If if is, LTE is less than or equal, less than, or equal to, IE browser 9 represents the version.
lte: less than or equal, less than or equal to represent.
lt: less than, less than represented.
gt: greater than, greater than represented.
gte: that is greater than or equal to
Applications: can write specific code for lower versions of the browser.
There are special written for a particular version of IE:
| 1 <!--[if IE 6]> 2 <h3> Only IE6 browser can display, advanced IE browser or higher version is considered a comment </ h3> 3 <![endif]--> 1 |
Only to IE6 browser Annotated Code,
| 4 <!--[if IE 6]> 5 <h3> I'm IE6 </ h3> 6 <![endif]--> 1 |
4.2 css hack
css hack: hack and hack value selector
Ø hack CSS values
/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }
Hack characters: -, _
In front of the property name underlined or horizontal line.
This property represents only IE6 know, do not know this other property.
| 1 .box{ 2 width: 200px; 3 height: 200px; 4 background: orange; 5 color:#000; 6 -color: #fff; // IE6 only display text color to white. 7 } |
/* IE 6/7 */
Hack符：! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
This property represents only IE6 / 7 know, do not know this other property.
/* IE 8/9 */
.selector { color: blue\0/; }
Hack character: \ 0 /.
Require written on the back of the property value.
In IE8,9 only know where.
/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
Hack operators: \ 9.
Require written on the back of the property value, before the semicolon.
Ø CSS selector hack
/* IE 6 and below */
* html .selector {}
This choice is loaded only in IE6, other browsers think your choice is wrong.
Advanced browser is already considered html root tag, * not his ancestor element.
| 1 * html .box{ 2 width: 200px; 3 height: 200px; 4 background: orange; 5 color:#000; 6 } 7 |
/* IE 7 and below */
.selector, {}
This choice is only in IE7 and below version loaded, other browsers think your choice is wrong.
| 1 .box,{ 2 width: 200px; 3 height: 200px; 4 background: orange; 5 color:#000; 6 } |
/ * JoRyo IE 6 * /
html > body .selector {}
> Child selector: select only son level, other levels not vote offspring.
IE6 does not recognize the child selector.
除了IE6都能正常加载。
| 1 html > body .box{ 2 width: 200px; 3 height: 200px; 4 background: orange; 5 color:#000; 6 } |
五、IE6的兼容
5.1 选择器的兼容
IE6不兼容交集选择器里的类选择器连写。
div.box 可以兼容
div.box.cl 不兼容
解决办法：
使用标签和一个类的交集。
其他的7种选择器完美的兼容：
标签、id、类、交集（div.box）、后代、并集、通配符
| 1 div.box.cl{ 2 width: 200px; 3 height: 200px; 4 background: orange; 5 } 6 div.box { 7 8 } 9 //高级浏览器中.box.cl权重比.box高渲染为橘色 10 //IE6中.box 和.box.cl权重相同，css书写后面的层叠掉前面的颜色渲染为红色。 |
5.2 盒模型的兼容
Ø 如果不写DTD，IE6里的盒子是内减的，其他浏览器是外扩。
解决方法：
必须写DTD。
Ø 如果盒子高度小于默认字号，不会正常显示。高度会是默认的字号。
解决方法：
单独给IE6浏览器，强制给个很小的字号。
| 1 .box{ 2 width: 200px; 3 height:3px; 4 background: orange; 5 -font-size:3px; 6 } |
5.3 浮动的兼容
Ø 不浮动的盒子不会钻到底下
情况：一个盒子浮动，一个盒子不浮动，在IE6里，不浮动的盒子不会钻到浮动盒子的下面占领它原来的标准流位置。
解决办法：制作压盖效果用定位。同一级的盒子要浮动都浮动，要不浮动都不浮动。
Ø 3px bug
情况：一个浮动，一个不浮动，IE6里两个盒子之间会出现3px的间距。
解决方法：（不允许这么写）。
必须解决：给左边的浮动盒子加一个-3px的右margin。
只给IE6浏览器加，注意Hack符。
| 1 .box1{ 2 width: 200px; 3 height: 200px; 4 background: pink; 5 -margin-right: -3px; // and only ie6 understanding. 6 } |
Ø double margin issue
: The number of floating elements, there is a margin in the same direction as the float, the first element of the double margin problems occur.
| 1 .box p{ 2 float: left; 3 margin-left:10px; 4 width: 100px; 5 height: 100px; 6 background: pink; 7 } |
Solution: ① with padding to squeeze his father's
| 1 .box{ 2 width: 590px; 3 height: 100px; 4 border:1px solid #ddd; 5 margin:100px auto; 6 padding-left:10px; 7 } 8 .box p.first{ 9 margin-left: 0; 10 } |
② to the first element of a floating margin halved (IE6 only add)
| 1 .box p.first{ 2 -margin-left: 5px; 3 } |