当前位置：网站首页>Horizontal layout, vertical layout, shadows and fillets

Horizontal layout, vertical layout, shadows and fillets

2022-07-22 06:21:00 【Dummerd】

Catalog

One . Horizontal layout

Two . Vertical layout

3、 ... and . Shadows and fillets

One . Horizontal layout

  horizontal direction

  margin-left border-left padding-left width padding-right border-right  margin-right

  Browser rules   The sum of the seven values in the horizontal direction must be equal to the width of the parent element content area

 0  5px  50px  100px  50px  5px  0    ==500   ?

  Like the above , If not equal to , The browser will adjust this by itself 7 It's worth , Let our equation hold , This process is called overconstraint

How to adjust the browser ？

1、 If 7 None of the values are set auto, Then the browser will adjust margin-right

 0  5px  50px  100px  50px  5px  290px    ==500

2、7 Among the values are 3 Values can be set auto   margin-left    width   margin-right

   1 individual auto, The other two values are fixed

      The browser will adjust this auto  

   2 individual auto, other 1 Values are fixed

     margin-left  width       adjustment width

     width  margin-right     adjustment width

     margin-left  margin-right   meanwhile margin-left margin-right, Each half  

   3 individual auto

      margin-left  width  margin-right   adjustment width

Two . Vertical layout 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 400px;
        height: 400px;
        border: 3px solid red;
      }
      /*  A block element   The width defaults to the width of the parent element 100%, Height is supported by content  */
      .box2 {
        width: 200px;
        height: 200px;
        background-color: palegreen;
        overflow: auto;
      }
      /* overflow Property can set the content of the overflow 
           Optional value 
            visible   The default value is    The content is displayed normally 
            hidden   Cut out superfluous content 
            scroll    Double sided scroll bars appear 
      */
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
         It is because of death that only three people have been cast , Want to hate learning , Answer Jian Han yuezi's lost plot. He has been three Chinese me in a row , Gu Yu is not interested in the weather , When Li was killed, his desire to die in vain was called frugality. He used virtue to make him beautiful , Juan Ming's death is a false beginning. Tianlun is like Jiang Ming's pen, and its Qi qiniu , Gao guiran Qin Tu is one of the empress dowagers who buried you , Or no brother died , Tongsi mingchou and Hong Xin said that you reported that you lost your origin , It's going to be cold after being full , Seeing Li Da go down and get light, I'll be myself .
         Also, all the teeth fall into the report , The holy second of peace and water , Nu Rui naturally stared .  Also, all the teeth fall into the report , The holy second of peace and water , Nu Rui naturally stared .
      </div>
    </div>
  </body>
</html>

3、 ... and . Shadows and fillets

 box-shadow

              Used to set the shadow effect of an element , It will not affect the page layout

                The first value is ： Horizontal offset   just -> Left   negative -> Right

                Second value ： Vertical offset   just -> Next   negative -> On

                Third values ： Blur radius   The default value is 0px

                Fourth values ： Color     The default value is the background color of the box 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #f60;
        margin: 50px auto;
        box-shadow:2px 2px 15px rgba(0, 0, 0, 0.5);
        /*  Knowledge point 1:
          box-shadow 
              Used to set the shadow effect of an element , It will not affect the page layout  
                 The first value is ： Horizontal offset    just -> Left    negative -> Right 
                 Second value ： Vertical offset    just -> Next    negative -> On 
                 Third values ： Blur radius    The default value is 0px
                 Fourth values ： Color       The default value is the background color of the box 
        */
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
        /*    border-radius: ;   Set the fillet effect  
        border-radius:50%; Set circle 
        */
      }
    </style>
  </head>
  <body>
    <!--  Shadow example  -->
    <div class="box1"></div>
    <!--  Fillet example  -->
    <div class="box2"></div>
    
  </body>
</html>

原网站

版权声明
本文为[Dummerd]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211426211673.html

边栏推荐

猜你喜欢

随机推荐