2019-03-24弹性盒子

一、弹性盒子布局

CSS3自动实现浏览器兼容前缀插件：autoprefixer

参考地址：http://www.bbsxiaomi.com/software/sublime/33.html

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

构成：弹性容器 + 弹性子元素。

1．弹性容器的属性

1) display：flex；

设置容器的显示类型为弹性容器。（一般设置在应用标签元素的父级。）

2) flex-directiuon: row | row-reverse | column | column-reverse;

改变弹性子元素在弹性容器中的排列方向。

3) justify-content：flex-start | flex-end | center | space-between | space-around

弹性子元素在弹性容器主轴上的对其方式。

4) align-items： flex-start | flex-end | center | baseline | stretch

弹性子元素在侧轴上的对其方式。

5) flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;

子元素的换行。

注意：wrap-reverse 会将整个主轴与侧轴翻转。

6) flex-flow: flex-direction flex-wrap;

flex-flow: row nowrap;

2．弹性子元素的属性

1) order： number ；

可以是负数，默认为0.数值越小越靠前。注意翻转的排列方式刚好相反。

2) 完美居中操作

使用margin的auto可以设置弹性子元素的居中，上下左右。

margin ：上下左右;

margin-right: auto ; 将剩余的空白放置在这个元素的右边，默认

margin-left :auto ；将剩余的空白放置在元素的左边。

3) align-self:auto | flex-start | flex-end | center | baseline | stretch

属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

用于单独调整弹性子元素的排列方式。

4) flex:auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

flex 属性用于指定弹性子元素如何分配空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

auto: 计算值为 1 1 auto

initial: 计算值为 0 1 auto

none：计算值为 0 0 auto

inherit：从父元素继承

5) flex-grow: 数值

该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。

6) flex-basis: 宽度

该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。

7) flex-strink:数值

该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。

二、 CSS居中的方式

1．水平居中

1) 内联元素的居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

2) 块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

3) 多块级元素水平居中

①　利用inline-block

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

②　利用display: flex

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。

3．垂直居中

1) 单行内联(inline-)元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

2) 多行内联元素垂直居中

①　利用表格布局

利用表布局的vertical-align: middle可以实现子元素的垂直居中。

③　flex布局

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。再使用justify-content：center设置居中。

④　利用“精灵元素”

利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

[javascript:void(0);](javascript:void(0);)

 1 .ghost-center {

 2     position: relative;

 3 }

 4 .ghost-center::before {

 5     content: " ";

 6     display: inline-block;

 7     height: 100%;

 8     width: 1%;

 9     vertical-align: middle;

10 }

11 .ghost-center p {

12     display: inline-block;

13     vertical-align: middle;

14     width: 20rem;

15 }

3) 块级元素垂直居中

①　固定高度的块级元素

我们知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

1 .parent {

2   position: relative;

3 }

4 .child {

5   position: absolute;

6   top: 50%;

7   height: 100px;

8   margin-top: -50px;

9 }

②　未知高度的块级元素

当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

.parent {

2     position: relative;

3 }

4 .child {

5     position: absolute;

6     top: 50%;

7     transform: translateY(-50%);

8 }

4．水平垂直居中

1) 固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。

.parent {

 2     position: relative;

 3 }

 4 .child {

 5     width: 300px;

 6     height: 100px;

 7     padding: 20px;

 8     position: absolute;

 9     top: 50%;

10     left: 50%;

11     margin: -70px 0 0 -170px;

12 }

2) 未知宽高元素水平垂直居中

.parent {

2     position: relative;

3 }

4 .child {

5     position: absolute;

6     top: 50%;

7     left: 50%;

8     transform: translate(-50%, -50%);

9 }

3) 利用flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

4) 利用grid布局

利用grid实现水平垂直居中，兼容性较差，不推荐。

5) 屏幕上水平垂直居中

屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

.outer {

 2     display: table;

 3     position: absolute;

 4     height: 100%;

 5     width: 100%;

 6 }

 7

 8 .middle {

 9     display: table-cell;

10     vertical-align: middle;

11 }

12

13 .inner {

14     margin-left: auto;

15     margin-right: auto;

16     width: 400px;

17 }

三、多列布局

1．column-count

column-count 属性指定了需要分割的列数

2．column-gap

column-gap 属性指定了列与列间的间隙

3．column-rule

column-rule 属性是 column-rule-* 所有属性的简写.

column-rule: 1px solid lightblue;

1) column-rule-style

column-rule-style 属性指定了列与列间的边框样式：

2) column-rule-color

column-rule-color 属性指定了列与列的边框颜色：

3) column-rule-width

column-rule-color 属性指定了列与列的边框宽度：

4．column-width

column-width 属性指定了列的宽度。

5．column-span

子元素可以设置跨越多少个列。

四、响应式布局

1．什么是响应式

2．响应式的使用场景

[图片上传失败...(image-30a732-1553589794317)]

3．常见布局

1) 静态布局

传统web布局。固定大小，在屏幕大小进行调整是，出现滚动条，使用滚动条实现页面的浏览。

不管设备的尺寸大小是多少，都会按照原来设置的大小显示。

对于移动端布局来说使用一个单独的布局，比如m站或者wap站。

2) 自适应布局

分别为不同的屏幕分辨率设置布局，布局切换时页面元素发生变化，但是在每一个布局中，页面元素不随着窗口大小的调整发生变化。

可以将自适应布局看成是静态布局的一个特例。元素大小不变，位置自动适应变化。主要是浮动设计。

3) 流式布局

流式布局也叫作百分比布局。元素的大小会随着窗口的大小进行调整，但是元素的位置不会发生变化。

主要的问题是如果设计的页面很大，那么在小屏幕设备上要显示就会出现变形问题。

4) 伸缩布局

伸缩盒子或者弹性盒子布局，CSS3提供的一种全新布局方式。IE不支持。仅使用在移动端布局。

5) 响应式布局

分别为不同的屏幕分辨率定义布局，同时在每一个布局中要是用流式布局的理念，也就是元素的宽度会随着窗口的大小进行调整。

可以吧响应式布局看成是流式布局与自适应布局的结合。

优点：针对不同的设备，都能够完美的展示效果。

缺点：开发者需要多套设备的设计样式，维护开发成本高。

4．设备类型

媒体的类型：

手机、电脑、ipad、手表、电视、眼镜

打印机

iReader、 kindle

CSS媒体的分类

图片1.png

5．CSS引用方式

1) link

2) @import

在style标签或者CSS文件中使用

@import url() screen；

3) @media