CSS3 New Properties
First, "CSS3 new attribute prefix" 1,-webkit-:chrome/safari 2,-moz-: Firefox 3,-mo-:ie 4,-o-: Opera Open Gate Two, "CSS length units" 1, px: pixels. Fixed length, indicating a resolution of a few pixels, 2,%: Indicates a percentage relative to the default value, 3, EM: Length is linked to the font size of the element. REM: The length is linked to the font size of the root element. That is, the HTML font-size hook, if not set, the default 16px. The "em-rem difference" em is linked to the font-size of the current element itself, and if the current element is not set, it looks up to the nearest ancestor element font size, up to the root font size, and REM is independent of the current element font size, directly related to the root node font size. Code
html{ font-size:48px; /* Modify the root element font size */} #div3 { font-size:200%; /*32, * * background-color:yellow; Height:3rem; /* 3*32=94*/ }
Iii. "CSS3 Background" 1, Background-clip: Setting the background or background color of the crop display area Border-box: Starting from the outer circle of the border Padding-box: starting from the inner circle of the border Content-box: from the text content Area start display if the background or background color is not in the display area, it will be cropped. 2, Background-origin: Sets the position of the upper-left corner of the background map to position the display Border-box: The upper-left corner of the background is displayed from the edge of the border Padding-b OX: The upper-left corner of the background is displayed from the inner circle of the border Content-box: the upper left corner of the background image shows the "note" from the text content area Background-origin does not change the size of the background map display area, only determines where the upper-left corner of the background map begins to position. Background-clip is only responsible for cutting out the display area, not concerned about where the background map is located. 3, Background-attachment: Background map attachment Way scroll: Background map with the region rolling fixed: The background map fills the entire area. and is fixed and does not scroll with the scroll bar. 4, abbreviated form: Background:background-color background-image background-repeat background-attachment background-position; code
#div4 { width:100px; height:1000px; Background-color:yellow; padding:20px; border:20px dotted red; Background-clip:border-box; Background-image:url (img/005.png); /*background-repeat:no-repeat;*/ Background-origin:content-box; background-attachment:fixed; /* Verify the statement */}
Fixed background does not scroll with scroll bars
Iv. "Transition Transition Properties" transition:all. 5s ease 3s; Transition properties, accept four properties 1, set which CSS property to participate in the transition, you can specify all or none directly, 2, how long the transition is completed. usually. 3s,. 5s 3, Transition style effects. Usually ease 4, the transition delay after a few seconds before starting. You can omit the "note" to define the transition effect of multiple attributes at the same time, separated by. eg. Transition:width. 3s ease,height. 5s ease; code
#div5 { width:100px; height:100px; background-color:red; Transition:width. 3s ease,height. 5s ease;} #div5: hover{ height:50px; Background-color:yellow; width:50px; Transition:all. 5s ease; /* Contrast transition in different locations, the transition effects after the effect of recovery to the original state of the time difference */}
Pre-transition
Post-transition Five, "transform transformation Properties" 1, commonly used transformation functions: Translate (10px,10px) The second one does not write, the default is 0 scale (1.1) Scaling Overflow=hidden; rotate (90deg) 90 degrees Rotation, the default around the z-axis can use Rotatey (180deg), such as skew (20deg,30deg) distortion, horizontal, vertical distortion of how many degrees 2, can achieve a variety of transformations, separated by a space eg. Transform:skew (180deg) scale (1.5) translate (200px 200px); 3, Transform-origin defines the starting point of the transformation, which is commonly used for rotary transformation optional values: Left center right to P Center Bottom can also directly define X, Y coordinate points, the first number is x axis eg. transform:rotate (90deg); Transform-origin:right Bottom; Rotate the 90-degree code around the lower-right corner
#div6 { width:100px; height:100px; background-color:red; } #div6 -1:hover+ #div6 { /*transform:translate (200px 200px); */ Transform:scale (1.5); /* magnification * /Transform:rotatey (180deg); /* Rotate 180°*/ transform-origin:right Bottom; /* Around the lower right corner * /Transform:skew (180deg); /* Twist 180°*/}
Vi. "Use of CSS3 animation" 1, declaring a keyframe (animation) @keyframes name{from{}}} Stage of writing: ① directly use from-to notation; ② settings 0% to 100%, the beginning of the end must be 0%, 100%, 2, in the CSS selector, using animation to invoke the declared animation; animation abbreviation Animation-name: Animation name (declared Keyframe name) Animati On-duration: Animation Duration (5s) Animation-timing-function: Animation speed curve (ease) Animation-iteration-count: Number of animation plays, default is 1. (Infinite Unlimited Repeat) Animation-direction: whether the animation will play backwards in the next, the default is (do not reverse) normal. (Reverse play alternate) Animation-fill-mode: Indicates what state to stay in after the animation ends. To use this property, the animation must be executed in a limited number of times! (The forwards animation stays in the end state; backwards indicates that the animation stays in its initial state, the default effect) "Note" Name and duration must be set, other optional! Multiple animations can be set at the same time, separated by multiple animations. For example, animation:frame1 1s,frame2 1s ...
Responsive LayoutOne, the realization of the mode of response: JS Media Query Fluid layout
Flexible LayoutTwo. Flex flexible layout 1, learn about two basic concepts; Containers: parent element that needs to add a resilient layout; Project: Each child element in a resilient layout. 2, elastic layout of the use of ① to the parent container to add Display:flex/inline-flex, you can use a flexible layout inside the container display, do not follow the normal flow of the document is displayed; After the ② container adds the flex layout, Only the content is flexible, and the container itself is positioned in the document flow in accordance with the regular document flow; (not breaking the flow of documents, friendly) ③display:flex; Containers are displayed as block-level elements after they have been added to the flex layout display:inline-flex; After the container has been added to the flex layout, the float, vertical-align, and clear of the child elements are invalidated after the display is set to the ④ of the row-level element. But position is still in effect. Example Diagram display:inline-flex; Display as row-level elements display:flex; Display as block-level element wrap 3, related properties that act on the container: The ①flex-direction property determines the direction of the spindle (that is, the direction in which the item is arranged). row (default): The spindle is horizontal, starting at the left side Row-reverse: The spindle is horizontal, starting at the right end &NBS P Column: The spindle is in the vertical direction and the starting point is on the top edge. Column-reverse: The spindle is in the vertical direction, starting at the bottom edge. Example Diagram ②flex-wrap property definition, how to wrap a line if one of the axes does not fit. nowrap (default): No Line break. When the container is not wide enough, the width of each item is squeezed wrap: Wrap, and theOne line at the top of the container wrap-reverse; Line breaks, the first line is below. The Flex-flow property is a shorthand for the Flex-direction property and Flex-wrap property, and the default value is row nowrap. Code example diagram The ③justify-content property defines how the item is aligned on the spindle. "Note" This property is closely related to the spindle direction. Spindle direction: Row-starting point on the left; Row-reverse-beginning on the right; column-beginning on top; Column-reverse-Beginning in the bottom. flex-start (default): The project is at the start of the spindle Flex-end: The project is at the end of the spindle & nbsp center: Center Space-between: Justified, the intervals between items are equal. (There is no interval between the beginning and the last item, with the edge of the parent container) "common" space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders. (Initial and final items, with a certain interval from the edge of the parent container) Example diagram justify-content:space-between; justify ④align-items property defines how the item is arranged on the intersection axis. Flex-start: The start of the intersection axis is aligned. Flex-end: The end alignment of the intersection axis. Center: Midpoint alignment of the crossover axis. &NBSp baseline: The baseline alignment of the first line of text for the item. (Text line height, font size affects the baseline of each line) stretch (default): If the item is not set to height or auto, it fills the height of the entire container. Can be understood by reference: The ⑤align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work. "note" When a project is swapped for multiple lines, you can use align-content instead of Align-items 。 Flex-start: Aligns with the start of the intersection axis. Flex-end: Aligns with the end of the intersection axis. Center: aligns with the midpoint of the crossover axis. Space-between: aligns with the intersection axis and evenly distributes the intervals between the axes. Space-around: The intervals are equal on each side of the axis. So the spacing between the axes is one times larger than the interval between the axes and the border. Stretch (default): The axis fills the entire cross axis. 4. For properties ①order:0; properties on the project, define the order in which the items are arranged. The smaller the value, the earlier the default is 0. The ②flex-grow property defines the magnification of the item, which defaults to 0, that is, if there is space left, do not zoom in. The ③flex-shrink property defines the scale of the project, which defaults to 1, that is, if there is not enough space, the item shrinks. ④flex-basis defines the spindle space occupied by the project (after setting, if the spindle is horizontal, the width of the set item is equal to the original width failure. ) ⑤flex property is Flex-grow, Flex-shShorthand for rink and flex-basis, the default value is 0 1 auto. The latter two properties are optional. This property has two shortcut settings: auto= (1 1 Auto) does not have enough space to squeeze, the space remaining will be enlarged and none = (0 0 Auto) space is not enough without squeezing, space remaining is not enlarged  ⑥A Lign-self defines how individual items are arranged on the cross axis, overwriting Align-items properties property values on the container: Same as Align-items, default auto, Represents the property value eg that inherits the parent container align-items.
#div { width:500px; height:500px; Background-color:yellow; Display:flex; Justify-content:space-between; Align-items:flex-start;} #div div{ width:100px; height:100px; line-height:100px; Text-align:center; Background-color:blue; Color:white; font-size:30px; }. div1{ font-size:100px; order:1; /* Swap order */ flex-grow:0; }. div3{ order:0; Flex-grow:2; flex-shrink:1; Align-self:flex-end; /* Align the ordinal 3 downwards */}
CSS3 new Features
