css-常用布局方法01-盒模型

一、盒模型[Box Model]

所有HTML元素可以看作盒子，它包括：边距、边框、填充和实际内容

1. 不同部分说明

• margin：外边距
• border：边框
• padding：内边距
• content：内容区域，宽度和高度只对内容生效，设置的宽度和高度，并不是盒子占用的空间，一个盒子的占用空间=content + padding+border

2. display / position

• 确定元素的显示类型-display

  • block/inline/inline-block

    // block：指定对象为块元素。
    // inline：指定对象为内联元素。不可以设置宽、高的
    // inline-block：指定对象为内联块元素，可以设置对齐方式。
    <div class="block">
    block
    </div>
    <div class="inline">inline</div>
    <div class="inline">inline</div>
    <div class="inline-block">inline-block</div>
    
    .block{
      height:200px;
      background:red;
    }
    .inline{
      display: inline;
      background: green;
    }
    .inline-block{
      display: inline-block;
      width:200px;
      height:100px;
      background:blue;
    }
    

    

• 确定元素的位置-position

  • static/relative/absolute/fixed

    // 默认情况下就是static，表示一个静态布局，按照文档流一个一个去布局
    // relative：相对定位，relative的偏移是相对于元素本身来说的。不会改变本身占据的空间，不会因为偏移改变原来的的计算。
    // absolute：绝对定位。一旦设置绝对定位，就脱离的文档流，偏移相对最近的父级relative或者absolute定位的
    // fixed：相对于可视区域[viewport]的偏移,也是脱离文档流的。
    // z-index：层级，谁的数值高谁覆盖。relative、absolute、fixed可以设置z-index，一般是弹出框，遮照层等场景
    

    <div class="p1">
    	position:static
    </div>
    <div class="p2">
    	position:relative
    </div>
    <div class="p3">
    	position:absolute
    	<div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow"></div>
    </div>
    <div class="p4">
    	position:fixed;
    </div>
    <div class="p5">
    	p5
    </div>
    
    div{
      background:red;
      width:100px;
      height:100px;
    }
    .p2{
      position: relative;
      left:10px;
      top:-10px;
      background:blue;
    }
    .p3{
      position: absolute;
      left:80px;
      top:30px;
      background: green;
    }
    .p4{
      position: fixed;
      left:0;
      bottom:10px;
    }