CSS (Layout, animation, Adaptation)

Introduce the standard CSS box model

1. Standard box model: Width = content + border + padding + marginCopy the code

2. Low version IE box model: Width = content width (+border+padding) + marginCopy the code

How do I center div

1, use the margin attribute 'margin:50px auto; Parent: 'display:flex:' child: 'justify-content: center; '4, use the transform attribute child to locate' top:50%; left:50; transform: translate(-50%,-50%); `Copy the code

What’s new with CSS3?

(1) RGBA and transparency
RGBA(R,G,B,A) Values: R: red. The percentage of positive integer | G: green values. The percentage of positive integer | B: blue value. The percentage of positive integer | A: Alpha transparency. The value ranges from 0 to 1.Copy the code
(2) the background image
Property to set the background image for the element. Depending on the value of the background-repeat attribute, the image can be tiled indefinitely, along an axis (x or y), or not tiled at all.Copy the code
(3) background – origin
Grammar: The 'background-origin(content-box/padding-box/border-box)' attribute specifies the position relative to which the background-position attribute should be located. If the background-attachment attribute of the background image is "fixed", this attribute has no effect.Copy the code
(4) background – size
Sets the size of the background image syntax: ` background - size: length | percentage with | cover | contain; 'length sets the height and width of the background image. The first value sets the width, and the second value sets the height. If only one value is set, the second value is set to" auto" percentage to set the width and height of the background image by the percentage of the parent element. The first value sets the width, and the second value sets the height. If only one value is set, the second value is set to" auto". Cover expands the background image to a size large enough to completely cover the background area. Some parts of the background image may not be displayed in the background location area. Contain Enlarges an image to its maximum size so that its width and height fully fit the content area.Copy the code
Background – repeat (5)
Property defines the tile mode of the image. Repeat defaults the background image to be repeated vertically and horizontally. The repeat-x background image will repeat horizontally. The repeat-y background image will repeat in the vertical direction. The no-repeat background image will be displayed only once. Inherit specifies that the background-repeat property Settings should be inherited from the parent element.Copy the code
(6) word – wrap
For an integral long word wrap syntax: ` word - wrap: normal | break - word; 'normal' only allows line breaks at hyphenation points (browsers keep default processing). Break -word breaks lines inside long words or URLS.Copy the code
(7) the text – shadow
Syntax: 'text-shadow: h-shadow v-shadow blur color; 'H-shadow required. Position of horizontal shadows. Negative values are allowed. V - shadow required. Position of vertical shadows. Negative values are allowed. The blur is optional. Fuzzy distance. Color optional. Shadow color.Copy the code
(8) the font – face
Use your own font to embed your own Web fonts in your Web pages, such as the Logo, Tags, and handwriting on the page: '@font-face {font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; YourWebFontName: This value refers to your custom font name, preferably using the default font you downloaded, which will be referenced in your Web element font-family. Such as "the font-family:" YourWebFontName ";" 2, source: this value refers to the path of your custom font, can be relative path or absolute path; 3, the format: this refers to your custom font format, mainly used for helping the browser identification, its value is mainly has the following several types: truetype, opentype, truetype - the aat, embedded opentype, avg, etc.Copy the code
(9) border – the radius
Allowed to add rounded corners to elements border grammar: ` border - the radius: 1-4 length | % / 1-4 length | %; 'Defines the shape of rounded corners as a percentage. Around 50% you will get a circleCopy the code
(10) border-image
'border-image:url(border-.png) 30 30 round; 'source specifies the path of the image used in the border. Slice Image borders are offset inward. Width Width of the image border. Outset The amount of frame outside the frame in the image area. Whether the border of the repeat image should be repeated, rounded or stretched.Copy the code
(11) box – shadow
Box shadow syntax: 'box-shadow: 10px 10px 5px #888888; 'H-shadow required. Position of horizontal shadows. Allow negative v-shadow values required. Position of vertical shadows. Allow negative blur optional. Fuzzy distance spread is optional. Shadow size color is optional. Shadow color. An inset (CSS | rgba | English) optional. Change the inner shadow from the outer shadow (at the beginning)Copy the code