第七、八天——布局

一、定位position：（position: static/relative/absolute/fixed）

1、static：静态定位，默认行为，有无没差。

2、relative：绝对定位，相对于原来的位置偏移，需设置top、bottom、left、right值在原位置的基础上，进行移动。

3、absolute：相对定位，如果设置相对定位，就是在整个页面上进行偏移，也可设置top、bottom、left、right值（布局一般多用此种方法），为避免多个页面堆积在一起，可用z-index：1设置为最上面的一层。

4、fixed：固定定位，是相对整个网页的，无论怎样滑动网页，都不会改变位置。

二、弹性盒子flex：（display: flex）

1、flex-direction：指定主轴方向，行（row，默认属性，排成一行）和列（column），反向行（row-reverse）和列（column-reverse）。

2、flex-wrap：换行，wrap。

3、flex-flow：以上两个合在一起的写法（flex-flow: row wrap;）。

4、flex：动态尺寸，比如说都设成flex: 1; 然后用  :nth-of-type(n+1) {  flex: 2;}设置成2个单位。

也可以指定最小值，如flex: 1 200px;

5、align-items：控制flex项在交叉轴的位置，stretch（默认，拉伸填充父容器）、center（在交叉轴垂直居中）。

6、justify-content：控制flex项在株洲的位置，flex-start（默认，在开始处）、flex-end（在结尾处）。

三、显示display：

1、block（默认，块级元素） ：新开始一行并且尽可能撑满容器，如<div>、 <p> 、 <form>以及<header >、 <footer >、 <section>。

2、 inline（默认，行内元素）：在段落中  包裹一些文字而不会打乱段落的布局，如<span>、<a>。

3、none（隐藏）：不会占据它本来应该显示的空间。

       区别：visibility: hidden; 会占据空间。

4、inline-block （在一行显示的块内元素）：比浮动（float）好用，因为float还需要clear：both。

四、其他的小知识点：

1、margin边距：

#main {  max-width: 600px;  margin: 0 auto;   }
使浏览器更好地处理小窗口的情况，同时，元素会占据所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

2、box-sizing盒模型：

box-sizing: border-box;     内边距和边框不再会增加它的宽度。

3、@media screen媒体查询：

@media screen and (min-width:600px) {  nav {    float: left;    width: 25%;  }  section {    margin-left: 25%;  }  }
@media screen and (max-width:599px) {  nav li {    display: inline;  }}

用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列

4、column多列布局；

.three-column {  padding: 1em;  column-count: 3;  column-gap: 1em;   }

五、布局（重点）：

（一）两列布局：

1、float：

（1）根据需要，设置左左浮动或者左右浮动  或  左浮动右用margin-left设置 或  左浮动+margin-right：20px右用overflow：auto+margin-left：0设置；

（2）父级元素没设置高度，要用overflow：hidden清除浮动因素产生的影响；

（3）用clear：both；清除相邻浮动元素的影响。

2、inline-block：

（1）需要知道其中一个盒子的宽度及两者距离，另一个的宽度用width: calc(100% - 宽度+距离px)

（2）为方便计算自适应盒子的宽度，其父元素要设置box-sizing: content-box;，同时两个盒子需设置box-sizing:border-box;

（3）设置vertical-align: top满足顶端对齐。

3、absolute：

（1）左用position：absolute；设置，右侧用margin-left设置。

（2）为避免两个高度不同，需设置父元素的高度min-height；

4、flex：

（1）父元素设置display: flex; align-items: flex-start;   避免列等高

（2）左右属性自动设置。

（二）三列布局：

1、position：

左右绝对定位position：absolute；，中间用margin：0 左/右的宽度；撑开距离。

左中右三个<div>可调。

2、margin负值：

中间要用双层标签，外层宽度100%显示，并且浮动，内层为真正内容，margin：0 左/右的宽度，设定左右宽度和向左浮动，左margin-left:-100%;，右margin-left:-宽度;。

<div>先中间再左右。

3、float：

左右分别向左向右浮动，中间margin：0 左/右的宽度。

<div>先左右再中间。

4、双飞翼布局：

左中右都float: left; ，然后中间width:100%;，左margin-left：-100%;， 右margin-left：-宽度;，中间加一个<div>然后margin：0 左右宽度。

<div>先中间再左右。

5、圣杯布局：

左中右都float: left; position: relative;  ，然后中间width:100%; ，包含三个的属性padding：0 左/右宽度， 左边margin-left:-100%;  left: -左边宽度;    右边right: -右边宽度。

<div>先中间再左右。