HTML+CSS Knowledge Points-Week 3.md

1. Positioning

Layout method: document flow, floating, layer layout (positioning)

Three kinds of positioning: relative positioning, absolute positioning, fixed positioning

The level setting of the positioning element: The element with positioning can be adjusted through the z-index attribute. The default value is 0. The larger the number, the higher the level. The number is the same. The level is related to the order of the tags. The lower the tag, the higher the level. high

1. Relative positioning (the son is no longer the father)

position:relative;
Does not leave the document flow, and retains its original position in the document
Offset reference position: the original position of the element itself in the document flow

2. Absolute positioning

position:absolute;
Break out of the document flow, do not retain the original position in the document
Offset reference position (positioning parent): An ancestor element with position attribute closest to the absolutely positioned element. If there is no such element, it is positioned with reference to the body

3. Fixed positioning

position:fixed;
Fixed positioning elements will be separated from the document flow, and the original position in the document flow will not be retained
Offset reference position: the viewing area of the browser

定位偏移属性偏移属性：

   left  :   正右,负左

   right ：  正左,负右

   top   ：  正下,负上

   bottom：  正上,负下

left/top和right/bottom通常使用一个，如果同时使用left/top生效

脱离文档流的元素不会自动占满一行，宽度默认是由内容撑开

4. Static positioning

position:static;
No positioning, the offset attribute is invalid (left/right/top/bottom)
The level (z-index) is also invalid

Second, fillet

1. Shorthand attributes

   border-radius:10px;  四个角圆角半径统一

   border-radius:10px 20px;  左上和右下   右上和左下

   border-radius:10px 20px 30px;  左上   右上和左下   右下

   border-radius:10px 20px 30px 40px;  左上   右上   右下  左下  

   border-radius:50%;---是个圆

2. Decomposition attributes

   border-top-left-radius: 20px;

   border-top-right-radius: 40px;

   border-bottom-left-radius: 60px;

   border-bottom-right-radius: 80px;

Three, deformation transform

   简写属性
   transform:rotate(-30deg) scale(0.5,2);

1. Rotate

   transform:rotate(30deg); 正数顺时针，负数逆时针

2. Zoom

   transform:scale(n);  水平和垂直同时缩放 n 取值 0-1之间缩小 , n>1 就是放大
   
   transform:scale(n-x,n-y);  n-x：水平方向的缩放值,n-y垂直缩放值

Four, key frame animation

1. Define the key frames of the animation

   @keyframes move-动画名称{
        0%{}
        
        25%{}

        50%{}

        75%{}

        100%{}
   }

2. Call the animation

   简写属性
   animation: move 3s linear infinite alternate;

   动画属性
   animation: animation-name animation-duration animation-iteration-count  animation-timing-function  animation-delay  animation-direction;

animation-name: the name of the called animation
animation-duration: the time required for the entire animation process s (seconds)/ms (milliseconds)
animation-iteration-count: the number of times the animation is executed n/infinite (unlimited times)
animation-timing-function: Animation speed curve
- ease slow-fast-slow
- linear uniform speed
- ease-in slow-fast
- ease-out fast-slow
- ease-in-out slow-fast-slow
- cubic-bezier(.08,.73,.42,.93) Bezier curve https://cubic-bezier.com/
animation-delay: animation delay time s/ms
animation-direction: the direction of the animation alternate (reverse in turn)
animation-fill-mode: forwards at the end of the animation (stop at the end)

Five, transition animation

Transition use scene: generally used for the smooth transition effect when the element is in the normal state and the mouse in state (:hover) property changes

   动画属性
   transition:transition-property transition-duration transition-timing-function transition-delay;

transition-property: transition property name, all (all changed properties are transitioned)
transition-duration: transition time s/ms
transition-timing-function: transition speed curve, the value is the same as the key frame animation
transition-delay: transition delay time s/ms

   多个属性过渡
   transition: width 2s linear,height 4s ease,...;

Usage example

情况1
   .box{
        width: 100px;
        transition:all 0.5s linear;<!-- 鼠标脱离时的过渡 -->
   }
   .box:hover{
        width: 200px;
        transition:all 2s linear;  <!-- 鼠标悬停时的过渡 -->
   }
