编程知识 cdmana.com

Detailed introduction to new features of CSS3

The content of the article is constantly updated ~

List of articles

 

One 、CSS3 Round the corners - border-radius

When a value is given, the four corners are rounded by default .
 Insert picture description here

If four values are given, fillet processing will be carried out according to the order marked by the author .
 Insert picture description here

When setting two values, the first value corresponds to 1 and 3, The second value corresponds to 2 and 4. When setting three values, the first value corresponds to 1, The second value corresponds to 2 and 4, The third value corresponds to 3.

This value can also be given in percentages and other units , Not limited to px. For example, we want to draw a circle , That's too easy . Insert picture description here

Two 、 Box shadow - box-shadow

Share my understanding of box shadow , It's all our block level elements 、 Inline block element 【 Width and height can be set 】, Underneath them is actually another box that we can't see 【 I like to think of it as a shadow 】. then box-shadow This property is used to manipulate the style of the shadow !

The parameters of box shadow are as follows :

Parameters describe Wu Di's own understanding
h-shadow Essential , The position of the horizontal shadow , It can be negative Control the shadow x Axis position
v-shadow Essential , The position of the vertical shadow , It can be negative Control the shadow y Axis position
blur Optional , A fuzzy distance Control the blur of the shadow
spread Optional , Shadow size Controls the size of the shadow border
color Optional , Shadow color Control the color of shadows
inset Optional , From the outer shadow ( At the beginning of the ) Change the shadow inside the shadow Control whether the shadow is inside or outside

Syntax when using :

box-shadow: h-shadow v-shadow blur spread color inset;

A simple example :

explain : If h-shadow And v-shadow It's a positive value , That's right and down , If it's negative, it's translation to the left and up . Insert picture description here

If you join inset If it's worth it h-shadow And v-shadow Just a little change ,【 Wu Xiaodi personally understands : Joined the inset The value of the shadow box is then z-index The value is raised to infinity , So it will take precedence over our own box display , But we are limited by our own box , The excess is not displayed .】 We can give two examples :
 Insert picture description here
 Insert picture description here

Card effect :
https://www.runoob.com/try/try.php?filename=trycss3_box-shadow4
https://www.runoob.com/try/try.php?filename=trycss3_box-shadow5

Other values can be tested by yourself , Personally, I think it seems very straightforward according to my personal understanding . You just need to change the shadow style according to your needs .

3、 ... and 、 Text shadow - text-shadow

Text shadows are easier to learn than box shadows , But no box shadow is strong , Because his controllable shadow has fewer attributes .

text-shadow Property can accept a comma separated list of shadow effects , And apply it to the text of the element . Shadow effects are applied sequentially , Therefore, it is possible for them to cover each other , But they never overwrite the text itself . The shadow effect does not change the size of the box , But it may extend beyond its boundaries . The stacking level of shadow effect is the same as that of the element itself .

The parameters of text shadow are as follows :

Parameters describe Wu Di's own understanding
h-shadow Essential , The position of the horizontal shadow , It can be negative Control the shadow x Axis position
v-shadow Essential , The position of the vertical shadow , It can be negative Control the shadow y Axis position
blur Optional , A fuzzy distance Control the blur of the shadow
color Optional , Shadow color Control the color of shadows

It is the same as the box shadow understood by the author above , Please test the effect by yourself . What needs extra attention is IE 9 And earlier browsers do not support text-shadow attribute .

With the help of the list mechanism of shadow effect, we can superimpose a burning text effect :

 Insert picture description here

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            background: #000;
            text-align: center;
            font-weight: bold;
            font-size: 60px;
            font-family: arial, sans-serif;
            color: brown;
            text-shadow: 0 0 4px white,
            0 -5px 4px #ff3,
            2px -10px 6px #fd3,
            -2px -15px 11px #f80,
            2px -25px 18px #f20;
            height: 140px;
            line-height: 140px;
        }
    </style>
</head>
<body>
    <header> Wu Xiaodi </header>
