My second day of learning front-end at Lebyte-study notes: CSS3 comprehensive knowledge summary

Notes: CSS3 comprehensive knowledge summary

Structural framework: divided into six parts (attributes, selectors, grammar and rules, values, css units and appendices)

Part 1: Properties (positioning, layout, flexbox model, size, outer padding, inner padding, border, background, color, font, list, table, content, user interface, multiple columns, 2D transformation, transition, animation, printing, Media query, only IE, only Firefox, only webkit)

The second part: selector (element selector, relationship selector, attribute selector, pseudo-type selector, pseudo-object selector)

Part 3: Grammar and Rules (!Important, / comment /, @import, @charset, @media, #font-face, @page, @keyframes)

Part 4: Value (color, text, function, image, number, other)

Part 5: CSS units (length, angle, time, frequency, layout)

Part VI: Appendix (color keywords, media type, css condition hack, css attribute hack, css selector hack, cssbugs solution, css skills and experience, css other skills)

---

Part 1: Properties

Section 1: Positioning (position, z-index, top, right, bottom, left)

第二节：布局（display、float、clear、visibility、clip、overflow、overflow-x、overflow-y）

display: None hides the object. Unlike the hidden value of the visibility attribute, it does not reserve the physical space for the hidden object and
inlinespecifies the object as an inline element.
blockThe specified object is a block element.
list-itemThe specified object is a list item.
inline-blockThe specified object is an inline block element. (CSS2)
tableSpecify the object as a block element-level table. Similar to html tags <table>(CSS2),
inline-tablespecify the object as an inline element-level table. Similar to html tags <table>(CSS2)
table-captionspecify the object as the table title. Similar to html tags <caption>(CSS2)
table-cellspecify the object as a table cell. Similar to html tags <td>(CSS2)
table-rowspecify the object as a table row. Similar to html tags <tr>(CSS2),
table-row-groupspecify objects as table row groups. Similar to html tags <tbody>(CSS2)
table-columnspecify objects as table columns. Similar to html tags <col>(CSS2), the
table-column-groupspecified object is displayed as a table column group. Similar to html tags <colgroup>(CSS2),
table-header-groupspecify the object as the table title group. Similar to html tags <thead>(CSS2),
table-footer-groupspecify objects as table footnote groups. Similar to html tags <tfoot>(CSS2)
compactassigning objects to block objects or content-based inline objects (CSS3)
run-inassigning objects to block objects or content-based inline objects (CSS3)
rubydisplaying the objects as table footnote groups ( CSS3)
ruby-baseDisplay objects as table footnote groups (CSS3)
ruby-textDisplay objects as table footnote groups (CSS3) Display
ruby-base-groupobjects as table footnote groups (CSS3) Display
ruby-text-groupobjects as table footnote groups (CSS3) box Display
objects as flexible box models (CSS3)-webkit-box;-moz-box ;-o-box;-ms-box;inline-box displays the object as an inline block-level flexible box model (CSS3)

clip: rect(0 auto 35px 10px) does not cut the top edge, does not cut the right edge, and the bottom edge is clipped from the 35th pixel to the bottom, and the left edge is clipped 10

overflow:visible does not cut the content, and the content
hiddenthat exceeds the object size will be clipped, and the scroll bar will not appear.
scrollThe content that exceeds the object size is cropped, and the excess content is displayed in a scroll bar.
autoCut the content and add scroll bars when needed. This is the default value for the body object and textarea.

Section 3: Flexible box model (box-orient sub-element arrangement, box-pack sub-element alignment, box-align sub-element alignment, box-flex sub-elements how to allocate the remaining space of the remaining box, box-flex-group The group of the child element, the display order of the box-ordinal-group child elements, whether the order of the box-direction child elements is reversed, whether the box-lines child elements can be displayed in a new line) To make it effective, the parent element needs to be displayed as box or yes inline-box; pay attention to the browser

box-orient defines the direction arrangement of the elements inside the box
horizontal (from left to right on the horizontal line) vertical(from top to bottom on the vertical line)
inline-axis(horizontal arrangement), block-axis(vertical arrangement), inherit(inheriting the parent element)

---

box-pack:start sets the child elements of the flexbox model object to be aligned from the start position (mostly equivalent to left alignment)
centersets the child elements of the flexbox model object to be aligned in the center,
endsets the child elements of the flexbox model object to be aligned from the end position (large Part of the situation is equivalent to right alignment)
justifysetting or aligning the child elements of the flexbox model object

box-align: start sets
centerthe child elements of the flexbox model object to align from the starting position, sets the child elements of the flexbox model object to be aligned in the center,
endsets the child elements of the flexbox model object to align from the end position,
baselinesets the baseline alignment
stretchsettings of the child elements of the flexbox model object The child element of the flexbox model object adapts to the size of the parent element

---

box-flex:0 Let the child elements be divided according to the width of the parent element. Divide a container into 6 parts, the child object a is divided into 1 part, b is divided into 2 parts, and c is divided into 3 parts (dynamic allocation of remaining space)

---

box-flex-group:1 Dynamically allocate the actual space required for its content to the group with the larger number (if there is no content, paddin, border, it does not occupy space), and the remaining space is evenly allocated to the group with the smallest number (possibly There are 1 or more elements)

box-ordinal-group:1 Adjust the order of the three columns, the higher the number, the lower the lower the number is, the element with the lower value is displayed in front of the element with the higher value, the display order of the elements with the same value depends on their code order

box-direction: normal determines the arrangement order of internal elements
normal, reverse (flip), inherit Set the sub-elements of the flexbox model object to be arranged in normal order
reverseReverse the arrangement order of the sub-elements of the flexbox model object

box-lines: The child elements of the single flexbox model object are only displayed in one line.
multipleThe child elements of the flexbox model object are displayed in a new line when they exceed the space of the parent element.

第四节：尺寸（width、min-width、max-width、height、min-height、max-height）
第五节：外补白（margin、margin-top、margin-right、margin-bottom、margin-left）
第六节：内补白（padding、padding-top、padding-right、padding-bottom、padding-left）
第七节：边框（border、border-width、border-style、border-color、border-top、border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、border-image、border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow阴影、box-reflect倒影）

border-image：border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat
none: no background image.
<url>Specify the image using absolute or relative addresses.
<number>Specify the width with a floating point number. Negative values ​​are not allowed.
<percentage>Specify the width in percentage. Negative values ​​are not allowed.
<length>Specify the width with the length value. Negative values ​​are not allowed.
stretch: Specify a stretch method to fill the frame background image.
repeat: Specify to fill the border background image with tiling. When the picture hits the border, if it exceeds, it will be cut off.
round: Specifies to fill the frame background image with tiling. The picture will dynamically adjust the size of the picture according to the size of the frame until it can fill the entire frame.

border-image:url(skin/border.png) 27/27px;

---

box-shadow
none: The
<length>①first length value of no shadow is used to set the horizontal offset value of the shadow of the object. It can be a negative value and
<length>②the second length value is used to set the vertical offset value of the object's shadow. It can be a negative value.
<length>③If a third length value is provided, it is used to set the shadow blur value of the object. Negative values
<length>④are not allowed. If the fourth length value is provided, it is used to set the shadow extension value of the object. Negative values
<color>are not allowed to set the color of the shadow of the object.
inset: Set the shadow type of the object to inner shadow. When the value is empty, the shadow type of the object is outer shadow
box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);

