catalogue
4. Horizontal and vertical centering 12
6. Indent the first line by 12
Fixing and scrolling of background 15
Locate attributes and attribute values 20
Floating element parent height adaptation 22
Target pseudo class selector 32
Project adjustment sequence 38
Remaining width and height of the project 38
Common attributes of mobile terminal 39
Differences between Em and rem 43
Difference between 100% and VW 45
Animation transition attributes 47
Animation transition single attribute 49
Keyframe animation attribute animation 54
Keyframe animation single attribute 56
Key frame animation rotation 56
Shortcut key
alt + shift + down arrow} quick copy
Ctrl+Enter (enter key) quickly jump out of the label to the next line
Using plug-ins
Press F1 # search cssrem and press enter to change it to the calculated value
The default calculation is based on 16px benchmark
Preferences - settings are also available
You can find plug-ins settings extension settings
fontsize (16) = (number of benchmarks to set)
--------------—
center
br ， line feed
width ， height
height = width
Bgcolor / background color background color
align = "left or right or center" text is aligned horizontally
valign = "top / middle / bottom" text vertical alignment
Strong / BText bold
em/i text tilt
u underline
del delete line
sup superscript [1]
sub subscript [1]
hr ， horizontal labels ， support attributes < hr color = 'color' width = 'width' align = 'where to lean (left / right)' noshade ， remove shadows / >
opacity: 0.7;/* opacity transparency 0 ~ 1 # default 1 opaque*/
Transparent color transparent
border-radius: 4px;/* Fillet*/
font-size: 25px;/* Font size*/
text-indent: 11px;/* Font indent*/
Box shadow
Text shadow text shadow
display: flex; Elastic box
box-sizing: border-box; Weird box model
Common symbols:
Left sharp corner = < right sharp corner > = = >
Entering Lorem # will automatically generate a string of characters
Space:
The width of this space is obviously affected by the font and strongly} not recommended
the width occupied is exactly a Chinese width and is basically unaffected by the font
© Copyright symbol: ©
Trademark symbol:
™ ™ Trademark the application provided by the national trademark office may be successful and may be rejected
® ® The label indicates that the registration is successful. If someone uses a protected trademark, he can sue him
Weird cute Icon
😀 😁 😂 😃
Weird cute Icon 😀 😁 😂 😃
div # large box is used to divide the area, and one row is exclusive by default
Quickly write three div boxes div{111111}*3
span small box does not monopolize one line and has no practical significance. It is mainly used to decorate the text independently. The width of the content takes up as much space as possible
Ordered list: ol > Li
li ， labels can be placed freely, but only li can be placed in ol
Numbers are automatically generated. The default value is 1.2.3
Attribute type: 1, a, a, I, I; Start = where to start, the value can only be a number
Unordered list: UL > Li
1. Only Li can be placed in UL, and other labels can be placed in Li
2. The default is a black solid circle
3. The type ， attribute defaults to disc ， solid circles. Circle hollow circle,
Square is a solid square, and none cancels the point
User defined list: DL > DT + DD ， quick create
< dl > usually only one pair is placed in dl
< DT > I'm a picture < / dt >
< DD > I am the text < / DD >
</dl>
- There are two ways to write the same level directory ① code gif ②./ code.gif
- Parent directory/
Picture label: img
< img # src = "picture path" alt = "replace text" title = "prompt text after mouse over" width = "width" height = "height" target = "specify where to open the document" >
target = "U self" default = "U blank" new window opens
width ＾ height: px, percentage (% relative to parent element)
The window itself has no width or height, so you need to set CSS
html body{width:100%;height:100%;}
Form:
<table border="1px" width="500" height="200"
align="center" bordercolor="red" bgcolor="green">
<tr>
<td width="200">1</td>
<td height="200">2</td>
</tr>
<tr height="100">
<td bgcolor="red">3</td>
<td align="right" valign="top">4</td>
</tr>
</table>td: if the width of a cell is set, the width of the whole column will be affected
td: if the height of a cell is set, the height of the whole row will be affected
Cell merge:
Consolidated line (kraspan) colspan="2"
Merge column (meat dead pan) rowspan="2"
Form from:
<!-- submit Submit to action Back end address input box input Must have name-->
<!-- method="post" front end URL Do not display user information and password back-end resolution = get front end URL Can see-->
<!-- type="reset" Reset -->
<form action="https://www.baidu.com/index.php?tn=monline_3_dg" method="post">
User information:<input type="text" placeholder="Please enter user information" name="username">
<br>
password: <input type="password" placeholder="Please input a password" name="password">
<br>
<input type="submit" value="Sign in">
<!-- <input type="submit" be equal to button type="submit" -->
<input type="reset" value="Re-enter">
<!-- <button type="reset">Re-enter</button> -->
<input type="button" value="aaa"><!--Common buttons -->
</form>CSS:
Internal CSS: written in style tag
External CSS:
Recommended method (I)
Rel = "stylesheet" relationdefine associativity stylesheet style sheet < link rel = "stylesheet" type = "text / CSS" href = "1. CSS" >
Mode 2 import import
<style type="text/css">
@import url(../css/02-css.css);
</style>Inline inline embedding: directly add the style attribute on the label and the style attribute you want to use
CSS priority:
Inline > internal > external -- >
Priority display in line
Attention:! If important ， is added to someone, the priority will be higher than vip
/*The selector has the principle of proximity*/
/* ! Heaviest*/
/*Last line style*/
/*Then inline style*/
/*Weight. id#>class.> Label element #i > i>div */
/*In case of conflict: different style settings, the style of high weight selector covers the low / * selector with the same weight. The style follows the proximity principle. The last definition is taken
</style>
CSS selector
*{
/* Clears the default margin and fill values for all elements */
margin: 0; /*Margin */
padding: 0; /*padding */
}* wildcard all elements
Class selector in class style is dot '.'
In id style, the id selector is' # '
/*Group selector * / div,p,h1 {} (comma separated)
Descendant selector, including selector div p{} (space separated)
. item > UL (>) son selector
. item ul (space) descendant selector
Pseudo class selector:
<style>
/* Initial state*/
a:link{
color: yellow;
}
/* After visit */
a:visited{
color: red;
}
/* Hover over */
a:hover{
color: blue；
}
/* Click activate */
a:active{
color: green;
}
</style>: hover ， the most commonly used action effect of mouse hover
The order of pseudo class selectors must be: link--visited--hover--active
Wrong order sometimes the style of hyperlinks will fail
CSS text properties
- font size
Font size font size: default 16px design drawing common 12px font family setting font size: Arial;
Google browser default Microsoft YaHei
Multiple fonts are linked with commas in the middle. The first font is parsed first. If it is not parsed, the second font is parsed, and so on. It is the default Microsoft YaHei
- Colour
Color = red / RGB (0,0255) / #00ff00;
- Bold & slant
100-900
100 Fine body lighter Lighter
400 normal normal natural
700 Bold bold bold
900 Coarser bolder More bold
*/
/* font-weight: 700; */
/*
italic tilt
oblique More inclined
normal normal
*/
font-style: oblique;- Horizontal vertical center
text-align: center; How text is displayed {left, center, right
text-align: justify; /* For aligning multiline text at both ends*/
/* horizontally */
/* Line height line height is used for single line text */
line-height: 100px;
text-align: center;- Text spacing
Text spacing: word spacing and character spacing
letter-spacing: 20px; /* Word spacing * /
word-spacing: 10px; /* Character spacing * /
/* word-spacing: -10px; Cross*/
- text-indent
text-indent: 2em; Indent the first line by 2 Chinese characters
space
- Text modification
/* text-decoration: underline; Underline*/
/* text-decoration: line-through; Delete line */
/* text-decoration: overline; Upper scribe*/
text-decoration: none; /*No, usually set for a link*/
text-decoration: underline line-through overline;/*Set multiple lines*/- Transform case
/* text-transform Case */
/* capitalize Every word is capitalized */
/* lowercase Convert all to lowercase */
/* uppercase All uppercase */
/* none Not set */
p{
/* text-transform: capitalize; */
/* text-transform: lowercase; */
text-transform: uppercase; All uppercase
}- Font
font: italic bold 20px/2em Microsoft YaHei ;
/* font: 20px/2em Song typeface; Font line height cannot be omitted */Font text abbreviation is the abbreviation of font style font weight font size / line height font family
Font: italic 800 30px/80px "Arial"; The order cannot be changed. It works only when font size and fony family attributes are specified at the same time
CSS list properties
list-style-position: inside; Default outside
/* list-style: none url(img/1.jpg) inside; */
/ * compound attribute writing method, regardless of position order*/
list-style: none; /* Commonly used*/
/*
disc disc
circle Hollow circle
square Solid square
none Nothing
*/
list-style-type: circle;
/*
Custom settings picture
*/
/* list-style-image: url(img/1.jpg); */CSS background properties
/* background-color: yellow; */
background-color: rgb(255, 0, 0);
background-color: rgba(0, 0, 0, 0.5); Transparency 0 ~ 1, translucency 0.5
background-image: url(img/1.jpg);
/*
Default tile effect for small pictures
repeat: Default tile
repeat-x: x Axis tiling
repeat-y: y Axis tiling
no-repeat: no-repeat
*/
background-repeat: repeat-x;
background-position: 10% 10%;
/*
1. 20px 20px
2. 10% 10%
3.left center right
top center bottom
*/Large pictures will be cropped
background-position:center center;
background-size: 100% 100%;
Set the size of the picture
1.400px 400px
2.100% 100%
3.cover: Overlay expands the image to be large enough so that the background image completely covers the background area
Also, the line cannot be displayed in the background positioning area
4. contain: Includes expanding the picture to its maximum size so that its width and height fully fit the content area.
If there is not enough box, there may be blank spaceFixing and scrolling of background
/* background-attachment: scroll; Default value*/
background-attachment: fixed;/* Fixed*/
/*Note: once the fixing is opened. Without the box, he can't show it*/
/* margin: 0 auto; Center*/
/* margin: auto; */
Attachment
Background attachment = "scroll / fixed"
Compound writing:
Compound writing:
1.Separate with spaces
2.The order can be changed
3.You can take only one value and put it later to overwrite the previous value *****
/* backgourd-size Property can only be used alone */
/* background-color: yellow;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
background: yellow url(img/1.jpg) no-repeat center fixed;Padding inner margin
/* Inner margin padding
1 Four values, four directions are the same
2 Two values, the same up and down, the same left and right
3 Values, up, left and right, down
4 Values, clockwise up, right, down, left
Negative numbers are not supported
*/
/* padding: 30px; */
padding: 20px 30px;1. Background color spread to inner margin
2. Can I set a single direction?
padding - direction: top bottom left right to set a single direction
/* padding: 30px 0 0 0; */
padding-top: 20px;Border border:
border:1px solid gray
solid Solid line
The background color can also spread to the borderStyle solid solid double double solid dashed dotted dotted line
/*
border
border-width width
border-style style
border-color colour
*/Margin margin
Margin margin
1 Four values, four directions are the same
2 Two values, the same up and down, the same left and right
3 Values, up, left and right, down
4 Values, clockwise up, right, down, left
Center the screen? margin:0 auto; Horizontal center
Background color does not spread
Can I set a single direction?
margin - Direction: top bottom left right To set a single direction
Support negative numbers (useful)
Characteristic problems:
1.Fraternity, two boxes, vertical outer margin and horizontal outer margin
----In the vertical direction, the outer margin is the maximum
----In the horizontal direction, the outer margins are merged
2.Father son relationship, given the margin, but the effect on the father, how to solve it?
*/
/*
1.Child margin top = = = parent padding top, pay attention to height calculation
2.Set border for parent box
3.Either father or son can add floating.
4.overflow: hidden BFC block
*/
/* padding-top: 100px; */
/* border: 1px solid green transparent; */
/* transparent transparent */img{
/ * convert the picture type, and there will be no gap between the picture and the text*/
display: block;
}
CSS floating
Floating: if you can save, you can save
Float: the left element floats to the left, the right element floats to the right, and the none element does not float
Function of floating 1 Defines how other text in the web page appears around the element
Floating action 2 Is to let things stand horizontally
float: left;/* Float left * / float: right; Float right
Clear float:
/* clear: left; Front left float not allowed*/
If the front is left, clear the left, and if the front is right, clear the right. The left and right floats in front of both can be cleared
/ * clear floating to solve height collapse*/
Four schemes
1. Write dead fixed height
2. clear: none /left /right/both
3. A box is added after the current floating element, and the width and height are not set. clear:both
4. overflow:hidden ， trigger bfc to calculate the height of floating elements. Commonly, trigger bfc to calculate the height of floating elements. We can't affect the outside
Overflow attribute:
/* overflow: visible; Show overflow default properties*/
/* overflow: hidden; Overflow content hidden text cutting} is also commonly used*/
/* overflow: scroll; Whether there is overflow or not, there will be a scroll bar*/
/* overflow: auto; Automatic, most commonly used this setting scroll bar*/
/* overflow: inherit; Inherit the effect of the parent node*/
Overflow-x: overflow of X axis} overflow-y: overflow of Y axis
Free space: white space
/ * nowrap text will not wrap until the < br / > tag is encountered (common)*/
/ * pre carriage return spaces will be retained without line breaks*/
/ * the pre wrap carriage return space will be retained and the line will wrap automatically*/
/ * pre line will leave carriage return for line feed, but the space will not display line feed*/
<!-- < Pre > pre formatted text - leave whitespace tab, enter < / pre > -- >
Element type:
Block element:
Has the following properties
display: block
display:list-item
p tags can put text, not fast level elements
Inline elements:
The padding margin of Span/b/em/strong/a and other inline elements supports the left and right margins, while the upper and lower margins do not
Inline block element:
img # input and other inline blocks padding margin are supported
Element conversion:
Inline, inline | block, block | line block inline block
/*
Eliminate spacing between pictures and p Tags
*/
img{
display: block;
}
Several methods of transforming inline elements into block elements
1.display:block;
2.position:absolute;
3.float:left;
Hide display: none;
Locate attributes and attribute values
position: relative;
/ * relative positioning*/
position: absolute;
/*absolute positioning*/
position: fixed;
/*Fixed positioning. Break away from the document flow and locate the current window of the browser position: fixed; right: 0; bottom: 200px; */
position: sticky;
/ * sticky positioning: sticky; top: 0;*/
float: half detached, text wrapped
absolute: completely separated, no text wrapping effect level will appear
/ * the hierarchy must be positioned. Without positioning, the hierarchy does not work*/
The absolute positioning of the parent-child relationship. Set a negative value on the child box, and the parent box will be on the child box
The level of brotherhood is that the latecomers are superior
/*z-index: level: the higher the value, the higher the level, and the higher the display*/
Anchor:
Anchor function: jump to different areas of the page, using a link.
< a href = "# anchor name" >
Width height adaptation
Do not write or auto is adaptive width adaptive width:auto
Often applicable to:
Navigation bar | general bar layout
Highly adaptive
/ * minimum height. If there is not much content, it is this height. If there is much content, it will open automatically*/
min-height: 500px;
Min height minimum height = = "common
Max height maximum height
Min width min width
Max width maximum width
Floating element parent height adaptation
/*====== The best solution is to insert an empty pseudo element========= */
.box::after{
content: "";
clear: both;
display: block;
width: 0;
height: 0;
/* visibility Visible: Hidden hidden; Visible set to hidden */
visibility: hidden;
}Pseudo element:
/* Pseudo element: false. You have to rely on an element to live */
div::first-letter{
font-size: 30px;
color: red;
}
div::first-line{
/* font-size: 30px; */
background-color: aqua;
}
/* ::before ::after Most commonly used */
div::before{
content: "aaaaaa";
}
div::after{
content: "bbbbbb";
}
/*
The pseudo class uses a colon ":"
Pseudo elements use two colons':: '
*/Hidden differences
/* display: none; Non occupied hiding*/
/*Placeholder hidden * / visibility: hidden;
Window adaptation
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.box{
width: 100%;
height: 100%; }
layout
<!--The one in the middle is called the edition center -->
<!-- Full screen call bar -->
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
Advanced form - radio
<!-- checked Property is selected by default -->
<input type="radio" name="aaa" checked>Very satisfied
<!-- <input type="radio" name="aaa" checked="checked">Very satisfied -->
< input type="radio" name="six" id="man">
<!-- label Explain the meaning of the label for For whom -->
<label for="man">male</label>Check box
<!-- checked Default option value -->
<input type="checkbox" name="a" id="hj" checked>
<label for="hj">drink</label>File upload hidden
<!-- Upload file -->
<input type="file" name="" id="">
<div>Picture button-Replace submit button( Input type="submit")</div>
<form action="">
<!-- Picture button -->
<input type="image" src="./submit.jpg" >
</form>
<div>Hide button</div>
<div>
<!-- hide -->
<input type="hidden" name="" id="" value="The personal information brought to the back end is invisible to ordinary users">
</div>
<div>Disable disabled,read-only readonly</div>
<div>
<button disabled>Disable</button>
<br>
<input type="radio" disabled>dissatisfiedPull down menu;
select drop-down menu, and the first value is selected by default for option
select supported properties
1.size, display and process several options
2.multiple, multiple choice, press shift or Ctrl
option supported properties
1.value, which provides the value needed by the backend
2.selected, default option
Text field
<h1>Multiline text input box---Text field</h1>
<!-- cols=How many columns rows=How many lines only work for characters, not commonly used -->
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
<!--
placeholder : Prompt text
textarea default value: It is written inside the double label, so pay attention to the problem of spaces
-->
<textarea placeholder="Please enter your comments">Set in advance value</textarea>
resize: horizontal;
/* resize Resize,
The default value is both directions
none Can't move in either direction
vertical Only the vertical size can be dragged
horizontal Only the horizontal size can be dragged
*/Field set
<h1>Advanced form-Field set</h1>
<!-- fieldset Gather, legend Legend, description label Label, tag, called -->
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="men">
<label for="men">male</label>
<br>
<input type="radio" name="sex" id="women">
<label for="women">female</label>
</fieldset>HTML5
Add semantic tags:
<!-- Semantic tag crawlers like, colleagues understand -->
<header>head</header>
<!-- section Middle part -->
<section>
<!-- nav navigation bar -->
<nav>
<!-- figure It represents an independent label, which has no function. It is an ordinary label -->
<figure>nav</figure>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
<!-- main Main part -->
<main>
<!-- article Independent content unrelated to the top and bottom, similar to div -->
<article class="article1">
<header>article-header</header>
<section></section>
<footer>article-footer</footer>
</article>
<!-- article Independent content unrelated to the top and bottom, similar to div -->
<article class="article2">
<header>article-header</header>
<section></section>
<footer>article-footer</footer>
</article>
</main>
<!-- aside (Right) side-->
<aside>
<figure>aside</figure>
<p> </p>
</aside>
</section>
<footer>bottom</footer>audio
< audio SRC = "audio path" controls loop autoplay muted > < / audio >
<!--
controls the control bar appears
Loop: loop
Autoplay: autoplay
muted: Mute
-->
Video video
<video src="./movie.mp4" controls loop autoplay muted></video>
<video src="./movie.mp4" controls loop poster="./poster.jpg"></video>
controls displays the control bar, loop loop, autoplay, and auto play,
muted mute
poster, width, height
Enhanced input
<!-- Color selection -->
<form action="">
Color selection:<input type="color" name="color">
<br>
Email:<input type="email" name="myemail" >
<br>
url address(Full address):<input type="url" name="myurl" >
<br>
<!-- tel It is meaningless for the mobile terminal to adapt to the computer terminal when the digital keyboard pops up -->
Phone number:<input type="tel" name="mytel">
<br>
Slider effect: <input type="range" name="myrange" min="100" max="200"
value="100" step="10">
<!-- step Step length: increase or decrease by 10 for each sliding-->
<br>
Number type: <input type="number" name="age" min="0" max="10" value="4" step="2">
<br>
Search: <input type="search">
<br>
Date selection(To day): <input type="date" >
Month selection: <input type="month">
Weeks: <input type="week">
<input type="datetime-local" name="datetime">
<input type="submit" value="Submit">
</form>List of options (data)
<input type="text" list="mylist">
<datalist id="mylist">
<option value="mobile phone"></option>
<option value="Wrist watch"></option>
<option value="Bracelet"></option>
<option value="Bracelet"></option>
</datalist>Form properties enhancement
<form action="">
<div>
<!-- autofocus Automatically get focus, the whole page can only have one -->
user name:<input type="text" autofocus>
</div>
<div>
<!-- required Required items cannot be empty. There can be more than one page
multiple Multiple addresses are supported, separated by commas
-->
Email:<input type="email" name="email" required multiple>
</div>
<input type="submit" >CSS3
selector
Level selector
/* Spaces are descendants selectors */
/* Descendant selector (>) */
.box>li{
border: 1px solid red;
}
/* + The first brother you meet after the current element */
/* .child+li{
background-color: yellow;
} */
/* ~ All sibling nodes behind the current element */
.child~li{attribute selectors
/*Attribute selector [class,] */
div[class]{
background: yellow;
}
p[class]{
background-color: rebeccapurple;
}
input[name]{
background-color: yellow;
}
/* = perfect match */
/* input[type=email]{
background: red;
} */
/* ~= Match on inclusion */
input[type~=email]{
background: red;
}
<div>
Fuzzy matching:
<p>class^=b Starting with this</p>
<p>class$=b Ending with this</p>
<p>class*=b Contains a character</p>
</div>
<div class="box1">div-111</div>
<div class="box2">div-222</div>
<div>div-333</div>
<p class="p1">p-111</p>
<p class="p2">p-222</p>
<p>p-333</p>
<div>
<h1>Registration page</h1>
user name:<input type="text" name="username"><br>
password:<input type="password" name="password"><br>
Age:<input type="number" name="age"><br>
Email:<input type="email" >
</div>Structure pseudo class:
/* .box My last div child */
.box div:last-child{
margin-right: 0;
}Find page elements through some structural relationship,
For example:
Match the first child of an element
Match the last child element of an element
Pseudo class
/* ul li:first-child{ First child
background-color: yellow;
}
ul li:last-child{ The last child
background-color: red;
} */
/* The number of any number */
/* li:nth-child(2){
background: blue;
} */
/* The number, even 2n / even; Odd 2n+1 / 2n-1 / odd */
li:nth-child(even){
background: olive;
}Only child
/* :only-child Use less. For example, there is only one p in div */
div p:only-child{
background: red;
}Empty
/* empty An independent empty selector cannot have a space in it */
div:empty{
background-color: yellow;
}Root selector
/* :root Match the root element of the document. In html, the root element is always html */
:root,body{Target pseudo class selector
div:target{
background: yellow;
}: target when div is selected, the background turns yellow
accordion
div .content{
display: none;
}
div .content:target{
display: block;
}Click to select the div to display it, and other closed ones will not be displayed
Ul state pseudo class
<style>
/*:enabled Non disabled state */
input:enabled{
background: red;
}
/* :disabled Disabled state */
input:disabled{
background: yellow;
}
/* :focus Focus will match this selector */
input:focus{
background: blue;
}
input[type=checkbox]{
/* Remove default style */
appearance: none;
width: 20px;
height: 20px;
border: 1px solid black ;
}
/* :checked When the check box is applied, what happens when it is checked */
input:checked{
background: red;
}
div::selection{
background: yellow;
color: rebeccapurple;
}
</style>Negative selector
/* li:not(:first-child){
background: yellow;
} */
li:not(:nth-child(2n+1)){
background: yellowgreen;
}
div{
height: 100px;
width: 100px;
}
div:not(:empty){
background: rebeccapurple;
}shadow
Shaded text
<style>
div{
/* text-shadow Text shadow
5px Horizontal displacement
10px Vertical displacement
1px Fuzzy degree
red Shadow color
*/
/* text-shadow: 5px 10px 1px red; */
/* You can add multiple shadows separated by commas */
text-shadow: 0px -10px 1px red,0px 10px 1px yellow;
}Box shadow
/* box-shadow: -10px -10px 6px red,10px 10px 6px blue; */
box-shadow: 10px 10px 6px blue inset;
/* inset Inner shadow, without addition, is vulva shadow*/Rounded border
/* Fillet border radius:
px Or percentage;
v1, The four corners are the same
v1,v2,Upper left, lower right, lower left, upper right
v1,v2,v3 Top left, bottom left, top right, bottom right
v1,v2,v3,v4 Clockwise
*/
/* border-radius: 10px 50px; */
border-top-left-radius :10px;
border-top-right-radius: 30px;
border-bottom-right-radius: 60px;
border-bottom-right-radius: 90px;circular
/* 30 horizontal and 60 vertical border radius: 30px / 60px;*/
/* border-radius :30px/60px; */
/* border-top-left-radius: 10px 20px 30px 40px /50px 60px 70px 80px; */
border-radius: 50%;
/* The fillet value is set so that more than half of the box is a circle */
rectangle
/* It's hard to handle the percentage of px without% in a rectangle*/
border-radius: 30px;Semicircle
div{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: green;
border-radius: 50px 50px 0 0;
}sector
div{
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
border-radius: 200px 0 0 0 ;
}Font introduction
/* Font introduction */
@font-face {
/* Font name */
font-family: zhaizhai;
/* src Import font */
src: url(font/ygyxsziti2.0.ttf);
}How to use: font family: zhizhai (the font name you choose);
Weird box model
/*Box sizing: the default option value of the content box of the label box model, whether it is added or not; * //* Weird box model: box size is always the size we set * / box sizing: border box;
Elastic box
display: flex;
<!-- Elastic box is a new layout method, especially suitable for mobile terminal layout -- >
<!-- influence:
1. Child elements are arranged horizontally by default
2. In line elements become block level elements
3. When there is only one element, margin:auto is automatically centered
-->
Modify spindle direction
display: flex; / * elastic box*/
flex-direction: column-reverse; / * the spindle is arranged in reverse order*/
/*row, column,
Row reverse, column reverse*/
Main side axis alignment
/ * adjust the alignment direction of the spindle;
Flex start ， flex end ， center centered
Align both ends of space between and surround with space around distance*/
/*Align items: Flex end;
Flex start ， flex end ， center*/
Fold line
flex-wrap: wrap; / * line break*/
align-content: center;/* Controls the line spacing after folding*/
/*Controls the line spacing after folding
Flex start ， flex end ， center centered
Space around
Space between*/
Item alignment
The big box outside is called container, and the small box inside is called item
/*Align self ， own alignment ， above the default value of flex start
Under flex end
Center center
baseline is no different from flex start
stretch ， support the whole side shaft ， if it is not set, it will be extended by default*/
align-self: flex-start;
Project adjustment order
/ * adjust the order. The default value of order is 0; order:0;
The larger the value, the more it goes to the back
The smaller the value, the more forward
Can be negative*/
Remaining width and height of the project
flex:1; / * fill up the remaining space * /
Mobile terminal
Display resolution on simulator
css pixel: independent pixel of the device,
Physical resolution: device pixels
2X, 3x relationship?? (usually 2x relationship)
Device pixel ratio (dpr) = physical pixels / CSS pixels
iphone6 # 1css pixels = = = 2 physical pixels
s5 1css pixels = = = 3 physical pixels.
iphone3gs 320*480
iphone4 640*960
-----------------------------------------------
Design draft:
1.css pixel 375? Physical pixel? 750 (for clear pages)
2.1 copies (provided), multiple copies? (1 design draft)
To use more: (1) percentage, (2) elastic box layout (3) rem layout
It's best not to write dead width and height
Width and height of design draft ÷ 2 = = width and height of mobile phone end
Meta viewport???
<!-- Mobile viewport meta name="viewport"
Content content=
Width = device width ideal width = device width
Initial scale = 1.0 scale ratio no scale
User scalable = no user is not allowed to zoom the display -- >
The mobile terminal must set the following statement
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
Common attributes of mobile terminal
/* flex-shrink: 1; The default value is squeezed*/
/* flex-shrink: 0; It is not allowed to be squeezed*/
display: flex;/* Elastic Box * /
flex-wrap: wrap;/* Folding line in elastic box*/
align-content: flex-start;/* Adjust row spacing to 0 * /
overflow: auto;/* Content overflow auto add scroll bar*/
/ * Google browser kernel scroll bar customization} change the default behavior*/
::-webkit-scrollbar{
display: none;
}
Multi column layout
Multi column layout
/* Number of columns displayed */
column-count: 5;
/* Adjust column spacing */
column-gap:30px;
/* Column border */
column-rule:2px solid red;
/* Uniform column height */
/* column-fill: auto; */
/* auto Fill up the parent box */
/* Adjust column width */
/* column-width: 500px; */
}
div>h1{
column-span: all;
text-align: center;
/* all Across all columns */
}Waterfall flow
/* break-inside: avoid; No folding inside the box*/
Responsive layout
@media screen and (orientation:portrait){
div{
width: 33.333%;
}
}
@media screen and (orientation:landscape){
div{
width: 20%;
}
}Em and rem
The difference between Em and rem
<!-- Font size: font size: common rem of design draft
Px, EM, REM dispute
px: 50px
Em: relative unit, relative to the font size of the parent element. div width: 10em；
REM: relative unit, relative to the font size of the root element (html), div width: 10rem; -- >
rem layout
<!-- REM equal scale -- >
html{
font-size: 100px;/*html For rem calculation*/
}
body{
font-size: 16px;/*For the back font*/
}
.box{
width: 7.5rem;
height: 100px;
background: yellow;
}
</style>
<script>
// fontsize dynamic calculation
document.documentElement.style.fontSize=document.documentElement.
clientWidth/750*100+'px'
// fontsize = css layout width / physical resolution of the current device * benchmark font size
//Last size = current equipment / design draft size * benchmark font size
</script>VW and VH
<!-- VH and vw scaling units -- >
<!--
vh view-height
100vh = = = height of viewport
vw view-width
100vw = = = width of viewport
HTML font size JS code is dynamic.
font-size=???vw
-->
VW conversion
/*
375px = 100vw
1px =100/375vw 0.2667
375 1vw == 3.75px
414 1vw == 4.14px
768 1vw == 7.68px
*/
Difference between 100% and VW
<!--
When there is no scroll bar, 100vw = = 100%
With scroll bar
100vw includes scroll bar and window size
100% of the space left after removing the scroll bar is full
-->
Gradual change
Linear gradient
/ * linear gradient
1. Support multi-color gradient
2. Support direction
to top， to left，to right，to bottom，
to top right，to bottom left......
linear-gradient(to bottom,red,yellow,green);
3. Support angle writing
?? deg how many degrees
linear-gradient(90deg,red,yellow,green);
*/
Radial Gradient
/* background: radial-gradient(red 0%,green 10%,blue 30%); */
/ * uneven transition setting percentage*/
background: radial-gradient(red 50%,blue 50%);
/* background:radial-gradient(ellipse,red,green); */
/* background:radial-gradient(circle,red,green); */
background:-moz-radial-gradient(60% 40%,farthest-corner,blue,green,yellow,black);
/* This attribute is not supported by the browser. It needs to be prefixed
Google plus webkit-
Firefox plus moz-
background:-moz-radial-gradient(60% 40%,closest-side,blue,green,yellow,black);
closest-side Nearest
farthest-side Farthest
closest-corner Nearest angle
farthest-corner Farthest angle
*/
}
/*
Radial Gradient
radial-gradient(red,green);Default uniform distribution
Repeat gradient
/*Repeating - repeating*/
/* background:repeating-linear-gradient(red,yellow 10%,green 20%); */
background:repeating-radial-gradient(red,yellow 10%,green 20%);
/* repeating- repeat */
Animation transition
Animation transition attributes
/ * write it on its own box and observe the value at any time; All observation value * / transition:all 2s linear 3s;
/ * transition time pill effect
all attribute
2S animation time
linear constant speed (default)
3s delay
Except display:none/block; The switch of cannot be applied and is not supported*/
Animation transition type
/* The change of the first li when the mouse is placed on the ul */
ul:hover li:nth-child(1){
width: 600px;
/* The monitoring attribute 2S linear changes at a constant speed (default value) */
transition: all 2s linear;
}
ul:hover li:nth-child(2){
width: 600px;
/* Listen, so attribute 2S ease slows down gradually */
transition: all 2s ease;
}
ul:hover li:nth-child(3){
width: 600px;
/* Monitor the attribute 2S to accelerate the change */
transition: all 2s ease-in;
}
ul:hover li:nth-child(4){
width: 600px;
/* Monitoring attribute 2S deceleration change */
transition: all 2s ease-out;
}
ul:hover li:nth-child(5){
width: 600px;
/* Listen, so attribute 2S increases first and then decelerates*/
transition: all 2s ease-in-out;
}
ul:hover li:nth-child(){
width: 600px;
/* Bezier curve website: http://cubic-bezier.com/
Frame by frame animation: transition timing function: steps
*/
transition: all 2s cubic-bezier(.17,.67,.83,.67)
}Animation transition single attribute
/ * animation listening attribute - multiple attributes are separated by spaces, or all can be written*/
transition-property: height background;
/ * animation duration*/
transition-duration: 2s;
/ * uniform change*/
transition-timing-function: linear;
/ * delay*/
transition-delay: 2s;
2D attribute transform
<!-- Transform deformation is often used in animation -- >
2D translation
/* translate displacement
translateX === X Axis horizontal movement
translateY(100px) ===y Axis vertical movement
Positive x right y down
Negative x left y up
Diagonal walk
The first one: Transform: translatey (100px) translatex (100px);;
The second: transform: translate(100px,100px); Simplified writing
*/2D zoom
/* scale/Die to want
Negative value is inverted image magnification transform: scale(-1.5);
scale(1)The default value of 1 scale(1.5) zooms in from the center
Support X-axis and y-axis to enlarge separately
scaleX scaleY
*/
/* Change the position of the center point
center (Default) center
left top Upper left
left bottom Lower left
left center
right top
right bottom
right center
*/
transform-origin: left top;2D rotation
/* transform: rotate(50deg); */
/*
rotate(Rotation of body
Positive clockwise
Negative value counterclockwise
50deg 50 deg = = degree (unit)
transform: rotateX(50deg); Around the X axis
transform: rotateY(50deg); Rotate around the Y axis
transform: rotateZ(50deg);=====Center rotation
*/
/* transform-origin: left top; Change center point*/
Multi attribute
Displacement scaling
/*When translate displacement and scale are used together
It's better to move in front, so it's easy to use
*/
Displacement rotation
/ * when translate displacement and rotate(45deg) rotation are used together
The displacement is in the front. That's easy to use
*/
tilt
transform: skew(30deg,30deg);
/* transform: skewX(30deg); */
/*
skewX Positive value, drag the lower right corner and pull it to the right to form an included angle of 30 deg (degrees)
skewX Negative value, drag the lower left corner and pull to the left to form an included angle of 30 deg (degrees)
skewY Positive value, drag the lower right corner and pull it down to form an included angle of 30 deg (degrees)
skewY Negative value, drag the lower left corner and pull it down to form an included angle of 30 deg (degrees)
skew(x,y) Positive value, drag the lower right corner and pull to the lower right to form an included angle of 30 deg (degrees)
*/
transform: skewX(30deg);
Key frame
Keyframe animation attribute animation
<style>
div{
width: 200px;
height: 200px;
background: red;
/* zhaizhairun Self declared animation name;
2S Animation duration
linear Uniform speed
1s delayed
3 Several animations are played back to infinite three times
*/
animation: zhaizhairun2 2s linear 1s infinite;
}
/* First you need to declare the animation */
/* @keyframes Key frame */
@keyframes zhaizhairun1{
/* Start state */
from{
width: 200px;
height: 200px;
background: red;
}
/* End state */
to{
width: 400px;
height: 600px;
background: green;
}
}
/* Percentage writing supports multiple states */
@keyframes zhaizhairun2{
0%{
width: 200px;
height: 200px;
background: red;
}
25%{
width: 300px;
height: 300px;
background: yellow;
}
50%{
width: 400px;
height: 400px;
background: blue;
}
75%{
width: 400px;
height: 500px;
background: gray;
}
100%{
width: 400px;
height: 600px;
background: green;
}
}
</style>Keyframe animation single attribute
/* Single attribute */
animation-name: zhaizhairun1;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
/*animation-play-state: Running status: running by default */
/* animation-play-state: paused;suspend */
animation-play-state: running;
/* Animation direction */
animation-direction: alternate-reverse;
/*
normal normal
reverse Reverse motion
alternate Normal direction - alternate
alternate-reverse Reverse direction - alternate operation
*/drawer
/*
animation-fill-mode: forwards;
none Default no
forwards Keep the state of the last frame
backwards Keep the state of the initial first frame
*/Key frame animation rotation
<style>
*{
margin: 0;
padding: 0;
}
.swiper-container{
width: 640px;
height: 300px;
border: 5px solid gray;
margin: 0 auto;
overflow: hidden;
}
.swiper-container img{
width: 640px;
height: 300px;
}
.swiper-sllide{
float: left;
}
.swiper-wrapper{
display: flex;
animation: swiperrun 8s linear infinite ;
}
/* When the mouse moves in, it doesn't move */
.swiper-wrapper:hover{
animation-play-state: paused;
}
@keyframes swiperrun{
0%{
transform: translateX(0);
}
5%{
transform: translateX(-640px);
}
25%{
transform: translateX(-640px);
}
30%{
transform: translateX(-1280px);
}
50%{
transform: translateX(-1280px);
}
55%{
transform: translateX(-1920px);
}
75%{
transform: translateX(-1920px);
}
80%{
transform: translateX(-2560px);
}
100%{
transform: translateX(-2560px);
}
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/3.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/4.jpg" alt=""></div>
<!-- In order to achieve seamless rotation, the last one is the same as the first one -->
<div class="swiper-slide"><img src="img/1.jpg" alt=""></div>
</div>
</div>
</body>frame-by-frame animation
<!-- steps(Jump keyframes directly) ,
animation: run 5s step-start;
steps(1,start)====step-start Equivalent writing
1 The previous frame and the next frame complete the transition in one step
steps(10000,end) The larger the number, the more intermediate frames
step-end=====steps(1,end) Equivalent writing
end Keep the current frame. If you can't see the last frame, the animation ends
start Keep the next frame, do not see the first frame, and jump from the first frame to the last frame quickly
linnear ,ease-in -->Compatibility query
<!-- Check the compatibility through the website caniuse Com (can I use it)
Just enter the attribute
-->
Animat animation library
The animation library can be directly introduced into the website for use
<link rel="stylesheet" href="https:cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
3D
3D translation
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid black;
/* To make translateZ effective, you must have a 3D stage and depth of field */
transform-style: preserve-3d ;
/* flat: Default 2d stage */
/* preserver-3d: 3d stage */
position: relative;
margin: 0 auto;
/* perspective: 900px; Depth of field 900px*/
perspective: 900px;
}
.center{
position: absolute;
width: 200px;
height: 200px;
background: red;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
transition: all 5s;
}
.box:hover .center{
transform: translateZ(900px);
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
</div>
</body>3D rotation
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid black;
display: flex;
transform-style: preserve-3d;
}
.center{
margin: auto;
width: 200px;
height: 200px;
background: red;
/* transform: rotate3d(x,y,z,How many degrees (deg); */
transform: rotate3d(0,0,1,30deg);
}
</style>
</head>
<body>
<!-- 3d rotate roate -->
<div class="box">
<div class="center"></div>
</div>Zoom 3D
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid black;
display: flex;
transform-style: preserve-3d;
/* Depth of field */
perspective: 800px;
}
.center{
margin: auto;
width: 200px;
height: 200px;
background: red;
/* transform: rotate3d(x,y,z,How many degrees (deg); */
transform:scale3d(1,1,10) rotateX(45deg);
}
/* scaleZ 3d zoom
Must have
transform-style: preserve-3d; 3D stage
perspective: 800px; Depth of field
rotateX(45deg) And fit rotation or (fit displacement) suggest fit rotation
To see the effect
*/
</style>
</head>
<body>
<!-- 3d rotate roate -->
<div class="box">
<div class="center"></div>
</div>
</body>3D cube
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 600px;
margin: 0 auto;
border: 5px solid gray;
transform-style: preserve-3d;
position: relative;
/* transform: rotateY(30deg); */
animation: run 5s linear;
}
@keyframes run{
0%{
transform: rotateY(30deg) rotateX(30deg);
}
50%{
transform: rotateY(300deg) rotateX(300deg);
}
100%{
transform: rotateY(30deg) rotateX(30deg);
}
}
.box div{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
line-height: 200px;
text-align: center;
font-size: 50px;
color: white;
}
.box div:nth-child(1){
background: gray;
transform: translateZ(100px);
}
.box div:nth-child(2){
background: cadetblue;
transform: translateX(-100px) rotateY(-90deg);
}
.box div:nth-child(3){
background: purple;
transform: translateY(-100px) rotateX(90deg);
}
.box div:nth-child(4){
background: green;
transform: translateY(100px) rotateX(-90deg);
}
.box div:nth-child(5){
background: red;
transform: translateX(100px) rotateY(90deg);
}
.box div:nth-child(6){
background: darkblue;
transform: translateZ(-100px);
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>Grid layout
Grid layout
/* display: grid; Grid layout
display: grid can be added to any label
In addition, the in-line element becomes a block element
*/
/*
display: grid; Block level grid
display: inline-grid; Intra row block level grid
*/
/*
In line block level: unlike block level, it can be arranged on one line
*/
display: grid;Rows and columns
display: grid;
/* The first way Fixed value */
/*Divide rows */
/* grid-template-rows: 200px 200px 200px; */
/* Partition columns */
/* grid-template-columns: 200px 200px 200px; */
/* The second way. percentage */
/* grid-template-rows: 33.3% 33.3% 33.4%;
grid-template-columns: 33.3% 33.3% 33.4%; */
/* The third method: repeat function (repeat several times, the size of each) */
/* grid-template-rows: repeat(3,33.33%);
grid-template-columns: repeat(3,33.33%); */
/* The fourth writing method: automatic filling writing method repeat auto fill */
/* grid-template-rows: repeat(auto-fill,200px);
grid-template-columns: repeat(auto-fill,33.33%); */
/* The fifth writing method: fr fragment (like the usage of flex=1) occupies the rest */
/* grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr; */
/* In the sixth paragraph: minmax (minimum, maximum) */
/* grid-template-rows: minmax(100px,200) 200px 100px;
grid-template-columns: 200px 200px 200px; */
/* The seventh writing method: auto automatically fills the remaining space and is adaptive */
grid-template-rows: 100px auto 200px;
grid-template-columns: 100px auto 200px; spacing
/* grid-row-gap: 20px;
grid-column-gap: 20px; */
/* It's written in the new edition
row-gap: 20px;
column-gap: 20px; */
/* grid-gap: 20px 20px;
grid is omitted in the new version-
Direct write gap: 20px 20px;
*/
gap: 20px 20px;merge
<style>
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
/* Setting area */
grid-template-areas: 'a e e'
'd e e'
'g h i'
;
}
/* .box div:nth-child(1){
The first child is a
grid-area: a;
} */
.box div:nth-child(5){
grid-area: e;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>Alignment
/* Change the default value of rows in the arrangement order direction */
/* grid-auto-flow: column; column*/
/* content Project area */
/* horizontally */
justify-content: center;
/* Vertical center */
align-content: center;
/* Abbreviation: place content: Center; */
/* items Content area in the project */
/* justify-items: center;
align-items: center; */
/* Abbreviation */
place-items: center center ;Project properties
<style>
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
}
/* .box div:nth-child(1){
grid-column-start: 1;
grid-column-end: 3;
} */
.box div:nth-child(2){
Cell grid to divide the area
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>