情况2
   .box{
        width: 100px;
            <!-- 鼠标脱离时没有过渡效果 -->
   }
   .box:hover{
        width: 200px;
        transition:all 2s linear;  <!-- 鼠标悬停时的过渡 -->
   }

情况3
   .box{
        width: 100px;
        transition:all 0.5s linear;<!-- 鼠标悬停和脱离时都有过渡，并且效果相同 -->
   }
   .box:hover{
        width: 200px;
   }

The difference between key frame animation and transition animation

Keyframe animation	Transition animation
Animation can be set to multiple states	The animation has only two states (start and end)
Can be run multiple times (unlimited times)	Trigger once and run once
Cannot be executed automatically, need to be triggered by pseudo-class	Will not run repeatedly

Six, shadow

1. Box shadow

   属性
   box-shadow:x-shadow y-shadow blur spread color inset;

   - x-shadow : 必需，水平阴影位置 ，正数向右偏移，负数向左偏移

   - y-shadow : 必需，垂直阴影位置 ，正数向下偏移，负数向上偏移

   - blur :  可选，阴影的模糊距离

   - spread: 可选，阴影的扩展尺寸

   - color:  可选，阴影的颜色

   - inset:  可选，不设置表示外阴影，设置inset表示内阴影 

   多组阴影
   box-shadow:x-shadow y-shadow blur spread color inset,x-shadow y-shadow blur spread color inset, ... ;

2. Text shadow

   text-shadow:x-shadow y-shadow blur color;

   - x-shadow : 必需，水平阴影位置 ，正数向右偏移，负数向左偏移

   - y-shadow : 必需，垂直阴影位置 ，正数向下偏移，负数向上偏移

   - blur: 可选，阴影的模糊距离

   - color:可选，阴影的颜色 默认和文字颜色相同

   多组阴影：x-shadow y-shadow blur color,x-shadow y-shadow blur color,...;

Seven, triangles and arrows

1. Small triangle

Implementation idea: set the width and height of the box to 0, keep the color of one border, and set the other borders to be transparent

   .box{
       width: 0px;
       height: 0px;
       border: 50px solid;
       border-color: red transparent transparent;
    }

2. Small arrow

Realization idea: Realize two triangles, make the two triangles partially overlap by positioning, and set the color of the previous triangle to the same color as the background

<div class="arrow1"></div>
   .arrow1{
           position: relative;
           width: 0px;
           height: 0;
           border: 50px solid;
           border-color: red transparent transparent;
           margin-top: 10px;
    }
   .arrow1::after{
           position: absolute;
           left: -50px;
           top: -55px;
           content: '';
           width: 0px;
           height: 0px;
           border: 50px solid;
           border-color: #fff transparent transparent;
   }

8. Transparent and compatible

1. Color in rgba() mode: You can set the color for text and background (not compatible with lower versions of IE)

When setting the background transparent for the element, it will not affect the content inside

2. opacity: 0-1; 0 completely transparent, 1 opaque, 0.X semi-transparent (not compatible with lower IE version)

The overall element is transparent, the element itself and the content inside are all transparent

3. filter:alpha(opacity=50) IE low version browser special transparent filter, the effect is equivalent to the opacity attribute, 0 means completely transparent, 100 means opaque

Nine, centering skills

1. The parent size is unknown, and the child element size is known

   .outer{
        position:relative;  /*父元素相对定位*/
   }
   .inner{
        width:300px;
        height:200px;
        position:absolute;  /* 子元素绝对定位*/
        left:50%;   /*盒子偏右*/
        top:50%;    /*盒子偏下*/
        margin-left:-150px;   /* 设置为子元素宽度的一半（负值），往左移*/
        margin-top:-100px;  /* 设置为子元素高度的一半（负值），往上移*/
  }

2. Both parent size and child element size can be unknown

  .outer{
        position:relative;  /*父元素相对定位*/
  }
  .inner{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        width:300px;
        height:200px;
  }

10. Floating and positioning comparison