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;
   }

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

盒模型的大小计算

盒模型的定位属性position

CSS中box-sizing属性的作用

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

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

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

使用浮动实现三列布局

圣杯布局

相关文章