一、盒子模型的介绍
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属性
display属性值定义了元素的显示情况，我们初步了解前4个常用值：
| 值 | 描述 |
|---|---|
| none | 此元素不被显示 |
| block | 此元素将显示为块级元素，前后会带有换行符 |
| inline | 默认，此元素会被显示为内联元素，元素前后没有换行符 |
| inline-block | 行内块元素 |
三、定位
定位是指把标签或者元素放在页面的指定位置；当我们掌握了定位的技巧后，页面内元素的摆放就会变得特别得心应手。
定位使用position属性，属性值有：
| 属性值 | 类型 | 备注 |
|---|---|---|
| static | 静态定位 | 默认定位方式 |
| relative | 相对定位 | |
| absolute | 绝对定位 | |
| fixed | 固定定位 |
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定位；
5.z-index属性
布局可以看成是多层的，z-index的值越大，位置就越靠上。
默认情况下，第一个布局的元素的index值为0,其子元素的z-index的值是1，所以子元素会显示在父元素的上面。如果我们把子元素的z-index的值设为-1,这样子元素就显示在父元素的下面了。
网友评论