---

box-reflect：none | <direction> | <offset> | <mask-box-image>`
`<direction> = above | below | left | right`
`<offset> = <length> | <percentage>`
`<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> |<repeating-radial-gradient>`
默认值：none无倒影
`box-reflect:below 0 linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

Section 8: Background (background, background-color, background-image, background-repeat, background-attachment background image is scrolling or fixed, background-position, background-origin, background-clip, background-size, multiple-background mixing Attributes )

background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景`
`background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景`
`background：linear-gradient（top，#000，#999）。从上到下、从黑色到灰色水平方向渐变`
`background：linear-gradient（left，#000，#999）。起始于左边、从黑色到灰色垂直方向渐变`
`background：linear-gradient（left，30deg，#000，#999）。起始于左边，倾斜30度、从黑色到灰色水平渐变`
`background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

第九节：颜色（color、opacity）
第十节：字体（font、font-style、font-weight、font-size、font-family、font-stretch）
第十一节：文本（text-indent、text-overflow、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke-width、text-stroke-color、letter-spacing、word-spacing、vertical-align、word-wrap、white-space、direction、unicode-bidi、line-height、tab-size）

text-overflow
clip: When the text in the object overflows, the omission mark (...) is not displayed, but the overflowed part is cut off.
ellipsis: Display ellipsis (...) when the text in the object overflows.

text-transform
none: no conversion
capitalize: convert the first letter of each word to
uppercase uppercase: convert to uppercase
lowercase: convert to lowercase
full-width:
full-size-kana:

white-space
normal: The default processing method.
pre: Display the pre-formatted text in a monospace font, without merging the blank distance between the text, and do not wrap the text when it exceeds the boundary. You can refer to the pre object
nowrap: Force to display all text in the same line until the end of the text or encounter the br object.
pre-wrap: Display pre-formatted text in a monospaced font, without merging the blank distance between the text, and wrap the text when it hits the border.
pre-line: Keep the line break of the text, do not keep the blank distance between the text, and the line break occurs when the text hits the boundary.

direction
ltr: The text flow is from left to right.
rtl: text flow from right to left

unicode-bidi
normal: The object does not open the additional embedding layer. For inline elements, implicit reordering works across object boundaries.
embed: The object opens an additional embedding layer, the value of the direction attribute specifies the embedding layer, and implicit reordering is performed inside the object.

bidi-override reorders
strictly according to the value of the direction attribute. Ignore the implicit two-way operation rules.
Used to display text read in from different directions in the same page. Use with the direction attribute
If you want to apply the direction attribute to the text of the inline element, you must set the unicode-bidi attribute to embed or bidi-override.

Section 12: List (list-style, list-style-image, list-style-position, list-style-type)

list-style-type
disc: solid circle (CSS1)
circle: hollow circle (CSS1)
square: solid square (CSS1)
decimal: Arabic numerals (CSS1)
lower-roman: lowercase Roman numerals (CSS1)
upper-roman: uppercase Roman numerals (CSS1)
lower-alpha: lowercase English letters (CSS1)
upper-alpha: uppercase English letters (CSS1)
none: no bullets (CSS1)
armenian: traditional Armenian numbers (CSS2)
cjk-ideographic: pale ideographic numbers (CSS2)
georgian: traditional George numbers (CSS2)
lower-greek: basic Greek lowercase letters (CSS2)
hebrew: traditional Hebrew numbers (CSS2)
hiragana: Japanese hiragana characters (CSS2) hiragana
-iroha: Japanese flat Kana serial number (CSS2)
katakana: Japanese katakana characters (CSS2)
katakana-iroha: Japanese katakana serial number (CSS2)
lower-latin: lowercase Latin letters (CSS2)
upper-latin: uppercase Latin letters (CSS2)

Section 13: Tables (table-layout, border-collapse, border-spacing, caption-side, empty-cells)
Section 14: Content (content, counter-increment, counter-reset, quotes)

content
normal: The default value. The performance is the same as the
none value. none: No value is generated.
<attr>Insert the tag attribute
value.attr p:after{content:attr(title);}
<url>Use the specified absolute or relative address to insert an external resource (image, audio, video or any other resource supported by the browser)
.url p:before{ content:url(…/…/skin/ico.png);}
<string>insert the string
counter(name): use the named counter.
counter1 li:before{content:counter(testname);}
counter(name,list-style -type): Use a named counter and follow the specified list-style-type attribute.
counter2 li:before{content:counter(testname2,lower-roman);}
counters(name,string): Use all named counters
.counter3 li{counter-increment:testname3;}
.counter3 li:before{content:counter(testname3,decimal)".";}
counters(name,string,list-style-type): use all named counters and Follow the specified list-style-type attribute
no-close-quote: Do not insert the quote attribute's post-mark. But increase its nesting level
.counter3 li li:before{content:counter(testname3,decimal)"."counter(testname4,decimal)".";}
no-open-quote: Do not insert the front mark of the quote attribute. But reduce its nesting level
close-quote: insert the back tag of the
quote attribute open-quote: insert the front tag of the quote attribute
counter-increment: none |[<identifier> <integer>]

第十五节：用户user interface（outline、outline-width、outline-style、outline-color、outline-offset、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom、box-sizing、resize、ime-mode）

outlineDefine the outline around the element, similar to border
outline-width: specify the width of the outline border.
outline-style: Specify the style of the outline border.
outline-color: Specify the color of the outline border.
outline:2px solid #f00;border:3px solid #333;

The outline-width
<length> uses the length value to define the thickness of the outline. Negative value
medium is not allowed : define the contour of the default width.
thin: Define a contour thinner than the default width.
thick: Defines an outline thicker than the default width.

outline-style
none: no outline. Independent of any specified outline-width value
dotted: dotted outline.
dashed: dashed outline.
solid: solid line contour
double: double line contour. The sum of the two single lines and their intervals is equal to the specified outline-width value
groove: 3D groove contour.
ridge: 3D convex groove profile.
inset: 3D concave edge contour.
outset: 3D convex edge contour.
outline-offset：4px；

cursor [<url> [<x> <y>] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

resize
none: Users are not allowed to resize the element.
both: The user can adjust the width and height of the element.
horizontal: the user can adjust the width of the element
vertical: the user can adjust the height of the element.
none: Users are not allowed to adjust the size of the element.
both: The user can adjust the width and height of the element.
horizontal: the user can adjust the width of the element
vertical: the user can adjust the height of the element.

第十六节：多栏multi-column（columns、column-width、column-count、column-gap、column-rule、column-rule-style、column-rule-color、column-span、column-fill、column-break-before、column-break-after、column-break-inside）

columns:200px 3;

columns:200px;

column-count:3;column-gap:40px;

Section 17: 2D transformation (transform, transform-origin)

translatemobile. Translate (X (distance from left position), Y (distance from top position)). The displacement takes the origin of the coordinate axis as the center, and the positive value moves to the lower right corner.
1 rotation. transfrom: rotate (10deg). How many degrees to rotate the plane
2 Oblique pull. skew(X,Y). How much to tilt
3 zoom. scale(X,Y). How many times to zoom in or out
4 moves. translate(X, Y)

transfrom：rotate（30deg）。
transfrom：scale（X，Y）。
transfrom：skew（X，Y）。
transfrom：translate（X，Y）。
1234

All 2D conversion methods are connected together matrix(). Rectangular transformation to matrix();
change the starting point position:transfrom-origin：bottom left

eg：transfrom：scale（1.5）。
对应的matrix是 transfrom：matrix（1.5，0，0，1.5，0，0）；

matrix（scaleX，0，0，scaleY，0，0）
1234

Delve into matrix

matrix() and matrix3d(), the former is a 2D plane movement transformation, 3 3. The latter is 3D transformation, 4 4.
transfrom: matrix (a, b, c, d, e, f)
corresponding to the matrix as shown in the figure below.

The first is multiplied by the first, the second is multiplied by the second, and the third is multiplied by the third

ax+cy+e is the horizontal coordinate. bx+dy+f is the vertical coordinate.

transfrom: matrix(1, 0, 0, 1, 30, 30) //a=1, b=0, c=0, d=1, e=30, f=30.
Suppose the center coordinates are (0, 0). The
x coordinates are ax+cy+e = 1 0 + 0 0 +30 = 30.
The y coordinate is bx+dy+f = 0 0 + 1 0 + 30 = 30.
The center coordinates are changed to (30, 30) and offset to the lower right corner, transfrom: translate (30px, 30px)
so the matrix only needs to care about the last two parameters to
zoom: transfrom: matrix(1, 0, 0, 1, 30 , 30) where 1 is the scaling parameter, so it is written as transfrom: matrix (scalex, 0, 0, scaley, 30, 30)

Section 18: Transition

transition-property: CSS property name of transition effect. none, all, indent
transition-duration: transition duration.
transition-timing-function: transition speed curve. Flat or slow first and then fast.
transition-delay: Transition delay.

Section 19: Animation (animation-timing-function)

animation-name：`动画名称。
`animation-delay：`动画延迟。
`animation-duration：`动画运动周期时长。
`animation-timing-function：`动画速度曲线。linear（速度一致）、ease（低速开始，然后加快，结束慢）、ease-in（低速开始）、ease-out（低速结束）、ease-in-out（低速开始和结束）、cubic-bezier（自己的值，从0到1）
`animation-iteration-count：`动画播放次数。0、infinite。
`animation-direction：`动画是否在下一个周期逆向播放。normal、alternate。
`animation-play-state：`动画是否正在运行或暂停。
`animation-fill-mode

简写：animation：name duration timing-function delay

@keyframes  animationName{
    from{ ...... }
    to{ ...... }
}
@keyframes animationName{
    0%{ ...... }
    50%{ ...... }
    100%{ ...... }
}