CSS盒模型及常规页面布局

盒模型的大小与位置的设置与计算

盒模型的大小计算

• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框(border)、内边距(padding)、内容(content)。
• 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
• 当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。完整大小的元素，还必须添加内边距，边框和边距。

  div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
  }

  盒模型的大小为：
  300px(宽)+50px(左+右填充)+50px(左+右边框)+50px(左+右边距)=450px

盒模型的定位属性position

position 属性指定了元素的定位类型。

• static：HTML元素的默认值，即没有定位，遵循正常的文档流对象。
• fixed：元素的位置相对于浏览器窗口是固定位置。
• relative：相对定位元素的定位是相对其正常位置。
• absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于HTML

CSS中box-sizing属性的作用

• content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。box-sizing默认值为content-box，可以不写。
• border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义border和padding也不会改变对象的实际宽度。

  div{
    width:100%;
    height:100px;
    border:10px solid grey;
    box-sizing:border-box;
    background:red;
  }

  不设置box-sizing与设置box-sizing对比

CSS中绝对定位、相对定位、固定定位的区别

• absolute：绝对定位是相对于元素最近的已定位的父级元素（即是设置了绝对定位或者相对定位的父级元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

.content.box1 {
        width: 300px;
        height: 200px;
        background-color: lightblue;
        position: absolute;
        left: 30px;
        top: 20px;
      }

• relative：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上，然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。

      .content.box2 {
        width: 300px;
        height: 200px;
        background-color: lightgreen;
        position: relative;
        left: 30px;
        top: 20px;
      }

• fixed：固定定位是相对于浏览器窗口进行定位的，无论怎样移动你的滑动条，它都会固定在相对于浏览器窗口的固定位置，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对于浏览器窗口而言的。

      .content.box2 {
        width: 300px;
        height: 200px;
        background-color: lightcoral;
        position: fixed;
        right: 30px;
        top: 20px;
      }

使用绝对定位实现水平居中及垂直居中

.content.box1 {
        width: 600px;
        height: 400px;
        background-color: lightblue;
        position: relative;
      }
.content.box2 {
        width: 200px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }

使用绝对定位实现两列布局

      .content {
        width: 1000px;
        position: relative;
        margin: auto;
      }
      .content.box1 {
        width: 200px;
        height: 400px;
        background-color: lightblue;
        position: absolute;
        top: 10px;
        left: 0;
      }
      .content.box2 {
        width: 800px;
        height: 400px;
        background-color: yellow;
        position: absolute;
        top: 10px;
        right: 0;
      }

使用浮动实现三列布局

      .content {
        width: 1000px;
        position: relative;
        margin: auto;
      }
      .content.box1 {
        width: 200px;
        height: 400px;
        background-color: lightblue;
        float: left;
      }
      .content.box2 {
        width: 600px;
        height: 400px;
        background-color: yellow;
        float: left;
      }
      .content.box3 {
        width: 200px;
        height: 400px;
        background-color: lightcoral;
        float: right;
      }

圣杯布局

• 内容区必须优先渲染，DOM结构中将主体内容写到前面
• 内容区优先显示，并且自适应，所以默认宽度为100%
• 内容区、左侧、右侧全部为左浮动
• 通过给左/右两侧设置margin的负值使之回到容器中的正确位置
• 给容器设置左右两侧的padding，其值与左右两侧宽度相等，将左右两侧挤出来

• 再给左右两侧通过相对定位将它们最终放到正确位置上

     .content {
       width: 1000px;
       position: relative;
       margin: auto;
       float: left;
     }
     .content.box1 {
       width: 100%;
       height: 400px;
       background-color: lightblue;
       padding: 0 200px;
     }
     .content.box2 {
       width: 200px;
       height: 400px;
       background-color: yellow;
       margin-left: -100%;
       position: relative;
       left: -400px;
     }
     .content.box3 {
       width: 200px;
       height: 400px;
       background-color: lightcoral;
       margin-left: -200px;
       position: relative;
       left: 0;
     }