余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

前端狗的自我修养——CSS(一)(前端css笔记)

xiyangw 2022-11-25 11:31 36 浏览 0 评论

CSS——一种前端开发者必备的基础技术。大多数培训机构在讲解CSS的时候只是简单介绍几个属性的作用和用法,比如width、height,但是这样学会的CSS,真的学会了么?

从我本人的观点来看,显然是没有的。CSS的精髓,远不仅于此。我写下这篇文章,也是希望能有更多的前端开发者能够真正的学会CSS、驾驭CSS,领悟CSS的魅力。


Css 文字云


接下来,我们先从CSS的字面意义上了解一下它。CSS(Cascading Style Sheets),翻译过来即层叠样式表。OK,到这里,CSS的一个最明显的特征就出来了,层叠。到这里你可能会觉得不以为然,不就是层叠嘛,一层一层叠加不就完了。但实际上层叠的说到很多。样式覆盖规则,优先级,继承规则都是和层叠相关的特性。层叠也有利于CSS文件的组织,一个良好的、规范的CSS组织是优秀的前端架构应当具备的。良好的CSS设计范式会能够在开发过程中规避很多BUG,后期调试也十分简洁明了。

了解了CSS最明显的特征之后,就可以学习它具体的属性和用法了。但是这些属性纷繁复杂,所以我将这些属性按照用途划分,参照《CSS权威指南》,大致可以划分为以下几个方面:

一、基础的不能再基础了!盒子模型/内联盒子与块级盒子

二、给我你的手,选择器可以有

三、盒子有多大?也就脸那么大吧

四、真的是块级盒子吗?盒子本身的特性

五、代码闹鬼?八一八那些看不见的盒子

六、时尚界新宠,屏幕适配利器——弹性盒子/流式布局

七、纸片盒?CSS3的新成员

八、叠起来吧!层叠的乐趣

九、盒子外面的世界,我们的目标是星辰大海

以上大概就是CSS能做的事情啦,由于本人水平有限,如有疏漏,欢迎指正!

相关推荐

前后端分离 Vue + NodeJS(Koa) + MongoDB实践

作者:前端藏经阁转发链接:https://www.yuque.com/xwifrr/gr8qaw/vr51p4写在前面闲来无事,试了一下Koa,第一次搞感觉还不错,这个项目比较基础但还是比较完整了,...

MongoDB 集群如何工作?

一、什么是“MongoDB”?“MongoDB”是一个开源文档数据库,也是领先的“NoSQL”数据库,分别用“C++”“编程语言”编写,使用带有“Schema”的各种类似JSON的文档,是也分别被认为...

三部搭建mongo,和mongo UI界面

三步搭建mongo,和mongoUI界面安装首先你需要先有一个docker的环境检查你的到docker版本docker--versionDockerversion18.03.1-ce,b...

Mongodb 高可用落地方案

此落地方案,用于实现高可用。复制集这里部署相关的复制集,用于实现MongoDB的高可用。介绍MongoDB复制集用于提供相关的数据副本,当发生硬件或者服务中断的时候,将会从副本中恢复数据,并进行自动...

一次线上事故,我顿悟了MongoDB的精髓

大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦?让我们一起,一探究竟,继续学习MongoDB分片的理论与实践,...

IDEA中安装MongoDB插件-再也无要nosql manager for mongodb

大家都知道MongoDB数据库作为典型的非关系型数据库被广泛使用,但基于MongoDB的可视化管理工具-nosqlmanagerformongodb也被用的较多,但此软件收费,所以国内的破解一般...

数据库监控软件Lepus安装部署详解

Lepus安装部署一、软件介绍Lepus是一套开源的数据库监控平台,目前已经支持MySQL、Oracle、SQLServer、MongoDB、Redis等数据库的基本监控和告警(MySQL已经支持复...

YAPI:从0搭建API文档管理工具

背景最近在找一款API文档管理工具,之前有用过Swagger、APIManager、Confluence,现在用的还是Confluence。我个人一直不喜欢用Swagger,感觉“代码即文档”,让代...

Mac安装使用MongoDB

下载MongoDB包:https://www.mongodb.com/download-center解压mongodb包手动解压到/usr/local/mongodb文件夹配置Mac环境变量打开环境...

保证数据安全,不可不知道的MongoDB备份与恢复

大家在项目中如果使用MongoDB作为NOsql数据库进行存储,那一定涉及到数据的备份与恢复,下面给大家介绍下:MongoDB数据备份方法在MongoDB中我们使用mongodump命令来备...

MongoDB数据备份、还原脚本和定时任务脚本

备注:mongodump和mongorestore命令需要在MongoDB的安装目录bin下备份脚本备份格式/usr/local/mongodb/bin/mongodump -h ...

等保2.0测评:mongoDB数据库

一、MongoDB介绍MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产...

MongoDB入门实操《一》

什么是MongoDBMongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之...

Python安装PyMongo的方法详细介绍

欢迎点击右上角关注小编,除了分享技术文章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。前言本文主要给大家介绍的是关于安装PyMongo的...

第四篇:linux系统中mongodb的配置

建议使用普通用户进行以下操作。1、切换到普通用户odysee。2、准备mongodb安装包,自行去官网下载。3、解压安装包并重命名为mongodb4.04、配置mongodbcdmongod...

取消回复欢迎 发表评论: