响应式布局

一、实现弹性布局的方法：

1.浮动+百分比

好处：网页内容宽度自适应

多设备都适用

2.flex弹性盒模型：该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用空间。

二、Flex布局的功能：

1.在屏幕和浏览器窗口大小发生改变时，可以灵活的调整布局。

2.控制元素在页面的布局方向。

3.按照不同于DOM所指定的排序方式对屏幕上的元素进行重新排序。

三、Flex布局的优势：

1.可以让盒子里面的元素排在一行

2.盒子里面的元素高度相同。

四、Flex的语法：

在父元素中设置display:flex;

五、flex：伸缩性：

1.语法：flex:值; eg: flex:1;

2.作用：让伸缩项目的宽度和高度自动填充伸缩容器额外的空间。

六、flex-direction:伸缩流方向：

1.写代码的位置：在父元素的css中写，语法为：flex-direction:row(row-reverse)(column)(column-reverse)

2.row:子元素从左右排序

3.row-reverse:子元素从右到左排序

4.column：子元素从上到下排序

5.column-reverse:子元素从下到上排序.

七、伸缩换行：

1.在父元素中加flex-wrap:wrap;属性

2.wrap:换行，从上到下排序

3.wrap-reverse:换行，从下到上排序。

4.nowrap:默认值，不换行。

八、主轴对齐：

1.语法：justify-content:center;

2.center：居中对齐

3.flex-start:左对齐

4.flex-end:右对齐

5.space-around:平均对齐

6.space-between:两端对齐

九、侧轴对齐：

1.语法：algin-items:center;

3.flex-start:上对齐

4.flex-end:下对齐

十、媒体类型：

1.all:所有设备

2.print:打印用纸或打印预览视图

3.screen:电脑显示器

4.引入方式：

（1）@media 媒体类型{

css样式

}

（2）

十一、媒体特性：

1.是c3对媒体类型的增强版

2.可以将媒体特性看成：

媒体类型（判断条件）+css（符合条件的样式规则）

3.语法：

@media 媒体类型 and 媒体特性{

十二、关键词：

1.and:同时满足这两者时生效

eg:@media all and (max-width:1000px){css代码}

2.only:指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

3.not:用来排除某种特定的媒体类型。