</body>
</html>

more text-shadow Special effects please watch :text-shadow Good looking effect display and explanation

Four 、 The gradient - gradient

linear-gradient() Linear gradient

The parameters of the linear gradient function are as follows :

Parameters describe It may be worth
direction Use the angle value to specify the direction of the gradient ( Or the angle )【 The default is top-down 】 to left、to right、to top 、to bottom、to The combination of left and right and up and down 【 Anyone can put it in the front 】、 angle 【deg】
color-stop1, color-stop2,… Used to specify the start and end colors of gradients Color

grammar :

background-image: linear-gradient(direction, color-stop1, color-stop2,...);

A simple example :

Default direction : Insert picture description here

Set the direction : Insert picture description here

Set the angle : Insert picture description here
From the above small example, we know , When we set the angle, the starting point is always from top to bottom . When a positive value is given, it rotates clockwise , When a negative value is given, it rotates counterclockwise .

radial-gradient() Radial Gradient

The parameters of the radial gradient function are as follows :

Parameters describe It may be worth
shape Determine the shape of the circle ellipse【 Default 】: Specifies the radial gradient of the ellipse ;circle: Specify the radial gradient of the circle ;
size Define the size of the gradient

1. farthest-corner【 Default 】: Specifies that the radial radius length is from the center of the circle to the angle farthest from the center of the circle ;
2.closest-side: Specifies that the radius length of the radial gradient is from the center of the circle to the edge closest to the center of the circle ;
3.closest-corner: Specifies that the radius length of the radial gradient is from the center of the circle to the angle closest to the center of the circle ;
4.farthest-side: Specifies that the radius length of the radial gradient is from the center to the edge farthest from the center ;

position Define the position of the gradient

1.center【 Default 】: Set the ordinate value of radial gradient center in the middle .
2.top: Set the ordinate value of the radial gradient center at the top .
3.bottom: Set the bottom as the ordinate value of the radial gradient Center .

start-color, …, last-color Used to specify the start and end colors of gradients Color

Please experiment for specific use , You can go to the rookie tutorial and follow the tutorial again :https://www.runoob.com/c***ef/func-radial-gradient.html

5、 ... and 、 change - transform

translate - Definition 2D transformation

translate3d - Definition 3D transformation

translateX - transformation X Axis

translateY - transformation Y Axis

translateZ - Definition 3D transformation , transformation Z Axis

scale - Definition 2D The zoom

scale3d - Definition 3D The zoom

scaleX - By setting X Axis to define the scale

scaleY - By setting Y Axis to define the scale

scaleZ - By setting Z The value of the axis 3D The zoom

rotate - Definition 2D rotate

rotate3d - Definition 3D rotate

rotateX - Define along X The shaft 3D rotate

rotateY - Define along Y The shaft 3D rotate

rotateZ - Define along Z The shaft 3D rotate

skew - Define along X and Y The shaft 2D tilt

skewX - Define along X The shaft 2D tilt

skewY - Define along Y The shaft 2D tilt

perspective - by 3D The transformation element defines a transparent view

matrix - Definition 2D transformation , Use a matrix of six values

matrix3d - Definition 3D transformation , Use 16 Of values 4*4 matrix

About transform See the full effect of :https://c.runoob.com/codedemo/3391.
I will definitely talk about the role of each attribute carefully later .

6、 ... and 、 Added more css Pseudo class selector

:not Selectors

He has a very interesting folk name : Not confident . Who's behind him , Then all other elements except him will apply styles .

give an example :
 Insert picture description here

:empty Selectors

Select each element without any children ( Include text nodes ).

Be careful : Even spaces are text nodes

Example :
 Insert picture description here

:root Selectors

Match the root element of the document .
stay HTML The middle root element is always HTML Elements .

:target Selectors

# The name of the anchor is linked to an element in a file URL. The element is linked to the target element .
:target Selectors can be used for the currently active target Style of element .

Example :
 Insert picture description here

:selection Selectors

