CSS related knowledge Three

CSS Transform, transition, and animation propertiesTransform Property(deformation)It is the basic property of CSS to change style, you can set the different values of this property, make the style changeThis property is relatively new, so not all browsers can support it, IE8 and previous browsers are not supported. Therefore, you also need to provide vendor prefixes for all browsers-webkit-transform:-moz-transform:-o-transform:-ms-transform:Remember the characteristics: This property does not affect the surrounding elements.  transform function: Be sure to add the manufacturer prefix when using 1:rotate: Rotate, give him a value between 0-360deg and he will modify it relative to the previous value2:scale: Scaling, resizing, example: Transform:scale (2); This example shows how to make the element method twice times. The number in parentheses represents a multiple of zoom, multiplied by the current size. Note that when you zoom in on an element, it doesn't affect the surrounding elements, and the browser doesn't move the elements around it, so what happens is that when you zoom in on an element, he's likely to overwrite the other items.CSS gives it two features: scale along the x-axis and scale along the y-axis, ScaleY and ScaleX two valuesThere is a very interesting visualization, when you set the scale to a negative value, you can have an element to flip back and forth. Equivalent to setting a mirror image for the element3:translate: Make the position change, use alone and no egg, and the transition attribute together is really interesting4:skew: Tilt, which is tilted along the x-axis and y-axis, and you can use it to deflect it by your own needs, and he has two functions, corresponding to the X-and Y -axes. Origin: Select the center point when rotating:when the system is initially set, his default value is the center point, and you can change the focus of the rotation by setting the OrginExample: Let the label rotate in the upper left corner around the upper-left corner:transform-origin:left Top (upper left corner) transitionTo get teansition into effect, here are a few things to do:1: Two styles, one for the original style, and the other for the transformed style, the web will be animated to handle the process of this change2:transition property that defines the style of the element's appearance before the animation begins3: Trigger, the general so-called Trigger is a pseudo-class to do the trigger, the most common is to use: hover to do the trigger, How to use this function:the core of CSS transition is controlled with 4 attributes, which properties to animate, how long the animation will last, what type of animation to use, and whether to delay before the animation starts1: The first property, Transition-property, indicates which properties to animate, you can specify properties, or you can use the keyword all. The attributes that need to be changed are separated by commas (,). 2: Specify the duration of the animation, transition-duraction This property is in seconds or milliseconds to do the unit. you can set different process times for different properties of the change, separated by commas. Note that transition and transform are not supported by many browsers, so the vendor prefix must be added before use.

-webkit-transition:width 2s,height 2s,transform 2s;
-moz-transition:width 2s,height 2s,transform 2s;
-ms-transition:width 2s,height 2s,transform 2s;
-o-transition:width 2s,height 2s,transform 2s;
Transition:width 2s,height 2s,transform 2s;

If you want the initial effect to change, you can also use the ALL keyword to replace these, independent attribute design;-webkit-transition:all s;-moz-transition:All 2s;-ms-transition:All 2s;-o-transition: All 2sTransitionAll 2s;This property is not supported by IE9 and its previous browsers How to give transition timingthe Transition-timing-function property to control the speed of the change. The Transition-timing-function property value can be any one of the following keywords: 1:linear2:ease the default properties of the system (very slow at first, fast in the middle, and finally slowing down) 3:EASE-IN4:EASE-OUT5: Ease-in-out;to add a vendor prefix to the transition property, this will enable more browsers to be compatible with it.  Delayed start: Transition-delay:transition-delay:x;This property can set the delay start, and this property also needs to set the vendor prefix. Tips:The problem with using the CSS drop-down menu is that when you accidentally let the mouse out of the menu, the menu disappears quickly, but you can use the Transition-delay property to quickly display the menu and then slowly disappear. to add code to the initial style:transition-delay:5s;also, do not add a delay in: hover:transition-delay:0; Transition's quick and easy wording:transition:all 1s ease-in. 5s;Order is: List properties, delay time, timer functionAnimationwith transition, you can only transition from one set of CSS properties to another set of CSS properties. CSS3 animation can be transformed from one set of properties to another set of properties in a transition to another set of properties. In addition, you can make an animation repeat, or stop when the mouse passes through, or even let the animation automatically return as soon as it ends.  CSS3 's animation is a little more complicated than transition, with benefits:1: You can not need to trigger the animation. 2: You can also add an animation to the hover state, which causes the animation to be played when the mouse passes through an element. 3: When a visitor first visits your website, it can play the animation on the Web page. There are two steps to creating an animation1: Define the animation. Includes creating keyframes, which lists the CSS properties to create the animation. 2: Apply the animation to the element. This attribute is also required to add a vendor prefix, but not for the IE vendor prefix-ms-, because IE 9 and earlier versions do not support CSS ANIMATION,IE10 support the @keyframes syntax without a prefix.  How to apply animation1: Create animations (create fade animations with @keyframs rules)

