前端--盒子模型

目录

一、盒子模型分类

二、flex弹性盒布局

1.弹性盒子里的概念

2.形成弹性盒的语句

3.特点

4.设置主轴方向

5.设置子元素在主轴的对齐方式

6.设置子元素在侧轴的对齐方式

7.设置子元素是否换行

8.多行对齐方式

三、设置在子元素上的属性

1.align-self：控制自己在侧轴的对齐方式

2.order:排序

3.flex：设置子元素如何分配空间

4.flex-shrink：元素是否挤压

5.布局

---

一、盒子模型分类

标准盒子模型（W3C官方盒子）：width指的是内容的宽度

怪异盒子模型（IE盒子模型）：width指的是内容+内间距+边框的总和

  通过box-sizing控制盒子模型的分类

a)取值为content-box；=====标准盒子

b)取值为border-nox;=======怪异盒子

二、flex弹性盒布局

作用：就是控制子元素的布局

1.弹性盒子里的概念

a)容器====父元素（放子元素的盒子）

b)项目====子元素（所有弹性盒子里面的子元素）

2.形成弹性盒的语句

在父元素上写display：flex

3.特点

a)当父元素变成弹性盒子之后，子元素默认横向显示 （默认主轴x轴，另外一个叫做侧轴）

b)当父元素变成弹性盒子之后。子元素都能直接设置宽高

c)margin：auto是生效的。

d)如果子元素总宽度大于父元素，那么是不会超出父盒子，也不会自动换行，而是会挤压。

4.设置主轴方向

flex-direction: row | row-reverse | column | column-reverse;

a)row：横向、x轴(常用)===== 规定主轴方向在横向(默认值)

b)column：纵向、y轴（常用）====规定主轴方向在纵向

c)row-reverse：x轴反向排列====规定主轴方向在横向，项目反向排列

d)column-reverse：y轴反向排列==规定主轴方向在纵向，项目反向排列

5.设置子元素在主轴的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

a)flex-start：主轴的开始位置对其，没有间距

b)flex-end：主轴的结束位置对其，没有间距

c)center：居中==主轴的中间位置对其，没有间距

d)space-between：主轴上面两端对其，元素与元素之间的距离自动分配（常用）

元素与元素之间的距离是靠边元素与父元素之间的2倍

e)space-around:自动分配距离、左右间距都一样。(常用)

f)space-evenly:自动分配剩余空间，所有的距离都一样

6.设置子元素在侧轴的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch（默认值）;

a)flex-start：侧轴的开始位置

b)flex-end：侧轴的结束位置

c)center：侧轴的中间位置

d)baseline：和flex-start等效

e)stretch拉伸，要想让拉伸起作用，前提是子元素不能定宽度或者高度。

7.设置子元素是否换行

flex-wrap: nowrap | wrap | wrap-reverse;

a)nowrap：不换行

b)wrap：换行

c)wrap-reverse：反向换行

换行之后，行间距自动分配；行间距比较大

8.多行对齐方式

（对于单行子元素不起作用。）

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

a)flex-start：侧轴开始位置对其，没有行间距

b)flex-end：侧轴结束位置对其，没有行间距

c)center：侧轴中间位置对其，没有行间距

d)space-between：2端对齐，中间自动分配

e)space-around：自动分配间距

三、设置在子元素上的属性

1.align-self：控制自己在侧轴的对齐方式

a)auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"

b)stretch=======元素被拉伸以适应容器。（如果没有宽度、高度）

c)center========侧轴的居中位置

d)flex-start======侧轴的开始位置

e)flex-end=======侧轴的结束位置

f)baseline==========侧轴的基线位置，实现效果与开始位置一样

2.order:排序

控制子元素的排列顺序，数字越大越往后排，默认0，支持负数

3.flex：设置子元素如何分配空间

a)flex：1把剩余空间全部分配给当前元素

b)如果每一个子元素都有flex：1，那就是平均分配

c)如果有3个子元素：分别设置flex：1、flex：2、flex：3。那么就是把整个盒子分成了6份，第一个占1份，第二个占2份，第三个占3份。

4.flex-shrink：元素是否挤压

一般用于制作移动端的横向滚动。

a)0=====不挤压

b)1=====挤压【默认】

5.布局

1.双飞翼布局

2.圣杯布局