「场景学习法」学习Css竟然可以这么简单，这些年我干嘛去了

Css的学习说难也难，说简单也简单，当然这也是取决于学习方式。a总聊前端给大家分享自己总结的学习方式「场景学习法」，方法很简单，当你学会了「场景学习法」，我相信你也可以无比轻松的学习Css。「场景学习法」的核心在于：你能想到的应用方法有多少种，从而转变为最常用的一种。get不到点？那是当然，专业的嘛！来来来，举个栗子，用大白话说。

图中的列表是横向并排展示的，这种方式很常见吧！那么你会蹦出几种方法？这种列表对于有经验的人来说至少有5~6种方法，下面说一下比较常见的4种方法：

flex弹性布局

父元素设置display: flex，子级元素自动并排。现在应该是用的比较多，如果要使子级换行，还得加上flex-wrap: wrap;

css 复制代码

```
div {
    display: flex;
    flex-wrap: wrap;
}
```

float浮动

每个子级元素设置float:left，同样可以并排。使用float有很大的坑，就是父级的高度不会被撑，所以要给父级元素清除浮动。

css 复制代码

```
div {
    clear: both;
    li {
        float: left;
    }
}
```

回想IE浏览器时代，在flex布局还没出来前基本都是用float，为了兼容IE6、7、8、9、10，搞得我们不要的不要的，那是直逼自废修为的地步!真的太惨了。

inline-block

是将子级元素转为"内联"和"块级"两个状态，缺点在于两个子元素之间会产生空隙。

css 复制代码

```
div {
    display: inline-block;
}
```

inline-flex

是将子级元素转为"内联"和"弹性盒子"两个状态，与flex实现的效果是一致的。

css 复制代码

```
div {
    display: inline-flex;
}
```

flex和inline-flex两者的区别在于：
前者父元素的尺寸不跟随子元素尺寸动态调整，不设置时默认是100%；
后者会使父元素尺寸跟随子元素的尺寸动态调整；

左图的底部菜单导航、右图按钮的数字，能不能一瞬间get到用什么属性不？

fixed

左图的菜单导航无论页面如何上下滚动都是居于底部的，也就是居于可视区窗口定位，不用想太多，直接用position:fixed；

导航的5个菜单是不是也是并排的，当然也是"列表"的一种，使用display: flex就可以。
css 复制代码
```
div {
    display: flex;
    position: fixed;
}
```
absolute

按钮的数字是在元素上的，也就是居于父元素的定位而定位，直接使用position:absolute；
css 复制代码
```
div {
    position: absolute;
}
```
align-items

按钮的图标和文字是并排的，想到啥了？用display:flex就完了，再结合align-items:center使子元素达到水平居中；
css 复制代码
```
div {
    display: flex;
    align-items: center;
}
```