@keyframes FadeIn {
from{opacity:0;}
To{opacity:1;}
}

2: Apply an animation to an element

. announcement{
width:100px;
height:100px;
Background:green;
Animation:fadein 3s;
}

Note that the prefix must be added How to add timing to animation1:animation-duration property;2: Built-in keyword method (linear,ease,ease-in,ease-out,ease-in-out), let the animation start very slow, and finally end quickly. these are the same as the Transition-timing-function property.  How to complete animationIf you want the animation to run 10 times, you can add the following code to the animation style you want to create: animation-iteration-count:10browsers typically only run one animation at a time, and if that's what you want, don't use this animation-iteration-count property. If you want the animation to continue running, you can use the Animation-iteration-count property and use the keyword infinite. If you want the browser to animate in a reciprocating format, you can set the keyword: alternate Tips:to allow an animation to run for a certain number of times and eventually return to its original state, you can use even iterations and set the property to alternate. when the animation is complete, the browser suddenly changes the animation back to its previous appearance, and animation provides an attribute to save the animation to the end of the animation. animation-fill-mode:forwards;      formatting tables and formsthe corresponding label:<table> <caption> <colgroup> <thead> <tbody> <tr> line <th> cell title <td > The contents of the cell  define a style for a tablepadding (table setting padding property is completely non-functional)set padding to control the distance between cell contents and cell borders Adjust vertical and horizontal alignmentHorizontal alignment: text-align: Center Center (left right) This is a property that can be inheritedCenter vertically: vertical-align: Four values Top (top of cell) baseline (baseline) middle (centered) bottom (bottom)This property is not inherited and can only be added directly to th TD  Create a borderwhen you apply a border to a table cell, you leave a visible gap between the table and the cell, and to control the display of the border, you must fully understand the Cellsapcing property of the <table> tag and the Border-coolapse property of the CSS. controls the space between table cells. The border-spacing property is used to control the gap, and if you want to remove the portion of space that the browser typically displays between the cells, you can set the value of border-spacing to 0; table{border-spacing:0;}of course if you like a space between cells, you can set this property. eliminate bilateral boxesThe most effective way is to take advantage of the border-coolapse attribute. It accepts two values: separate and collapse. separate represents the default display, which produces a bilateral box. collapse indicates that the cell's bilateral box was canceled. table{border-collapse:collapse;}Note:If the Collapse property is set, then border-spacing does not work.  Rounded CornersUse the Broder-radius property to make rounded corners. Note:If the Collapse property is set, the browser ignores the rounded corners set for the form and outputs the square directly. PS: Set the style to the form in my opinion is to set the box model, you can see the form as a small box to join together, so do not use special methods, the most common way to achieve the form of the style design.  Define styles for rows and columnsset styles that are not the same as interlaced, implemented by the Nth-of-type selector. Tr:nth-of-type (odd) {}//Sets the style of odd linesTr:nth-of-type (even) {}//sets the style of even lines
If you want a particular row to have these attributes instead of all the rows, you can create a special class and then set it in a derived way.  Note:in general, the browser will leave those blank cells, if you want to hide these cells, you can set empty-cells:hide;table{empty-cells:hide;}However, if you set the Coolapse property, the browser will still show a blank grid.  table cell element for HTMLsome of the common HTML table elementsfieldsetlegendtext fieldsbottonsDrop-down Menuscheckbox and radio button layout a form with CSS1: Each label (label) is surrounded by a tag (tag). 2: Set the Display property value to Inline-block and the width. 3: Adjust style Introduction to CSS layoutsTwo types of Web page design: fixed-width or streaming. Fixed layout: Allows you to maximize the maximum control of the display of settings, but for some visitors will cause inconvenience. Small browser users will have no visible content display, large browser users will waste a lot of spaceStreaming layout: Depending on the size of the browser window, stretching or shrinking will use different designs depending on the resolution.   fixed width: Commonly used fixed-width method, many fixed width is designed under 1000px width, so that the browser's scroll bar and other parts occupy the window and space within 1024px x 768px, the most common width is 960px This design is being widely used. streaming layout: A flow layout is a so-called adaptive layout that produces different rendering effects based on different browser resolutions. But on the super-large display, this design is a little ridiculous, the text will become very long, not suitable for reading.   Responsive Design : In fact, according to different browser resolution proposed different layout style, compared to the first two, it will appear very complex.  Note: The Max-width and Min-width properties are a tradeoff between fixed-width design and streaming design.  design page: Start with the content, starting from the most essential things, find your page is what to do, your focus is what, first you want to highlight the main manifestation. Then consider your style question.  40 different CSS styles are available on the Layoutgala websiteGridinator provides a simple tool that can be used to create complex, multi-grid systems.

CSS related knowledge Three