::selection The selector matches the part of the element that is selected or highlighted by the user .

Be careful :
::selection It can only be applied to a few CSS attribute :color, background, cursor, and outline.

Example :
 Insert picture description here

Use selection After changing the style :
 Insert picture description here

The following description of the selector has a word called “ A group of ”. It means all elements and text nodes under the same parent element , That is, a group of .

:nth-of-type(n)

:nth-of-type(n) The selector matches the... Of the same type n Sibling elements .

explain :
n It could be a number , A keyword , Or a formula .
For detailed description of parameters, please click : Selector parameters are described in detail

Example :

/*  Specify each p Element matches the... Of the same type 2 The background color of sibling elements : */
p:nth-of-type(2) {
	background:#ff0000;
}

:nth-last-of-type(n)

:nth-last-of-type(n) The selector matches the penultimate of the same type n Sibling elements .

explain :
n It could be a number , A keyword , Or a formula .
For detailed description of parameters, please click : Selector parameters are described in detail

Example :

/*  Specify each p The element matches the last... Of the same type 2 Sibling background color : */
p:nth-last-of-type(2) {
	background:#ff0000;
}

:first-of-type

:first-of-type A selector matches an element whose parent is the first child element of a particular type .

Little knowledge :
first-of-type And nth-of-type(1) It means the same thing

Example :

/*  The first of a set of sibling elements p Elements  */
p:first-of-type {}

:last-of-type

:last-of-type The selector matches the element whose parent is the last child element of a particular type .

Little knowledge :
last-of-type And nth-last-of-type(1) It means the same thing

Example :

/*  The last of a set of sibling elements p Elements  */
p:last-of-type {}

:only-of-type

:only-of-type Represents any element , This element has no other siblings of the same type .

Example :

/*  The only one in a set of sibling elements p Elements  */
p:only-of-type {}

:only-child

Match elements that belong to the only child element in the parent element .

Example :

/*  Select the element that belongs to its parent 
 The only child element is p Yuan 
 Primeval p Elements 【 Style is applied 
 To p On the element 】 */
p:only-child {}

:nth-child()

:nth-child(n) The selector matches the... In the parent element n Sub elements , There are no restrictions on element types .

explain :
n It could be a number , A keyword , Or a formula .
For detailed description of parameters, please click : Selector parameters are described in detail

Example :

/*  Select each of the second child elements that belongs to its parent element p Elements  */
p:nth-child(2) {}

:nth-last-child()

:nth-last-child(n) Selector matching belongs to the N Each element of a child element , Regardless of the type of element , Count from last child .

explain :
n It could be a number , A keyword , Or a formula .
For detailed description of parameters, please click : Selector parameters are described in detail

Example :

/*  Select each element that belongs to the penultimate child of its parent element p Elements  */
p:nth-last-child(2)

:enabled、:disabled

disabled Controls the style of disabled elements .
enabled Controls the style of the active element .

Example :
 Insert picture description here

:checked

Match each selected input element ( Only for radio buttons or check boxes ).
Example :
 Insert picture description here

Selector parameters are described in detail :

Numbers :1,2,3,4,5,… …
keyword :odd,even. 【odd It's singular ,even It's an even number 】
The formula :(an+ b),(an-b).【a Represents the size of a cycle ,N It's a counter ( from 0 Start ), as well as b It's the offset .】
Examples of formulas :
 Insert picture description here

7、 ... and 、 Newly added CSS3 Selectors

element1~element2 Selectors

element1~element2 Selector matching occurs in element1 hinder element2.

Be careful :
element1 and element2 Both elements must have the same parent element , but element2 You don't have to follow element1 Behind .

Example :
 Insert picture description here

[attribute*=value] Selectors

[attribute*=value] The selector matches the element whose attribute value contains the specified value .

Example :
 Insert picture description here

[attribute^=value] Selectors

[attribute^=value] The selector matches the element whose attribute value starts with the specified value .

Example :
 Insert picture description here

