「场景学习法」学习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;
    }

是不是又知道了fixed、absolute、align-items: center的用法了,没有刻意去想去背吧!感觉有木有?

用了两个场景讲解,大家应该能够受到「场景学习法」的奇妙之处吧。当你知道了某个场景的应用,下次再遇到这种类型的,基本上不用思考太多,直接用就是了。经过「场景学习法」学习,已经不再需要刻意的去记Css属性的作用。

重要吗?这是肯定的,尤其是往中级、高级发展的伙伴,真的是一道坎。为什么这么说?

你想想,团队开发UI组件库,你负责一部分的组件效果渲染,如果不会Css,搞得出来吗?而且UI组件库可不能用普通写法,可能会涉及到OOPCss。

「场景学习法」仅是其中一种方式,a总聊前端总结了很多学习Css的技巧,如:颗粒度分析法、标签分析法、结构分析法、布局分析法等等;前面提到的两个场景学习法仅是冰山一角,也是最容易理解的,只有接触更多的应用场景才能了解更多的Css属性。a总聊前端为大家准备好了非常多的场景,如下图

送福利,免费获取资料加微信或关注公众号哦

a总聊前端会尽力为你解答任何有关CSS的问题

帮你成长,学习更多的经验

**要了解更多有关Css的内容,关注公众号:a总聊前端**

我是a总聊前端,团队技术负责人,自由撰稿人,善于交心,乐于分享。

专注分享

【技术知识 + 经验 + 个人成长】干货

欢迎关注

相关推荐
前端_yu小白5 分钟前
leaflet实现点位聚合
前端·javascript
懒羊羊我小弟5 分钟前
Webpack 基础入门
前端·webpack·rust·node.js·es6
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke9 小时前
小程序立体轮播
前端·css·小程序
一 乐9 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟9 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss