Understanding CSS, Inspiration

Ashamed to say that the CSS understand, but in the project is rarely the correct use of CSS, if the object-oriented CSS bar, in fact, not do not want to use CSS is inherently object-oriented, highly reusable, but if each is extracted separately, there will inevitably be too many classes and their own lazy.

What are you going to do? Choose what kind of label, the same name. From the nature of the content, it is what it is.

In miniature format, you can use class instead of class= "vcard" contact information if some content requires no tags.

　　

The requirements and flowcharts allow you to consider in advance what elements to use for layout.

Use of Tags:
UL unordered list
OL ordered List
DL>DT+DD description content can be used in the description of the product, etc.
BLOCKQUOTE description, Q Short description cite reference can be used in user comments
EM stress

CSS Properties
Replace border with outline so that you do not have to reduce the value of border or use Box-sizing:border-box;

Also want to set height have want highly adaptive can use Min-height

Box-sizing
Indicates which width is included, and the default value is Content-box, which means width only includes content widths

Media Enquiry

@media screen and (min-width:640px)
Screen screens (WIDTH:XX) include browser scroll bars

Only hide this rule from browsers that do not support this syntax
Not if the browser does not meet the set conditions can be set by not

• By device-width you can get the device width and height excluding browser scrollbars.
• The orientation feature allows you to design different styles based on the width and height of the screen. Orientation:landscape is matched successfully when the browser width is greater than the height, while portrait is the opposite. We can use it to implement responsive navigation.
• Touch-enabled can match touch screen

Responsive font size through media queries and REM

html{
font-size:10px;
}
@media only Device-width and (min-width:360px) {
html{
Font-size:11px!important;
}
}
@media only Device-width and (min-width:400px) {
html{
Font-size:13px!important;
}
}
@media only Device-width and (min-width:1000px) {
body{
max-width:640px;
margin:0 Auto;
}
}

Devices such as the IPhone, IPad, and Android will measure device-width through a shorter pair of four screen sides. In other words, a given size of 320x480 device, whether in portrait or landscape mode to see, Device-width will be 320px.

Web page Font

@font-face Define font rules

@font-face{
font-family: Font name;
Src:local (' font name '), url (' font path you want to import ') format (' Font type ')
}

Local uses the name of the source font to check if the font is already installed on the user's machine; The URL provides a path to the font that is used when the font is not locally available, and format specifies the type of font

Used by font-family: font name, and can overwrite characters.

Compatible with IE9 below

Src:url (' Xx.eot ');
IE9 supports EOT format and does not support the local

To enforce download-defined fonts for compatibility
Local ('? ')

You can specify multiple URL paths to divide to achieve a compatible effect.

A simpler approach to compatibility

@font-face{
Font-family:name;
Src:url (' Filename.eot? ') format (EOT),
URL (' filename.woff ') format (' Woff '),
URL (' FILENAME.OTF ') format (' OpenType '),
URL (' filename.svg#filename ') format (' SVG ');
}

@font-face Generator (http://www.fontsquirrel.com/fontface/generator/). Simply upload the font file you want to use, @font the-face generator will convert it to all relevant formats--and you can generate CSS that you need to use in your pages.

The Font-stretch property, which tells the browser to display a narrower font style than it is currently.

Use the Font-size-adjust property. This property can dynamically modify the Font-size property.

Text effects

Text-shadow:x y Blur-radius Color
Text shadow, support for multiple shadows, split

-webkit-text-stroke:width Color
Strokes

-webkit-text-fill-color:color
Fill, stroke the outline of a character

Text-overflow:ellipsis
Replace an out-of-text with an ellipsis
White-space:nowrap;
Prevent text from being folded into multiple lines

Note that you also need to add Overflow:hidden, and the width.

Resize:both;
Change element size

text-align:justify;
Align text on both sides
Text-align-last
Set the alignment of the last paragraph of text

Multi-column Layouts

Column-count:number
To divide into several columns

Column-width: Unit
Automatic breakdown by Screen width

COLUMN-GAP: Unit
Boundary interval

column-rule:1px solid red;
Boundary

Background

One element supports multiple background images to, split

Background-size
Zooming a background image

　　

Background-clip:border-box, Content-box, Padding-box
Background clipping, which sets the part of the box model to be the bounds of the background (color or picture) display

　　

Background-origin:border-box, Content-box, Padding-box
Set the point at which the background starts to calculate

　　

Background-repeat:space, round
Space: The largest number of pictures that are tiled and not cropped or scaled, and white space appears in the middle of them when displayed
Round: Fills the maximum full number of pictures that contain elements horizontally and vertically

Background-image:image-rect (Url,top,right,bottom,left)
Background picture clipping, solving picture sprite problem

Mask:url repeat x y;
Matte Cover

Border-radius

Border

Border-image
Border picture

Box-shadow:inset x y radius spread color
Box shadow, Radius: Blur radius, spread: distance of shadow spread

The RGBA value can only be applied to the element that it specifies, so the child element may veto all inheritance.

CurrentColor represents the current color value

Appearance:button, Radio-button, password ...
Use colors from different places in the operating system.

-transform transformation

Allows multiple transformations to be separated by a space transform:rotate (10deg) skew ();

Transform:rotate (10DEG);
Rotating

Transform-origin:x y;
Change the origin, the default origin in the Transform property is the horizontal vertical center.

Translate (x, y)
Panning, which moves an element from its default position

Translate is very similar to using relative positioning and the left and top properties, but keep in mind that the transformed element retains its position, just as it appears to have been moved from the display, transformed by an image of the element, not the element itself.

Skew (x, y)
Tilt

Scale (x, y)
Scaling

Matrix
Matrix

Box-reflect:direction offset image;
Reflection

Transition:property time Ease, linear, ease-in, ease-out, ease-in-out delay

Transition

Animation
@keyframes declaring keyframes

@keyframes ' name ' {
keyframes{
Property:value;
}
}

Called by animation.

Animation:name time Ease, linear, ease-in, ease-out, ease-in-out delay count direction
Name Duration motion mode delay Execution (infinite repeat) direction (normal or alternate reverse playback)

Playback status
Animation-play-state:running|paused
Running indicates that the animation is playing, while paused indicates that the animation is not playing

Multiple animations are allowed.

3D transformations
transform-style:preserve-3d;

Perspective
Perspective

Perspective-origin

Transform-origin
Transform Origin Point

Understanding CSS, inspiration