[attribute$=value] Selectors

[attribute$=value] The selector matches the element whose attribute value ends with the specified value .

Example :
 Insert picture description here

8、 ... and 、 Multi background 、rgba、hsl

1. Multi background and background properties

CSS3 Contains several new background properties , Provides greater control of background elements .

attribute effect
background-image Add background image , You can put more than one , Separated by commas
background-size Controls the size of the background image
background-origin Specifies the location area of the background image
background-clip Specifies where the background drawing starts

Small example :

Set multi background :
We can see , When we set up two background images, we can separate them with commas . When we want to control their other properties, we also separate them with commas in order , If you want both backgrounds repeat, Then just write one , The second... Can be omitted . Insert picture description here
If you want to background The syntax of the attribute is as follows :

#example1 {
   background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Controls the size of the background image :
This is very simple , The author will not make an example , Just a brief introduction to .
We can set the size of the background image to a fixed width and height , You can also give a percentage . You can also set some possible values .
The syntax for setting the fixed width, height and percent is as follows :

background-size:width height;

Other possible values :
 Insert picture description here

Set the location area of the background image :
When learning how to set the location area of the background image, you may need to know border、padding、content【content Namely width and height】.
 Insert picture description here
 Insert picture description here

Specify the starting drawing area of the background 【 The default is boder The area starts 】:
 Insert picture description here

2.rgba

rgba() Function uses red (R)、 green (G)、 blue (B)、 transparency (A) To create a variety of colors .

Little knowledge points :
opacity Transparent child elements will follow transparent ( Inherit ),rgba() Transparent child elements of do not inherit .

Parameter Introduction :

Parameters explain
Red (R) 0 To 255 The whole number between , Represents the red component of the color .
green (G) 0 To 255 The whole number between , Represents the green component of the color .
Blue (B) 0 To 255 The whole number between , Represents the blue component of the color .
transparency (A) Value 0~1 Between , On behalf of transparency .

Example :
 Insert picture description here

Nine 、border-image

border-image Property is a shorthand property used to set border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat Value .

Omit unwritten values and set them to their default values .

The default value is :
none 100% 1 0 stretch

grammar :

border-image: source slice width outset repeat|initial|inherit;

Parameter Introduction

Parameters explain Wu Xiaodi's vernacular translation Be careful
border-image-source Used to specify the position of the image where you want the user to draw the border The picture you want to set url If the value is "none", Or the image cannot be displayed , Border styles will be used .
border-image-slice The edge of the image is shifted inward Please read the article specially introduced by Wu Xiaodi :border-image-slice Introduce This property specifies the top , Right , Bottom , The image of the left edge is offset inward , Divided into nine areas : Four corners , Four sides and middle . The middle part of the image will be discarded ( Completely transparent processing ), Unless you fill in the keyword fill.
border-image-width The width of the image boundary This property controls , Right , Bottom , Left , The inward distance from both sides . ditto
border-image-outset Use to specify to draw outside the border border-image-area The amount of The distance of outward expansion ditto
border-image-repeat Used to set whether image boundaries should be repeated (repeat)、 The tensile (stretch) Or covered (round). How to fill the remaining positions with pictures  

border-image-width Possible values of :
 Insert picture description here
border-image-outset Possible values of :
 Insert picture description here
border-image-repeat Possible values of :
 Insert picture description here

Example :
border-image-source It's simple. You put it in your url that will do , I won't write examples .
border-image-slice Introduction link :https://wudi98.blog.csdn.net/article/details/104940881
border-image-outset An example of :
 Insert picture description here

Ten 、 Multimedia query

Media queries can detect a lot of content , These include :viewport( window ) The width and height of 、 Width and height of equipment 、 toward ( Smartphone horizontal screen , Vertical screen )、 The resolution of the .

Use the syntax :

@media not|only mediatype | all and (expressions) {
	 Specify the style ...
}

explain :
When both the device condition and the expression in parentheses are true , Then apply the corresponding style .
We can also use different style files under different conditions :

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Media type :

