Css布局:盒子模型与定位

一、盒子模型的介绍

1. 盒子模型的属性

容器的width、height用来设定内容的高度和宽度 padding用来设定内边距，

padding：10px

表示四个方向都是10px; 等价于：

padding: 10px 10px 10px 10px  /* 顺序是:上右下左*/

margin用来设定外边距 border用来设定边框，主要有三个属性颜色、厚度、线类型；四个方向：top、bottom、left、right

2. 盒子模型的所占空间

盒子模型所占宽度的计算

所占宽度=width*2+padding*2+border-width*2+margin*2

默认情况下body标签的margin属性有8px,一般情况下，我们如果想布局盒子模型贴边的话，最好主动声明：

body {
    margin: 0px;
    padding:0px; 
}

3.盒子模型的排列方式

在默认情况下，所有的盒子都是纵向排列的，如果没有指明高度和宽度，盒子间有5px的空隙；横向排列必须要设置float属性；

二、盒子外边距

1. 外边距合并

外边距合并指的是，当两个垂直边距相遇时，它们将形成一个外边距。合并后外边距的高度等于两个发生合并的外边距的高度中的较大者；对于一个嵌套的盒子，父盒与子盒都设定margin属性时，会造成纵向无间距，我们的解决方案是：给父盒padding属性设置值，这样就会有纵向间隔了，但是会造成盒子被撑大。继续给父盒一个box-sizing属性，其值设为border-box，这样就又有了纵向间隔盒子又不会被撑大。

2. box-sizing属性

通常情况下我们给一个div盒子设置宽度与高度，实际上我们设置的是content的宽度与高度；而真正的盒子的尺寸是：

width=content.width+2*margin+2*border+2*padding
height=content.height+2*margin+2*border+2*padding

box-size有三个属性值： content-box表明width的值是内容的大小； border-box表明width的值是内容+padding+border； inhert表明是继承父元素。

3. display属性

三、定位

1. static定位

static定位也称为流式布局，默认为纵向；如果在同一级别布局中，有横向也有纵向，横向流动布局必须嵌套在纵向布局的容器里面才有意义。

2. 清除浮动

应用场景： 如果我们想一行铺三张图，总共铺两行。如果直接使用float参数左浮的话，结果会出现六张图都铺在第一行的情况。 解决方法： 解决这个问题的方法就是在每一行的开头都清除浮动，让每一行都重头开始排；清除浮动使用clear参数，值有三种： clear:left 清除左浮动 clear:right 清除右浮动 clear:both 清除左右浮动

如果在一个容器中实现了浮动(float)，建议在这个容器的内容展示结束后，直接清除浮动信息，不要给后续的元素传递浮动的信息。

建议:利用容器结尾处的伪元素来实现清除浮动，对伪元素进行清除浮动操作需要先转化为块元素再操作。

img_containter::after{
    /*1.构建块元素；2.清除浮动*/
    content: "";
    display: "block";
    clear: "both";
}

3.absolute绝对定位

绝对定位是按照父容器的绝对位置进行定位；在对top、bottom、left、right选取两个值对元素进行定位。

position: absolution;
left:20px;
top:20px

注意：在做绝对定位的时候，是按照父容器来进行定位，如果父容器的定位是static类型，直接忽略，继续往上找父容器，直到body为止。解决方法：给当前准备绝对定位的父容器设置相对定位relative但不设置具体值，这样，父容器的位置也不会受到影响，子容器也完成了绝对定位。

3.relative相对定位

relative:生成相对定位的元素，相对于其正常位置进行定位。相对定位是不脱离文件流的，即使元素布局的位置发生了改变，原始占的位置还在那。

4.fix固定定位

网页中，我们滚动屏幕位置固定不动的元素，我们使用的fix定位；

如果要让一个组件时刻保持在页面居中的位置，可以让left和top的值设为50%，然后再设置-50%的偏移量；

让组件显示在页面的最上方则可以食用z-index属性设置；

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);;
z-index: 9999;

5.z-index属性

布局可以看成是多层的，z-index的值越大，位置就越靠上。默认情况下，第一个布局的元素的index值为0,其子元素的z-index的值是1，所以子元素会显示在父元素的上面。如果我们把子元素的z-index的值设为-1,这样子元素就显示在父元素的下面了。