Positioning and decoration style

location

Positioning mode

Property value	Reference system	characteristic	remarks
static	position The default value of	nothing	Invalid set offset value
relative ( Relative positioning )	Oneself	Do not delist	It is usually used in the structure of son Jue father phase , The offset value is not needed at this time
absolute ( Absolute positioning )	Locate the nearest outer element or document ( Browser window )	Complete de labeling	Usually used with offset values
fixed ( Fixed position )	Browser viewable window	Complete de labeling	Usually used with offset values , Don't follow the scroll bar , Width and height should be set
sticky ( Viscous positioning )	Itself and browser window	Partial off standard	A scroll bar appears on the page , At least one offset value needs to be set

Be careful ：

1. Element is not set left、top、right、bottom When is invalid
2. left and top The priority ratio right and bottom Be taller
3. Positioning elements will become similar Inline block element Characteristics , Width and height can be set , Don't monopolize a line
4. position Valid for all elements
5. The level of positioning elements is the same , There is lamination , The rear positioning element will cover the front positioning element , Use Fixed position Need to pay attention to

Offset value

type	Value	remarks
left	px Or percentage	Usually and right Just one , When used at the same time left first
top	px Or percentage	Usually and bottom Only one of them , When used at the same time top first
right	px Or percentage
bottom	px Or percentage

z-indx Display hierarchy

Format ： z-index:  Integers ;

Be careful :

1. The larger the value , The higher the display order , z-index The default value of is 0, You can set negative
2. z-index Only with positioning can it take effect , By default , Positioned box Later generations live in

Application of positioning ( Vertical center )

/* The absolute positioning element is horizontally and vertically centered */
.box{
position: absolute;

/* Ideas 1:left:50%  top:50%  then  margin-left:- Half the width of itself ;  margin-top:- Half its height ; */

left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;


/*  Ideas 2: left:0;top:0;right:0;bottom:0;margin:auto; */

left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: pink;


/*  Ideas 3 left:50% top:50%  transform:translate(-50%,-50%) */

left: 50%;
top: 50%;
transform: translate(-50%, -50%);  
}

Decorative style

vertical-align Set vertical alignment

Application scenarios ： Applied to solve vertical problems Alignment issues for

Effective range : Valid only for inline elements or inline block elements

Property value :

• middle( Vertical center )
• top ( Align vertically up )
• bottom( Align vertically down )
• xxxpx( be based on baseline)
• Default Baseline alignment

Typical scenario : solve img No height is set outside div Bottom and img There is a gap at the bottom ( The reasons causing ： Baseline alignment )

<style>
     Solution 1:
    img {
        display:block;
    }
     Solution 2：
    img {
        vertical-align:middle;
    }
     Solution 3:
    div {
        font-size:0;
    }
    
</style>

<div class="father"><img src="./images/1.jpg" alt=""></div>

cursor Set the mouse cursor

Common values :

• default  arrow
• pointer  Little hands
• text  edit
• move  Cross
• not-allowed  prohibit

border-radius Set rounded border

Setting mode :

/* Set four fillet radii   Are all 10px*/
border-radius:10px;
/* Set four fillet radii   All are wide 50%/ high 50%  When the box is square, it can realize circle   When it is rectangular, realize ellipse  */
border-radius:50%;
/* Set separately   Top left   The upper right   The lower right   The lower left ( Clockwise ) Four fillet radii   by  10px 20px 30px 40px*/
border-radius: 10px 20px 30px 40px;
/* Set the fillet radius of the upper left corner separately   by 10px*/
border-top-left-radius:20px;

Hidden elements

Show hidden ：

• overflow:hidden： Overflow hidden

  • overflow:auto： Scroll bar appears when overflow
  • overflow:scroll： There's always a scroll bar
  • overflow:visible： Overflow display ( Default state )

• opacity：1 Completely opaque 0 Completely transparent 0.5 translucent

Implicitly hide ：

• display:none： Pure Hidden , Does not occupy a space

• visibility:hidden ： Take up space

border-collapse Set up Border merge

table {border-collapse:collapse;/* Set border merging to realize thin line border */}

border Realize the small triangle

<style>
    .box {
      width: 0;
      height: 0;
      margin:50px auto;
      border:20px solid;
      /*  Realize the isosceles right triangle with the arrow to the right  */
      border-color: transparent transparent transparent pink;
    }
    .box1 {
      width: 0;
      height: 0;
      margin:50px auto;
      border-style:solid;
      border-width:0 150px 50px 150px;
        /*  Realize that the two right angle sides of the arrow to the right are 50 150 Right triangle of  */
      border-color:transparent transparent transparent red;
    }
</style>
<div class="box"></div>
<div class="box1"></div>