Media type describe
all For all media devices
aural For voice and audio synthesizer
braille Tactile feedback device for Braille for the blind
embossed A Braille Printer for pagination
handheld For small handheld devices
print For printers
projection For scheme presentation , Like science fiction
screen For computer monitors
tty The density of the letters used in the grid is fixed , Such as teletypewriters and terminals .
tv For TV type equipment

css3 New media type

Media type describe
screen For computer screen , Flat , Smart phones and so on
speech For screen readers

Small example :

You can totally copy Take the code below to see the effect , When your screen is larger than 480px When body The color will change from orange Shift to the lightgreen color .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>csdn Wu Xiaodi </title> 
<style>
body {
    background-color: orange;
}
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>
	<h1> Reset the browser window to see the effect !</h1>
	<p> If the visual window width of the media type screen is less than  480 px , The background color will change .</p>
</body>
</html>

11、 ... and 、 Multi column layout

Multi column layout can design text content like a newspaper , As shown in the figure below :

 Insert picture description here

Property introduction :

attribute explain
column-count Specify the number of columns to split
column-gap Specify the gap between columns
column-rule-style Specifies the border style between columns
column-rule-width Specifies the border thickness of the two columns
column-rule-color Specifies the border color of the two columns
column-rule Is the abbreviation of the above three attributes
column-span Generally used at the beginning of an article , Specify how many columns the element spans
column-width Specify the width of the column

Compatible writing :
To ensure compatibility with unsupported browsers , Write each attribute three times . It's normal to do it again , Add... Before the first time -moz-, Add... Before the first time -webkit-.

For all compatible private attribute prefixes, see the end of the article .

A brief description of the attribute value :
Because this is very simple , The author will not put the example here , Just dictate to you here , Friends can write their own code to see the effect and verify the correctness of what the author said :

column-count
You want to divide the article into several columns , Just pass the corresponding number

column-gap
Set the spacing of each column in the article , We can understand that it is set in the middle of the articles without two columns margin distance

column-rule-style
Set the style of the article border , Such as solid line , Dotted lines and so on , Specific reference border-style The attribute value

column-rule-width
Set the width of the article border , Equivalent to setting border-width

column-rule-color
Set the color of the article border , Equivalent to setting border-color

column-rule
Abbreviations for the top three properties , Equivalent to setting border. It's just this border Not on all sides .

The effects of the above four attributes :
 Insert picture description here

column-span
Specify how many columns you want to span
 Insert picture description here

column-width
Specify the width of the column .

Twelve 、Animation

animation attribute :

grammar :

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Parameter Introduction :

Parameters Introduce explain
animation-name Specifies the name of the key to bind to the selector by @keyframes Assign a name to the animation
animation-duration Specify how long the animation will take to complete Define how many seconds or milliseconds an animation takes to complete a cycle
animation-timing-function How the animation will complete a cycle The default value is :ease, Other possible values are shown below this table : Illustration example animation-timing-function The parameter may have a value
animation-delay Set the delay interval of the animation in the launcher Only the first time the animation starts will pause , Subsequent loops do not pause , If you want to pause every cycle, please learn from the author's idea : Give Way animation Pause for a certain period of time before each start of the cycle OK 了
animation-iteration-count Define the number of times the animation plays The default value is 1, Parameter values :number perhaps infinite【 Infinite times 】
animation-direction Specifies whether the animation should be played backwards The default value is :normal, Other possible values are shown below this table : Illustration example animation-direction The parameter may have a value
animation-fill-mode When the animation doesn't play ( When the animation is finished , Or when the animation has a delay and doesn't start playing ), The style to apply to the element The animation does not affect the element until the first keyframe is played , Stop the influence element after the last keyframe is completed . The default value is none, The possible values of other parameters are shown in the table below : Illustration example animation-fill-mode The parameter may have a value
animation-play-state Specifies whether the animation is running or stopped The default value is running, It may be worth :paused【 Specifies to pause the animation 】,running【 Running animation 】
initial Set the property to its default value  
inherit Inherit attributes from parent elements  

