day-12-boxModelDisplayAndPosition.html

<!Doctype html>
<html>
    <head>
        <title>Box Model, Display and Position in CSS</title>
        <link rel="stylesheet" href="./day-12-boxModelDisplayAndPosition.css" />
    </head>
    <body>
        <!-- Box Model -->
        <!-- <h6>Hey this is an example with respect to Box Model</h6> -->

        <!-- Display in CSS -->
        <!-- 
            >> block
            >> inline
            >> inline-block
         -->

         <!-- Block: It will take entire width of ur screen -->
         <!-- <div>
            <div class="displayInCss1">Segment 1</div>
            <div class="displayInCss2">Segment 2</div>
         </div> -->


         <!-- Inline: It will take what space is required -->
         <!-- <div>
            <div class="displayInCss1">Segment 1 </div>
            <div class="displayInCss2">Segment 2 </div>
         </div> -->

         <!-- Inline-Block: Where it is a combination of both 1 n 2 -->
         <!-- <div>
            <div class="displayInCss1">Segment 1 </div>
            <div class="displayInCss2">Segment 2 </div>
         </div> -->


         <!-- Postion in CSS -->

         <!-- 
            >> static (default)
            >> relative
            >> absolute
            >> fixed
            >> sticky
          -->

          <!-- 
            Offset: top, right, bottom, left
           -->

           <h3>Hello this is an example wrt to positions in CSS</h3>

           <p>Hey its just a para over here ...</p>

           <span class="positionInCss">hello this is an example with respect to Position in CSS</span>


    </body>
</html>