Css-skill sorting (1-13)-animagi

Css-skill sorting (1-13)-animagi (updating)

1. Cancel the default style in the browser form

A. Focus border of input and textarea in chrome

Input, button, select, textarea {outline: none}

B. Remove textarea from chrome and drag and zoom in.

Textarea {resize: none}

C. Solve the Problem of chrome input. textarea automatically fills in a yellow background.

Input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

-Webkit-box-shadow: 0 0 0 1000px # FFFFFF inset;
}

2. css highly adaptive:

. Demo: after {content: "."; display: block; height: 0; overflow: hidden; clear: both; visibility: visible ;}

3. Lower version of IE browser box-shadow

. Box {-moz-border-radius: 15px;/* Firefox */-webkit-border-radius: 15px;/* Safari and Chrome */border-radius: 15px; /* Opera 10.5 +, and IE browser using IE-CSS3 */-moz-box-shadow: 10px 10px 20px #000;/* Firefox */-webkit-box-shadow: 10px 10px 20px #000;/* Safari and Chrome */box-shadow: 10px 10px 20px #000;/* Opera 10.5 +, as well as IE browser using IE-CSS3 */behavior: url (ie-css3.htc);/* notify IE browser to call the script to act on the 'box' class, only black shadow valid */}

The. htc file is a script file that can be used to describe web behavior, and the ie-css3.htc enables IE to support some properties of CSS3, working with VML (a markup language that vectorizes graphical data ).

Note:

1. The current element must have a positioning attribute, such as the position: relative or position: absolute attribute.
2. The z-index value must be higher than that of the surrounding elements.

Blog: http://www.zhangxinxu.com/wordpress? P = 783

In addition:

Behavior: | Url (# objID) | url (# default # behaviorName)

Behavior (Behavior) is a feature launched by IE5.0. It is very powerful. Combined with style sheets, it can add Behavior (new attributes, methods, and events) to any HTML object)

Url ( Url )	:	Use absolute or relativeUrlAddress-specific DHTML behavior component (. htc)
Url ( # ObjID )	:	Binary implementation (ActiveX? /STRONG> control. Here# ObjIDIsObjectIdAttribute Value
Url ( # Default # behaviorName )	:	The default behavior of IE. Identified by the behavior name (# BehaviorName) Specified

4. compatible with background-size

A. Parameters

Background-size: contain; // reduce the image size to adapt to the element (keep the aspect ratio of the pixel );

Background-size: cover; // extend the image to fill the element (keep the aspect ratio of the pixel );

Background-size: 100px 100px; // adjust the image size to the specified size;

Background-size: 50% 100%; // adjust the size of the image to the specified size. The percentage is relative to the size of the contained element.

B. browser compatibility:

Internet Explorer and Internet Explorer are not supported;

Add the private property-moz-background-size in Firefox;

Added private attributes-webkit-background-size support for Safari and Chrome;

Opera does not support the background-size attribute, nor does it support adding its private property-o-background-size.

　　C. compatible IE code:

Html, body {width: 100% ;}
. Main-warp {
Width: 100%;
Background: url (.../../images/mall/list/bj.jpg) no-repeat;
Background-size: 100% 100%;
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = '.../images/mall/list/bj.jpg', sizingMethod = 'Scale ');
}

5. css absolute positioning elements are centered on the page

Note: The height and width values must be set.

Method 1:

p{    height:10%;    width:30%;    position: absolute;    margin: auto;     top: 0; left: 0; bottom: 0; right: 0;}

Method 2:

p{    height:10rem;    width:30rem;    position: absolute;    left:50%;    margin-left:-15rem;    top:50%;    margin-top:-5rem;}

6. css uses table-cell to center

Display: table. This element is displayed as a block-Level table (similar

Display: table-cell; this element is displayed as a table cell (similar

). The table is preceded by a line break.

And

) 7. Post-positioning occlusion Absolute, relative positioning element. Its Parent element (including blocks) is position: absolute; or yes. It is not required to use position: relative. If the contained block has width and height constraints, the child element exceeding the limit is blocked. The width and height of the parent element of a block are not affected. Related connection: http://www.zhihu.com/question/19926700 8、-webkit-font-smoothing Set the font's anti-aliasing or smoothness attribute. None ------ better for low-pixel text Subpixel-antialiased ------ Default Value Antialiased ------ anti-aliasing 9. The percentage of margin/padding-top/bottom is calculated based on width. I agree with the first two statements. (1) because we need to build the same margin/padding in both the vertical and horizontal directions. If the relative method of the two percentages is different, the percentage cannot be used to obtain the vertical and horizontal la S. The basic CSS model focuses on the needs of "typographical". Therefore, the horizontal and vertical directions do not actually have the same weight. More precisely, they are determined by the writing direction. For common horizontal text, the starting point of the layout is that the horizontal width is fixed, while the vertical direction can be infinitely extended. Vertical text is the opposite. So when the text is in the vertical bar, the margin/padding-* is actually calculated based on the height rather than the width. (2) If height is used for calculation, the percentage * container height = padding-top (assuming this is the equation), but the container height = content height + padding-top (B equation ), if A is set up, the padding-top and padding-top attributes affect the B equation, but the B equation is A condition of the equation and an endless loop. 10, The image is located at the bottom of the image. Because the img is an inline-block, when the image height is smaller than the font height,The height of the li line is affected by the font size, and the image is aligned according to the bottom boundary of the font height. Two solutions: 1. Set font-size to 0 by li; 2. Set display: block for the image; 11. When height: 100% is set in Firefox, the padding-bottom is invalid. Compatibility method: Do not set padding-bottom. Use the height of the after pseudo class instead. {content:".";height:0.9rem;visibility:hidden;display:block;clear:both;font-size: 0;} 12When overflow is set: scroll, the child element floating becomes invalid. Because it is affected by the width of the scroll bar, if you must have a scroll effect, set another p to the outside of the parent element. After setting the width, overflow: hidden; Then, increase the width of the parent element by about 20 PX. 13, Continuous click, to prevent the background from becoming blue Body {-moz-user-select: none;/* Firefox */-webkit-user-select: none;/* webkit browser */-ms-user-select: none; /* IE10 */user-select: none ;}