The parameter may have a value :

Illustration example animation-timing-function The parameter may have a value :
 Insert picture description here

Illustration example animation-direction The parameter may have a value
 Insert picture description here

Illustration example animation-fill-mode The parameter may have a value :
 Insert picture description here

@keyframes The rules :

Instructions :
Use @keyframes The rules , You can create animations .
Animations are created by gradually changing from one CSS Style to another .
In the animation process , You can change CSS The style is set many times .
Use... When a specified change occurs %, Or keywords "from" and "to", This is the 0% To 100% identical .
0% It's the opening animation ,100% When the animation is finished .
For best browser support , You should always define as 0% and 100% Selector .

Be careful : Use animation Property to control the appearance of the animation , You also use selectors to bind animations .

grammar :

@keyframes animationname {keyframes-selector {css-styles;}}

 Insert picture description here
Small example :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSDN Wu Xiaodi </title>
<style> 
div {
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove {
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}
/* Safari and Chrome */
@-webkit-keyframes mymove {
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
	<div></div>
</body>
</html>

Similar to input animation :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            animation: move 5ms ease;
            -webkit-animation: move 5s ease infinite;
        }
        @keyframes move {
            0% {width: 1em;}
            8.33% {width: 2em;}
            16.66% {width: 3em;}
            25% {width: 4em;}
            33.33% {width: 5em;}
            41.66% {width: 6em;}
            50% {width: 7em;}
            58.33% {width: 8em;}
            66.66% {width: 9em;}
            75% {width: 10em;}
            83.33% {width: 11em;}
            91.66% {width: 12em;}
            100% {width: 13em;}
        }
        @-webkit-keyframes move {
            0% {width: 1em;}
            8.33% {width: 2em;}
            16.66% {width: 3em;}
            25% {width: 4em;}
            33.33% {width: 5em;}
            41.66% {width: 6em;}
            50% {width: 7em;}
            58.33% {width: 8em;}
            66.66% {width: 9em;}
            75% {width: 10em;}
            83.33% {width: 11em;}
            91.66% {width: 12em;}
            100% {width: 13em;}
        }

    </style>
</head>
<body>
<div id="wrap">
     I am me , I'm Wu Xiaodi !
</div>
</body>
</html>

13、 ... and 、Transition

effect :
When we can change from one style to another in order to add an effect , No need to use Flash Animation or JavaScript. We just use transition that will do .

If you want to achieve the effect of transition , So we need to add effects css Attribute and execution effect need transition time .

grammar :

transition: property duration timing-function delay;

The default value is :

transition: all 0 ease 0;

Parameter value introduction :

value describe
transition-property Appoint CSS Attribute name【 Properties to transition 】
transition-duration transition The effect needs to specify how many seconds or milliseconds to complete
transition-timing-function Appoint transition The speed curve of the effect
transition-delay Definition transition The pause time at the beginning of the effect

Example :
For example, we want to move into a div Change its background color to yellow , The transition time is two seconds , So we can write like this :

div {
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:background 2s; /* Safari */
}
div:hover {
	background:yellow;
}

So friends will find this moving into this div The background color changes from red to yellow .

If you want to achieve multiple transition properties, please use time > commas , The grammar is as follows :

div {
  transition: width 2s, height 2s, transform 2s;
   -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

If you want to realize that all attributes have transition time , The grammar is as follows :

div {
  transition: all 2s;
   -webkit-transition: all 2s;
}

fourteen 、Word-wrap

effect :
Define whether long content is wrapped automatically or not .

grammar :

word-wrap: normal|break-word;

Property Value Description :

value describe
normal Wrap only at allowed hyphenation points ( Browser remains default )
break-word In the long word or URL Wrap inside address

15、 ... and 、Text-overflow

effect :
Defines how the overflow text is presented to the user .

grammar :

text-overflow: clip|ellipsis|string;

Property Value Description :

value describe
clip Trim text 【 Directly cut 】
ellipsis Display ellipsis instead of trimmed text
string Use the given string to represent the trimmed text

Google browser also supports operations where the number of specified lines exceeds the specified style of text , Specific please see :https://blog.csdn.net/weixin_43606158/article/details/90236856?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158503769119724811863556%2522%252C%2522scm%2522%253A%252220140713.130056874…%2522%257D&request_id=158503769119724811863556&biz_id=0&utm_source=distribute.pc_search_result.none-task

sixteen 、Word-break

effect :
Specify non CJK Line breaking rules for scripts

CJK The script is Chinese , Japan and South Korea (“ China, Japan and South Korea ”) Script .

grammar :

word-break: normal|break-all|keep-all;

Property Value Description :

value describe
normal Use browser default newline rules
break-all Allows line breaks within words
keep-all Line breaks are only allowed at half space or hyphen

seventeen 、Flex Elastic box

Introduce :
The elastic box is CSS3 A new layout pattern of .
CSS3 Elastic box ( Flexible Box or flexbox), A layout that ensures that elements behave appropriately when the page needs to adapt to different screen sizes and device types .
The elastic box consists of an elastic container (Flex container) And the elastic child element (Flex item) form .

The main idea is to let the container have the ability to change the width of its sub items adaptively 、 Height ( Even order ), Fill the available space in the best way ( Mainly to adapt to all types of display devices and screen sizes )flex The container expands the subproject to fill the available space , Or shrink them to prevent overflow from the container .

Be careful :
The outside of the elastic container and the inside of the elastic sub elements are rendered normally . The elastic box only defines how the elastic child elements are laid out in the elastic container .

The elastic box layout function mainly has the following points :

  1. The layout can also be flexibly adjusted when the screen and browser window size change .
  2. Specify the size of the telescopic item by proportionally allocating free space along the main axis or side axis .
  3. Specify the telescopic item before allocating additional space for the telescopic container to the item along the main or side axis 、 After or between .
  4. Specifies how additional space perpendicular to the element layout axis is distributed around the element .
  5. Control the layout orientation of elements on the page .
  6. Reorder the elements on the screen according to the sorting method specified by different standard streams .

Terminology in elastic box models :
a. Main shaft and side shaft
b. Lord / Side axis direction
c. Lord / Starting point of side axis , Lord / End of side axis
d. Length of main shaft
e. Retractable container ( Outer layer ) And scaling projects ( Child element or content )

Use of elastic box :
Elastic container by setting display The value of the property is flex or inline-flex Define it as an elastic container .
The elastic container contains one or more elastic sub elements .

Be careful : Set up Flex After the layout , The child element float、clear and vertical-align Property will fail .

Properties of the container 【 Properties that the outer box can set 】
There are six in all :

attribute effect It may be worth
flex-direction Determine the direction of the spindle row( The default value is )【 The principal axis is horizontal , The starting point is on the left 】
row-reverse【 The principal axis is horizontal , The starting point is on the right 】
column【 The principal axis is perpendicular , The starting point is at the top 】
column-reverse 【 The principal axis is perpendicular , Starting edge 】
flex-wrap How to wrap nowrap( The default value is )【 Don't wrap 】
wrap【 Line break , The first row is at the top 】
wrap-reverse【 Line break , The first row is at the bottom 】
flex-flow flex-direction Properties and flex-wrap Attribute shorthand The default value is row nowrap
justify-content The alignment of children on the spindle flex-start( The default value is )【 Align left 】
flex-end【 Right alignment 】
center【 In the middle 】
space-between【 The two ends are aligned , The intervals between the items are all equal 】
space-around【 The space between the two sides of each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .】
align-items The alignment of children on the side axis flex-start【 Align the starting points of the intersecting axes 】
flex-end【 The ends of the intersecting axes are aligned 】
center【 Align the midpoint of the intersecting axis 】
baseline【 Baseline alignment of the first line of text for the project 】
stretch( The default value is )【 If the item is set to height or set to auto, Will fill the entire container 】
align-content Defines the alignment of multiple axes , If there's only one axis , The property does not work flex-start【 Align with the starting point of the intersecting axis 】
flex-end【 Align with the end of the cross axis 】
center【 Align with the midpoint of the intersecting axis 】
space-between【 Align with both ends of the cross axis , The average distribution of spacing between axes 】
space-around【 The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .】
stretch( The default value is )【 The axis occupies the entire cross axis 】

The properties of the child 【 Attributes that can be set by inner direct child elements 】

attribute effect It may be worth
order Define the sequence of items , The smaller the numerical , The further up the line The default is 0
flex-grow Define the magnification The default is 0, That is, if there is any remaining space , And don't zoom in
flex-shrink Define the reduction scale The default is 1, That is, if there is not enough space , The project will shrink
flex-basis flex-basis Property defines before allocating extra space , Spindle space occupied by the project (main size). Browser according to this property , Calculate if the spindle has extra space . The default value is auto, The original size of the project .
flex flex-grow, flex-shrink and flex-basis Abbreviation The default value is 0 1 auto. The last two properties are optional .
align-self align-self Property allows a single item to have a different alignment than other items , covering align-items attribute . The default value is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch. auto( The default value is )【 Inheriting from the parent element align-items attribute 】
flex-start【 Align the seven points of the cross axis 】
flex-end【 The ends of the intersecting axes are aligned 】
center【 Align the midpoint of the intersecting axis 】
baseline【 Baseline alignment of the first line of text for the project 】
stretch【 If the project is not set to height or set to auto, Will fill the entire container 】

Attribute value effect reference link :https://www.runoob.com/w3cnote/flex-grammar.html

eighteen 、@font-face

CSS3 Allows users to customize font types , adopt @font-face Can load the server-side font file , Let the client browser display fonts that are not installed on the client .@font-face The rules in CSS3 It belongs to the font module in the specification .

@font-face Properties and their values are described below :

attribute describe
font-family Set the font name of the text
font-style Set the style of the text
font-variant Set whether the text is case
font-weight Set text thickness
font-stretch Sets whether the text is stretched horizontally
font-size Sets the size of the text
src Set the relative or absolute path of the custom font . Be careful : This attribute can only be used in @font-face Use... In the rules

Introduction to compatibility :
IE5 This attribute is supported from the beginning , But only Microsoft free .eot(Embedded Open Type) Font format , The specific support of other browsers is shown in the figure below  Insert picture description here
Consider some compatibility issues , It is recommended to define .eot and .ttf【TrueType】, To be compatible with all browsers .

Example :
 Insert picture description here
Code :

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>csdn Wu Xiaodi </title>
    <style type="text/css">
        @font-face {
            font-family: 'lexograph';
            /*  compatible ie */
            /*  Download address : http://randsco.com//fonts/lexograph.eot */
            src: url("./lexograph.eot");
            /*  Compatible non ie */
            /*  Download address :http://randsco.com/fonts/lexograph.ttf */
            src: local('Lexographer'), url('./lexograph.ttf') format("truetype");
        }
        h1 {
            /*  Set the font to be imported into the font file lexograph Font type  */
            font-family: lexograph, verdana, sans-serif;
            font-size: 4em;
        }
        body {
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <h1>Hello world! <br />My name is wu xiao di!</h1>
</body>
</html>

About viewing the CSS3 Property compatibility :

Front-end html,css,js Both can pass caniuse Check compatibility .
How to view the support of front-end code in each browser

caniuse Official website

Introduction to compatible writing :

Compatible prefixes For browsers
-webkit- Safari、Chrome
-moz- Firefox
-khtml- Konqueror Type of browser
-o- Opera Browser type
-ms- IE8+ browser

 

版权声明
本文为[A Wudi network studio]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/06/20210618221437574n.html

Scroll to Top