最精简 CSS 学习路线,十分钟全部掌握!让你轻松成为"大神"!
2023-04-18 15:47:31 时间
最近有网友私信我,学CSS总是觉得很难,跟着网站指南一个一个学,前面学后面忘;哪些是必须要用的也分不清。
这份最精简的CSS学习路线,十分钟让你快速掌握CSS;学完之后你就是前端小达人!
本指南罗列了日常中必须要掌握的CSS技巧以及CSS的一些周边框架,预处理器等;
掌握以下知识点,工作再也不用为CSS而发愁。
盒模型(Box Model)
在 CSS 中,在谈论设计和布局时使用术语“盒子模型”。
CSS 盒子模型本质上是一个包裹每个 HTML 元素的盒子。
它包括:边距、边框、填充和实际内容。下图说明了盒子模型:
呈现方式(Display)
"display" 属性指定是否/如何显示元素。
每个 HTML 元素都有一个默认显示值,具体取决于它是什么类型的元素。大多数元素的默认显示值为block或 inline。
位置(Position)
"position" 属性指定用于元素的定位方法的类型。
选择器(Selectors)
响应式设计(Responsive)
媒体查询可用于检查许多事情,例如:
- 视口的宽度和高度
- 设备的宽度和高度
- 方向(平板电脑/手机是横向还是纵向模式?)
- 解决
使用媒体查询是一种流行的技术,可以为台式机、笔记本电脑、平板电脑和手机(例如 iPhone 和 Android 手机)提供定制的样式表。
排版(Typography)
动画、过度 (Animations)
栅格(CSS Grid):
响应式网页设计 -网格视图
在设计网页时使用网格视图非常有帮助。它使在页面上放置元素变得更加容易。
响应式网格视图通常有 12 列,总宽度为 100%,并且会在您调整浏览器窗口大小时收缩和扩展。
框架( CSS Frameworks)
- Bootstrap
- Tailwindcss
预处理器(CSS Preprocessors)
- sass
- less
以上就是今天为大家分享的内容。
相关文章
- Mozilla 计划在全平台 Firefox 中启用 WebRender
- Windows 11添加支持一批老CPU!你的PC能升吗?最新检查工具免费下载
- 不满足硬件条件而被降级的 Windows11 测试用户不用慌:依然可接收更新,直到 225xx 版本
- 微软:虽然不受支持的 PC 设备可使用 Windows 11 ISO 镜像手动安装,但无法获得后续更新
- 微软送福利:用户不支持硬件也能安装Windows 11!这是方法
- TPM 2.0仍是必需的 微软修改Windows 11最低要求:不达标崩溃多52%
- 微软 Windows 11 升级是否支持 Mac 仍不明确,苹果电脑均没有 TPM 2.0
- 微软重新发布 Windows 11 兼容性检查工具,你的 PC 设备能否升级(附下载地址)
- 微软 Teams 将支持更多用户使用 Dynamic e911 呼叫定位功能
- 微软宣布 Teams停止对iOS 13及以下版本系统支持
- Windows 10 V1909说再见了:微软推最后一个更新
- 爆料:微软 Windows 11 Dev 预览版 22445 重大更新将至,还有 22000.168 Beta 版本
- 微软 Windows 10 Build 18363.1766 (KB5005103) 发布,版本 1909 最后的可选更新
- 功能退化?微软确认Windows 11任务栏将取消这些功能
- Windows 10要退休了!涉及13亿台设备,新一代操作系统将上位
- Windows 11官方版要来了 广泛推送在2022年初
- 微软 Defender for Endpoint macOS 版 101.40.84 已原生支持苹果 M1 Mac
- 微软:9月18日在Chrome OS上结束对Office Android应用的支持
- Windows 11到底什么时候发布?Windows 11正式版爆料
- Windows 11发布前的硬菜!Windows 10 21H2大版本更新曝光