CSS3 knowledge summary: detailed explanation
1. Understanding CSS3
1. CSS3 Overview
CSS3 is an upgraded version of CSS2. It adds many powerful new features based on CSS2 to solve some practical problems.
CSS3 will develop in a modular way in the future: CSS current work & how to participate
The new features of CSS3 are as follows:
More practical selectors have been added , such as dynamic pseudo-class selector, target pseudo-class selector, pseudo-element selector, etc.
Added better visual effects , such as rounded corners, shadows, gradients, etc.
A variety of background effects have been added , such as support for multiple background images, and several background-related properties have been added.
A new layout scheme has been added - Flexible Box.
Added Web Fonts , which can display fonts that are not installed on the user's computer.
Enhanced colors , such as: HSL, HSLA, RGBA, several new color modes, and added opacity property to control transparency.
Added 2D and 3D transformations , such as rotation, distortion, scaling, displacement, etc.
Add animation and transition effects to make the effect changes more streamlined and smooth.
…
2. CSS3 private prefixes
2.1 What is a private prefix?
The -webkit- in the following code is a private prefix
2.2 Why do we need a private prefix?
Before a CSS feature proposed by the W3C standard is officially supported by a browser, the browser manufacturer will use a private prefix to test the CSS feature based on the browser's kernel. After the browser officially supports the CSS feature, the private prefix is no longer required.
For example:
Website to check CSS3 compatibility: Can I use... Support tables for HTML5, CSS3, etc
2.3 Common browser private prefixes
Chrome browser: - webkit -
Safari : - webkit -
Firefox : - moz -
Edge browser : - webkit -
Old Opera browsers: -o-
Old IE browsers: -ms-
Notice:
When we are coding, we don’t need to pay too much attention to browser private prefixes, we don’t need to rack our brains to remember them, and we don’t need to look up each one, because the commonly used new features of CSS3 are supported by mainstream browsers. Even if prefixes are added for old browsers, we can use modern build tools to help us add private prefixes.
2. Basic syntax of CSS3
1. CSS3 adds new length units
1. rem is a multiple of the root element font size and is only related to the root element font size.
2. vw is the percentage of the viewport width. 10vw is 10% of the viewport width.
3. vh is the percentage of the viewport height. 10vh is 10% of the viewport height.
4. vmax is the percentage of the viewport width (width, height, and height). (Just know it )
5. vmin is the percentage of the viewport width (small or medium ) . (Just understand it)
2. CSS3 adds new color setting methods
CSS3 adds three new color setting methods: rgba, hsl, and hsla. Since they have been explained in detail before, please refer to the CSS2 notes, so I will skip them here...
3. New selectors in CSS3
The new selectors added in CSS3 are: dynamic pseudo-class, target pseudo-class, language pseudo-class, UI pseudo-class, structural pseudo-class, negated pseudo-class, pseudo-element; these have been explained in detail in CSS2, so we will skip them here...
4. CSS3 adds box model related properties
4.1. Box-sizing weird box model
The box-sizing property can be used to set two types of box models:
Optional Values
meaning
content-box
Width and height set the size of the box content area. (Default value)
border-box
Width and height set the total size of the box. (Weird box model)
4.2. resize adjust the box size
Use the resize attribute to control whether the user is allowed to resize the element.
Optional Values
meaning
none
Do not allow the user to resize the element. (Default)
both
The user can adjust the width and height of the element.
horizontal
The user can adjust the width of the element.
vertical
The height of the element can be adjusted by the user.
4.3 . box-shadow
Use the box-shadow property to add a shadow to the box.
grammar:
The meaning of each value:
Optional Values
meaning
h-shadow
The horizontal shadow position is required and can be a negative value.
v-shadow
The vertical shadow position is required and can be a negative value.
blur
Optional, blur distance
spread
Optional, the shadow's extension value
color
Optional, the color of the shadow
inset
Optional, change outer shadow to inner shadow
Default value: box-shadow:none means no shadow
Example:
4.4 . Opacity
The opacity property can add a transparent effect to the entire element. The value is a decimal between 0 and 1, where 0 is completely transparent and 1 is completely opaque.
The difference between opacity and rgba:
opacity is a property that sets the opacity of the entire element (including the content within the element).
RGBA is a color setting method used to set the color. Its transparency is only used to adjust the transparency of the color.
5. CSS3 adds background properties
5.1. background-origin
Function: Set the origin of the background image.
grammar
1. padding-box: Display the background image starting from the padding area. —— Default value
2. border-box: Display the background image starting from the border area.
3. content-box: Display the background image starting from the content area.
5.2. background-clip
Function: Set the outward clipping area of the background image.
grammar
1. border-box: Clip the background from the border area outward. —— Default value
2. padding-box: Crop the background outward from the padding area.
3. content-box: Crop the background outward from the content area.
4. text: The background image is only displayed on the text.
Note: If the value is text , then backgroun-clip must be prefixed with -webkit- .
5.3. background-size
Function: Set the size of the background image.
grammar:
1. Use length value to specify the background image size. Negative value is not allowed.
2. Specify the background image size using percentages. Negative values are not allowed.
3. auto : The actual size of the background image. —— Default value
4. contain: Scale the background image proportionally so that its width or height is equal to that of the container, and then include the entire background image in the container. However, please note that this may cause some areas in the container to be without the background image.
5. cover: Scale the background image proportionally until it completely covers the container. The image will be displayed on the element as completely as possible, but be aware that the background image may not be displayed completely. - A relatively good choice
5.4. Backgorund composite attributes
grammar:
Notice:
1. If the values of origin and clip are the same, if only one value is written, both origin and clip are set; if both values are set, the first one is origin and the second one is clip.
2. The size value must be written after the position value and separated by /.
5.5. Multiple background images
CSS3 allows elements to set multiple background images
6. CSS3 adds border properties
6.1 Border Rounding
In CSS3, you can make a box have rounded corners using the border-radius property.
Set the roundness of all four corners at the same time:
Set the radius of each corner separately (almost never used):
Property name
effect
border-top-left-radius
Set the top left corner radius:
1. One value is the radius of the perfect circle,
2. The two values are the x radius and y radius of the ellipse.
border-top-right-radius
Set the upper right corner radius:
1. One value is the radius of the perfect circle,
2. The two values are the x radius and y radius of the ellipse.
border-bottom-right-radius
Set the bottom right corner radius:
1. One value is the radius of the perfect circle,
2. The two values are the x radius and y radius of the ellipse.
border-bottom-left-radius
Set the bottom left corner radius:
1. One value is the radius of the perfect circle,
2. The two values are the x radius and y radius of the ellipse.
Set the radius of each corner separately, comprehensive writing (almost not used):
6.2 Border Outline (Understanding)
outline-width : The width of the outline.
outline-color : The color of the outer outline.
outline-style: The style of the outline.
none : no outline
dotted: dotted outline
dashed ： dashed outline
solid: solid outline
double: double outline
outline-offset sets the distance between the outer outline and the border. Both positive and negative values can be set.
Note: outline-offset is not a sub-property of outline, but an independent property.
outline compound property
7. New Text Properties in CSS3
7.1 Text Shadow
In CSS3, we can add shadow to text using the text-shadow property.
grammar:
Optional Values
meaning
h-shadow
Required, horizontal shadow position. Negative values are allowed.
v-shadow
Required, vertical shadow position. Negative values are allowed.
blur
Optional, the blur distance.
color
Optional, the color of the shadow
Default value: text-shadow:none means no shadow.
7.2 Text Wrapping
In CSS3, we can use the white-space property to set the text wrapping method.
Common values are as follows:
Optional Values
meaning
normal
The text automatically wraps when it exceeds the boundary, and the line break in the text is recognized by the browser as a space. (Default value)
pre
Outputs the content as is, which has the same effect as the pre tag.
pre-wrap
Based on the pre effect, it automatically wraps when it exceeds the element boundary.
pre-line
Based on the pre effect, line breaks are automatically applied beyond the element boundary, and only line breaks in text are recognized, while spaces are ignored.
nowrap
Force no line break
7.3 Text Overflow
In CSS3, we can use the text-overflow property to set the rendering mode when the text content overflows.
Common values are as follows:
Optional Values
meaning
clip
When inline content overflows, the overflow is cut off. (Default value)
ellipsis
When inline content overflows the block container, replace the overflowed portion with ...
Note: For the text-overflow property to take effect, the block container must explicitly define overflow as a non- visible value and white-space as a nowrap value.
7.4 Text decoration
CSS3 upgrades the text-decoration property and makes it a composite property.
Sub-properties and their meanings:
text-decoration-line sets the position of the text decoration line
none: Specifies that the text has no decoration (default value)
underline: Specifies that the text decoration is underlined
overline: Specifies that the text decoration is an overline
line-through: Specifies that the text decoration is a through line
text-decoration-style The shape of the text decoration line
solid ： solid line (default)
double: double line
dotted: dotted lines
dashed ： dashed line
wavy ： wavy lines
text-decoration-color The color of the text decoration line
7.5 Text Stroke
Note: The text stroke feature is only supported by webkit-based browsers.
-webkit-text-stroke-width: Set the width of the text stroke and write the length value.
-webkit-text-stroke-color: Set the color of the text stroke and write the color value.
-webkit-text-stroke: A composite property that sets the text stroke width and color.
8. CSS3 adds gradients
8.1 Linear Gradient
The gradient between multiple colors is from top to bottom by default .
Use keywords to set the direction of the linear gradient .
Use an angle to set the direction of the linear gradient .
Adjusts where the gradient starts .
8.2 Radial Gradient
The gradient between multiple colors, by default, spreads out from the center of the circle. (Note: It is not necessarily a perfect circle, it depends on the aspect ratio of the container itself)
Use keywords to adjust the center position of the gradient circle.
Use pixel values to adjust the center position of the gradient circle.
Adjust the gradient shape to a perfect circle.
Adjust the radius of the shape.
Adjusts where the gradient starts.
8.3 Repeating Gradients
Whether it is a linear gradient or a radial gradient, continuing the gradient at a position where no gradient has occurred is called a repeated gradient.
Use repeating-linear-gradient to repeat linear gradient. The specific parameters are the same as linear-gradient.
Use repeating-radial-gradient to repeat radial gradient. The specific parameters are the same as radial-gradient.
We can use gradients to create many interesting effects: for example, lined paper, three-dimensional balls, etc.
9. Web fonts
9.1 Basic Usage
You can use @font-face to specify the specific address of the font, and the browser will automatically download the font, so you don’t have to rely on the font on the user’s computer.
Syntax (shorthand)
Syntax (high compatibility writing)
9.2 Custom Fonts
The Chinese font file is very large, and it is not realistic to use the complete font file. Usually, it is customized for a few words. You can use Alibaba Web font customization tool: https://www.iconfont.cn/webfont
9.3 Font Icons
Much clearer than the picture.
High flexibility, more convenient to change size, color, style, etc.
Good compatibility, IE can also support it.
The specific usage of font icons varies for each platform. It is best to refer to the platform's usage guide. In the video, we use the most commonly used Alibaba Icon Library as a demonstration.
Alibaba Icon official website address: https://www.iconfont.cn/
10. 2D Transformation
Prerequisite: The two-dimensional coordinate system is as shown below
10.1. 2D displacement
2D displacement can change the position of an element. The specific usage is as follows:
1. First add the transform attribute to the element
2. Write the specific value of transform. The optional values are as follows:
value
meaning
translateX
To set the horizontal displacement, you need to specify a length value; if you specify a percentage, it is a percentage of the reference width.
translateY
To set the vertical displacement, you need to specify a length value; if you specify a percentage, it is a percentage of the reference height.
translate
One value represents the horizontal direction, two values represent: horizontal and vertical directions.
3. Note:
1. Displacement is very similar to relative positioning. Neither of them deviates from the document flow and will not affect other elements.
2. The difference from relative positioning: the percentage value of relative positioning refers to its parent element; the percentage value of positioning refers to itself.
3. The browser is optimized for displacement, and compared with positioning, the browser is more efficient in processing displacement.
4. Transform can be written in chains, for example:
transform: translateX(30px) translateY(40px);
5. Displacement is not effective for inline elements.
6. Displacement and positioning can realize horizontal and vertical centering of elements
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
10.2. 2D Scaling
2D scaling means: making an element larger or smaller. The specific usage is as follows:
1. First add the transform attribute to the element
2. Write the specific value of transform. The optional values are as follows:
value
meaning
scaleX
Set the horizontal zoom ratio. The value is a number. 1 means no zoom, a value greater than 1 means zoom in, and a value less than 1 means zoom out.
scaleY
Set the vertical zoom ratio. The value is a number. 1 means no zoom, a value greater than 1 means zoom in, and a value less than 1 means zoom out.
scale
Set the horizontal and vertical scaling ratios at the same time. One value means setting both horizontal and vertical scaling. Two values mean: horizontal scaling and vertical scaling respectively.
3. Note:
1. The scale value supports negative numbers, but it is rarely used because it can easily cause misunderstanding.
2. With the help of zoom, text smaller than 12px can be achieved.
10.3. 2D Rotation
2D rotation means: rotating an element clockwise or counterclockwise in a two-dimensional plane. The specific usage is as follows:
1. First add the transform attribute to the element
2. Write the specific value of transform. The optional values are as follows:
value
meaning
rotate
To set the rotation angle, you need to specify an angle value (deg). Positive values are clockwise and negative values are counterclockwise.
Note: rotateZ(20deg) is equivalent to rotate(20deg) . Of course, when it comes to 3D transformation, you can also write: rotate(x,x,x)
10.4. 2D Warp (Understanding)
2D distortion means that the elements are "pulled" in a two-dimensional plane, and then "deformed". It is almost not used in actual development, so you only need to understand it. The specific usage is as follows:
1. First add the transform attribute to the element
2. Write the specific value of transform. The optional values are as follows:
value
meaning
skewX
Set the element to be distorted in the horizontal direction. The value is an angle value, which will pull the upper left corner and lower right corner of the element.
skewY
Set the element to be distorted in the vertical direction. The value is an angle value, which will pull the upper left corner and lower right corner of the element.
skew
One value represents skewX, and the two values represent: skewX, skewY
10.5. Multiple Transformations
Multiple transformations can be written simultaneously using one transform.
transform: translate(-50%, -50%) rotate(45deg);
Note: When performing multiple transformations, it is recommended to rotate last.
10.6. Transformation Origin
When an element is transformed, the default origin is the center of the element. Use transform-origin to set the origin of the transformation.
Changing the transformation origin has no effect on translation, but does affect rotation and scaling.
If two values are provided, the first is used for the horizontal axis and the second for the vertical axis.
If only one is provided, if it is a pixel value, it represents the horizontal coordinate and the vertical coordinate takes 50%; if it is a keyword, the other coordinate takes 50%
1. transform-origin: 50% 50% , the transformation origin is at the center of the element, and the percentage is relative to the original
Default value
2. transform - origin: left top , the transformation origin is at the upper left corner of the element.
3. transform - origin: 50px 50px , the transformation origin is 50px 50px away from the upper left corner of the element .
4. transform-origin: 0 , when only one value is written, the second value defaults to 50% .
11. 3D Transformation
11.1. Open 3D space
Important principle: The first operation for an element to undergo 3D transformation: the parent element must have 3D space enabled!
Use transform-style to open 3D space. The optional values are as follows:
flat : Make the child element be located within the two-dimensional plane of this element ( 2D space) - default value
preserve-3d : Let the child elements be located within the three-dimensional space of this element ( 3D space)
11.2. Setting Depth of Field
What is depth of field? - It specifies the distance between the observer and the z=0 plane, which can make the elements undergoing 3D transformation have perspective effect and look more three-dimensional.
Use perspective to set the depth of field. The optional values are as follows:
none : No perspective is specified - (default value)
Length value : Specifies the distance from the observer to the z=0 plane. Negative values are not allowed.
Note: perspective is set to the parent element of the element that undergoes the 3D transformation !
11.3. Perspective point position
The so-called perspective point position is the observer's position; the default perspective point is at the center of the element.
Use perspective-origin to set the viewer position (the position of the perspective point), for example:
/* Shift the coordinate axis 400px to the right and 300px down (equivalent to a person squatting 300 pixels and then moving 400 pixels to the right to see the element) */
perspective-origin: 400px 300px;
Note: Normally, we do not need to adjust the perspective point position.
11.4. 3D Displacement
3D displacement is based on 2D displacement, which allows elements to be displaced along the z-axis. The specific usage is as follows:
1. First add the transform attribute to the element
2. Write the specific value of transform. The 3D related optional values are as follows:
value
meaning
translateZ
To set the z-axis displacement, you need to specify a length value. Positive values move outside the screen, negative values move inside the screen. You cannot enter a percentage.
translate3d
The first parameter corresponds to the x-axis, the second parameter corresponds to the y-axis, and the third parameter corresponds to the z-axis, and none of them can be omitted.
11.5. 3D Rotation
3D rotation is based on 2D rotation, which allows elements to rotate along the x-axis and y-axis. The specific usage is as follows:
1. First add the transform attribute to the element
2. Write the specific value of transform. The 3D related optional values are as follows:
value
meaning
rotateX
To set the x-axis rotation angle, you need to specify an angle value (deg) facing the positive direction of the x-axis: positive value is clockwise, negative value is counterclockwise.
rotateY
To set the y-axis rotation angle, you need to specify an angle value (deg) facing the positive direction of the y-axis: positive value is clockwise, negative value is counterclockwise.
rotate3d
The first three parameters represent the coordinate axes: x, y, z, and the fourth parameter represents the angle of rotation. The parameters cannot be omitted.
For example: transform: rotate3d(1,1,1,30deg) means: x, y, and z rotate 30 degrees respectively.
11.6. 3D Scaling
3D scaling is based on 2D scaling, which allows elements to scale along the z-axis. The specific usage is as follows:
1. First add the transform attribute to the element
2. Write the specific value of transform. The 3D related optional values are as follows:
value
meaning
scaleZ
Set the scaling ratio in the z-axis direction. The value is a number. 1 means no scaling, a value greater than 1 means scaling, and a value less than 1 means scaling.
scale3d
The first parameter corresponds to the x-axis, the second parameter corresponds to the y-axis, and the third parameter corresponds to the z-axis. Parameters cannot be omitted.
1.7. Multiple Transformations
Multiple transformations can be written simultaneously using one transform.
transform: translateZ(100px) scaleZ(3) rotateY(40deg);
Note: When performing multiple transformations, it is recommended to rotate last.
11.8. Back visibility
Use backface-visibility to specify whether the back of an element is visible when facing the user. Common values are as follows:
visible: Specifies that the back side of the element is visible, allowing the front side to be mirrored. - Default value
Hidden: The back side of the specified element is not visible
Note: backface-visibility needs to be added to the element itself that undergoes 3D transformation.
12. Transition
Transitions allow elements to smoothly transition from one style to another without using Flash animations or JavaScript .
12.1. Transition-property
Function: Define which attribute needs transition. Only the attributes defined in this attribute (such as width, height, color, etc.) will have transition effect.
Common values:
1. none: Do not transition any attributes.
2. all: Transition all attributes that can be transitioned.
3. A specific attribute name, for example: width, height. If there are multiple attributes, separate them with commas.
Not all attributes can be transitioned. Attributes whose values are numbers or can be converted to numbers support transition, otherwise they do not support transition.
Common attributes that support transitions include: color, length value, percentage, z-index , opacity , 2D transformation attributes, 3D transformation attributes, and shadows.
12.2. Transition-duration
Function: Set the duration of the transition, that is, how long it takes to transition from one state to another.
Common values:
1. 0: No transition time at all - the default value.
2. s or ms: seconds or milliseconds.
3. List:
If you want all properties to last for a certain period of time, write a value.
If you want each property to last for a different amount of time, then write a list of times.
12.3. transition-delay
Function: Specify the delay time for starting transition, unit: s or ms
12.4. transition-timing-function
Function: Set the transition type
Common values:
1. ease: smooth transition - default value
2. linear: linear transition
3. ease-in: slow → fast
4. ease-out: fast → slow
5. ease-in-out: slow → fast → slow
6. step-start : Equivalent to steps(1, start)
7. step-end: Equivalent to steps(1, end)
8. steps( integer,?) : A step function that accepts two parameters. The first parameter must be a positive integer, specifying the number of steps of the function. The second parameter can be start or end, specifying the time point at which the value of each step changes. The default value of the second parameter is end.
9. cubic-bezie ( number, number, number, number)： A specific Bezier curve type.
Create Bezier curves online: https://cubic-bezier.com
12.5. Transition composite properties
If one time is set, it indicates duration; if two times are set, the first is duration and the second is delay; there is no order requirement for other values.
transition:1s 1s linear all;
13. Animation
13.1. What is a frame?
An animation is a series of n frames played continuously over a period of time. We call each frame a "frame". When a number of frames are played quickly and continuously over a certain period of time, it becomes the animation seen by the human eye. The more frames played in the same period of time, the smoother the picture looks.
13.2. What is a keyframe?
Key frames refer to the 2-3 frames that play a decisive role among the frames that make up an animation.
13.3. Basic use of animation
Step 1: Define keyframes (define animation)
1. Simple way definition:
/*Writing method 1*/
@keyframes animation name {
from {
/*property1:value1*/
/*property2:value2*/
}
to {
/*property1:value1*/
}
}
2. Complete method definition:
@keyframes animation name {
0% {
/*property1:value1*/
}
20% {
/*property1:value1*/
}
40% {
/*property1:value1*/
}
60% {
/*property1:value1*/
}
80% {
/*property1:value1*/
}
100% {
/*property1:value1*/
}
}
Step 2: Apply animation to the element. The properties used are as follows:
1. animation-name: assign a specific animation (specific keyframes) to an element
2. animation-duration: Set the duration of the animation
3. animation-delay: Set animation delay
.box {
/* Specify animation */
animation-name: testKey;
/* Set the animation time */
animation-duration: 5s;
/* Set animation delay */
animation-delay: 0.5s;
}
4. Other properties of animation
animation-timing-function, set the type of animation, common values are as follows:
1. ease: smooth animation - default value
2. linear: linear transition
3. ease-in: slow → fast
4. ease-out: fast → slow
5. ease-in-out: slow → fast → slow
6. step-start : Equivalent to steps(1, start)
7. step-end: Equivalent to steps(1, end)
8. steps( integer,?) : A step function that accepts two parameters. The first parameter must be a positive integer, specifying the number of steps of the function. The second parameter can be start or end, specifying the time point at which the value of each step changes. The default value of the second parameter is end.
9. cubic-bezie ( number, number, number, number)： A specific Bezier curve type.
animation-iteration-count specifies the number of times the animation is played. Common values are as follows:
1. number: the number of animation loops
2. infinite: infinite loop
animation-direction, specifies the animation direction, common values are as follows:
1. normal: normal direction (default)
2. reverse: run in the opposite direction
3. alternate: The animation runs normally first, then runs in the opposite direction, and continues to run alternately
4. alternate-reverse: The animation runs in reverse and then in the forward direction, and continues to run alternately
animation-fill-mode , set the state other than animation
1. forwards: Set the object state to the state at the end of the animation
2. backwards: Set the object state to the state when the animation starts
animation-play-state, sets the animation play state, common values are as follows:
1. running: exercise (default)
2. paused: paused
5. Animation composite properties
Only one time is set to represent duration, and two times are set: duration and delay. There is no quantity or order requirement for other attributes.
.inner {
animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
}
Note: animation-play-state is generally used alone.
14. Multi-column layout
Purpose: Specially designed to achieve a newspaper-like layout.
Common properties are as follows:
column-count: specifies the number of columns, the value is a number.
column-width: specifies the column width, the value is the length.
columns: Specifies both column width and number of columns at the same time, a composite attribute; there are no requirements for the number or order of values.
column-gap: Set the column margin, the value is the length.
column-rule-style: Sets the style of the borders between columns. The value is consistent with border-style.
column-rule-width: Sets the width of the border between columns. The value is the length.
column-rule-color: Sets the color of the border between columns.
coumn-rule: Set column borders, composite attributes.
column-span specifies whether to span columns; values: none, all.
15. Telescopic Box Model
1. Introduction to the Telescopic Box Model
In 2009, W3C proposed a new box model - Flexible Box (flexible box model, also known as: elastic box).
It can easily control: element distribution, element alignment, element visual order...
As of now, except for some IE browsers, all other browsers support it.
The emergence of the telescopic box model gradually evolved into a new layout solution - flex layout.
Tips:
1. Traditional layout refers to: based on the traditional box model, mainly relying on: display attribute + position attribute + float attribute.
2. Flex layout is currently widely used on mobile devices because traditional layout cannot be well presented on mobile devices.
2. Flex Container, Flex Item
Flex Container : An element with flex turned on is a flex container.
1. Set display:flex or display:inline-flex to an element , and the element becomes a flex container.
2. display:inline-flex is rarely used because the parent container of multiple flex containers can also be set as a flex container.
3. An element can be both a flex container and a flex item.
Flex items : All child elements of a flex container automatically become flex items.
1. Only the child elements of the flex container become flex items. The descendants such as grandchildren and great-grandchildren are not flex items.
2. No matter what kind of element it is originally (block, inline-block, inline), once it becomes a flex item, it will all become "blocked".
3. Main axis and side axis
Main axis: Flex items are arranged along the main axis. The main axis is horizontal by default, and the default direction is: from left to right (the left side is the starting point and the right side is the end point).
Side axis: The side axis is perpendicular to the main axis. The side axis is vertical by default, and the default direction is from top to bottom (the top is the starting point and the bottom is the end point).
4. Spindle direction
Property name: flex-direction
Common values are as follows:
1. row: The main axis direction is horizontal from left to right - default value
2. row-reverse: The main axis direction is horizontally from right to left.
3. Column: The main axis direction is vertical from top to bottom.
4. column-reverse: the main axis direction is vertical from bottom to top.
Note: If the direction of the main axis is changed, the direction of the side axis will also change.
5. Spindle line feed mode
Property name: flex-wrap
Common values are as follows:
1. nowrap : Default value, no line break.
2. wrap: Automatically wrap lines if the flex container is not large enough.
3. wrap-reverse: reverse line wrapping.
6. Flex-flow
flex-flow is a compound property that combines flex-direction and flex-wrap. There is no order requirement for the values.
flex-flow: row wrap;
7. Main axis alignment
Property name: justify-content
Common values are as follows:
1. flex-start: Align the main axis starting point. —— Default value
2. flex-end: Align the main axis end point.
3. center: center alignment
4. space-between: evenly distributed, aligned at both ends (most commonly used).
5. space-around: Evenly distributed, the distance between the two ends is half of the distance in the middle.
6. space-evenly: evenly distributed, with the distance between the two ends consistent with the distance in the middle.
8. Side Axis Alignment
8.1 One row
Required property: align-items
Common values are as follows:
1. flex-start: Align the starting point of the cross axis.
2. flex-end: Align the end point of the cross axis.
3. center: Align the midpoint of the side axis.
4. baseline: The baseline alignment of the first line of text in the flex item.
5. stretch: If the height of the flex item is not set, it will occupy the entire height of the container. —— (default value)
8.2 Multiple Lines
Required property: align-content
Common values are as follows:
1. flex-start: Aligned with the start point of the cross axis.
2. flex-end: Align with the end point of the cross axis.
3. center: Align with the midpoint of the side axis.
4. space-between: Align with both ends of the side axis and evenly distribute in the middle.
5. space-around: The distance between flex items is equal and twice as large as the distance from the edge.
6. space-evenly: completely divided on the lateral axis.
7. stretch: fill the entire side axis. —— default value
9.Flex achieves horizontal and vertical centering
Method 1: Enable flex layout in the parent container, and then use justify-content and align-items to achieve horizontal and vertical centering
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
}
Method 2: Enable flex layout for the parent container, and then set margin: auto for the child element
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
}
10. Scalability
1. Flex-basis
Concept: flex-basis sets the base length in the main axis direction , which will make the width or height invalid.
Note: Transverse axis: Width failure; longitudinal axis: Height failure
Effect: The browser calculates whether there is extra space on the main axis based on the value set for this property. The default value is auto, which means the width or height of the telescopic item.
2. flex- grow
Concept: flex-grow defines the magnification ratio of the flex item, the default is 0, that is, even if there is remaining space on the main axis, it will not stretch (enlarge).
rule:
1. If the flex-grow value of all flex items is 1, then: they will divide the remaining space equally (if there is space).
2. If the flex-grow values of the three flex items are 1, 2, and 3, then they will share 1/6, 2/6, and 3/6 of the space respectively.
3. flex- shrink
Concept: flex-shrink defines the compression ratio of the item, the default value is 1, that is, if there is not enough space, the item will be reduced.
The calculation of shrinking items is a little more complicated. Let's take a scenario as an example:
For example:
Three shrink items, with widths of 200px , 300px , and 200px , respectively. Their flex - shrink values are
For: 1 , 2 , 3
If you want to fit three items, the total width needs to be 700px , but the current container is only 400px , which is 300px short.
Therefore, everyone needs to shrink before they can put it down. The specific shrinkage value is calculated as follows:
1. Calculate the denominator: (200×1) + (300×2) + (200×3) = 1400
2. Calculate the ratio:
Project 1: (200×1) / 1400 = ratio value 1
Project 2: (300×2) / 1400 = ratio 2
Project 3: (200×3) / 1400 = ratio value 3
3. Calculate the final shrinkage size:
Item 1 needs to be shrunk: Scale value 1 × 300
Item 2 needs to be shrunk: Scale value 2 × 300
Item 3 needs to be shrunk: scale value 3 × 300
11. Flex composite properties
flex is a compound property, which is composed of three properties: flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto.
If you write flex:1 1 auto, you can shorten it to: flex:auto
If you write flex:1 1 0, you can shorten it to: flex:1
If you write flex:0 0 auto, you can shorten it to: flex:none
If you write flex:0 1 auto, it can be shortened to: flex:0 auto - which is the initial value of flex.
12. Project Sorting
The order attribute defines the order in which the items are sorted. The smaller the value, the higher the order. The default value is 0.
13. Single alignment
The align-self property allows you to adjust the alignment of a flex item individually.
The default value is auto, which means inheriting the align-items property of the parent element.
16. Responsive Layout
Media Inquiries
1.1 Media Type
For a complete list, see: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
1.2 Media Characteristics
For a complete list, see: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
1.3 Operators
1.4 Commonly used thresholds
In actual development, the screen is divided into several sections, for example:
1.5 Usage in combination with external styles
Usage 1 :
<link rel="stylesheet" media="Specific media query" href="mystylesheet.css">
Usage 2:
@media screen and (max-width:768px) {
/*CSS-Code;*/
}
@media screen and (min-width:768px) and (max-width:1200px) {
/*CSS-Code;*/
}
17. BFC
1. What is BFC
W3C defines BFC as follows:
Original text: Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
: Floating, absolutely positioned elements, block containers that are not block boxes (such as inline-blocks , table-cells , and table-captions ), and block boxes with an overflow property value other than visible will establish a new block formatting context for their content.
MDN's description of BFC:
The Block Formatting Context (BFC) is the part of the visual CSS rendering of a web page. It is the area where the layout process of block boxes occurs and where floated elements interact with other elements.
A more general description:
1. BFC stands for Block Formatting Context , which can be understood as a "special function" of an element .
2. This "special function" is turned off by default; when the element meets certain conditions, the "special function" is activated.
3. The so-called activation of "special functions" means in professional terms that: the element creates a BFC (also known as: turning on the BFC ).
2. What problems can be solved by turning on BFC?
1. After an element opens BFC, its child elements will no longer have margin collapse issues.
2. After an element opens BFC, it will not be covered by other floating elements.
3. After an element opens BFC, even if its child elements float, the element's own height will not collapse.
3. How to enable BFC
Root element
Floating Elements
Absolutely positioned and fixed positioned elements
Inline-block elements
Table cells: table , thead , tbody , tfoot , th , td , tr , caption
Block elements whose overflow value is not visible
Flex Project
Multi-column container
Elements with a column-span of all (even if the element is not wrapped in a multi-column container)
The value of display is set to flow-root
Comments
Post a Comment