©2020-2024 ioDraw All rights reserved
<>1：css Triangle making
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
.span1{ display: block; width: 0; height: 0; border-top: 40px solid red;
border-bottom: 40px solid rgba(0,0,0,0); border-left: 40px solid rgba(0,0,0,0);
border-right: 40px solid rgba(0,0,0,0); margin-top: 50px; } .span2{ display:
block; width: 0; height: 0; border-top: 40px solid red; border-bottom: 40px
solid salmon; border-left: 40px solid mediumorchid; border-right: 40px solid
saddlebrown; margin-top: 50px; } </style> </head> <body> <span class="span1">
</span> <span class="span2"> </span> </body> </html>
<>2.css What are the positioning types
1.static（ Static positioning ）： This is a page element position The default value of the property , The elements are arranged according to the browser's arrangement of elements in the web page .
2.relative（ Relative positioning ）：
Positioning relative to its original position ! If it has not been set before position perhaps position The value is static, Then set the relative after , Elemental left,right,top,bottom Its position is moved according to its original position .
3.absolute（ Absolute positioning ）：
We should all know this well , That is, out of the document flow positioning . Position reference as its own parent , But your own parent must have position attribute （ Parent position Property is static Neither , Must be absolute,relative,fixed One of them ）. If the parent is not set position attribute , Will always look up to have position Property and is not static Ancestor elements of , until body element .
4.absolute（ Absolute positioning
）： We should all know this well , That is, out of the document flow positioning . Position reference as its own parent , But your own parent must have position attribute （ Parent position Property is static Neither , Must be absolute,relative,fixed One of them ）. If the parent is not set position attribute , Will always look up to have position Property and is not static Ancestor elements of , until body element .
5.fixed（ Fixed positioning ）
： This attribute is positioned relative to the browser window , Move your slider anyway , It is fixed in a fixed position relative to the browser window , In addition, we should pay attention to it , Its sibling elements will ignore its existence in the arrangement of positions . It's for this time top,bottom,left,right It is also relative to the browser window .
6.position:sticky Viscous positioning
position:
sticky yes CSS3 A new attribute , It can be said that it is relative positioning relative And fixed positioning fixed The combination of , It is mainly used for scroll On the monitoring of events , In short , During scrolling , The distance between an element and its parent element reaches sticky When viscous positioning is required ( such as ：top:
40px;)position: sticky The effect is equivalent to fixed location , Fixed in place （ such as ： Fixed above the distance screen 40px place ）
3.css Three ways of positioning
/* The first one
Parent element ：position: relative;
Subelement ：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
*/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
*{margin:0;padding:0;} /* The first one */ .box{ width: 400px; height: 400px;
background-color: blanchedalmond; margin-top: 50px; margin-left: 50px;
position: relative; } .box .center{ width: 150px; height: 150px;
background-color: blueviolet; position: absolute; top: 0; left: 0; bottom: 0;
right: 0; margin: auto; } /* The first one */ </style> </head> <body> <!-- The first one --> <div
class="box"> <div class="center"> </div> </div> </body> </html>
/* The second kind */
Parent element ：position: relative;
Subelement ：position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
*{margin:0;padding:0;} /* The second kind */ .box2{ width: 400px; height: 400px;
background-color: coral; margin-top: 50px; margin-left: 50px; position:
relative; } .center2{ width: 150px; height: 150px; background-color: #FFEBCD;
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } /*
The second kind */ </style> </head> <body> <!-- The first one --> <div class="box"> <div
class="center"> </div> </div> <!-- The second kind --> <div class="box2"> <div
class="center2"> </div> </div> </body> </html>
The third kind
Parent element ： Elastic box
display: flex;
justify-content: center;
align-items: center;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
*{margin:0;padding:0;} /* The third kind */ .box3{ width: 400px; height: 400px;
background-color: skyblue; margin-top: 50px; margin-left: 50px; display: flex;
justify-content: center; align-items: center; } .center3{ width: 150px; height:
150px; background-color: orangered; } /* The third kind */ </style> </head> <body> <!--
The third kind --> <div class="box3"> <div class="center3"> </div> </div> <!-- The third kind -->
</body> </html>
Technology