最全CSS基础知识图片形式整理

原创 于 2019-07-14 12:39:30 发布 · 5.2w 阅读 · 289 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#最全CSS知识整理 #CSS知识整理 #CSS理论知识整理 #CSS3知识整理 #最全CSS3知识整理

该博客全面整理了CSS相关知识，涵盖HTML5基础、CSS基础、核心属性、盒模型、元素类型等内容，还介绍了定位、图片整合、宽高自适应、浏览器兼容等方面知识，最后分享了calc()计算、object-fit改变图片自适应等CSS冷门实用小技巧。

文章目录

一、HTML5基础 – H5标签

在这里插入图片描述

二、CSS基础

在这里插入图片描述

三、CSS核心属性

在这里插入图片描述

四、css盒模型和文本溢出

在这里插入图片描述

五、CSS元素类型

在这里插入图片描述

六、定位、锚点、透明

在这里插入图片描述

七、图片整合

在这里插入图片描述

八、宽高自适应

在这里插入图片描述

九、浏览器兼容

在这里插入图片描述

十、表格表单和统筹

在这里插入图片描述

十一、CSS选择器和CSS3属性

在这里插入图片描述

十二、额外的CSS冷门实用小技巧：

  1. calc()可以计算宽度高度。注意的是calc的参数中间的计算符号的前后要加空格。例如：width: calc(100% - 100px);
  2. object-fit:cover; —改变图片根据容器自适应
  3. white-space: pre-line; —识别数据库里的换行将前端显示内容也换行显示。
博客
个人分享选择工作时的一些注意事项
12-11 6885
感谢内容提供者：金牛区吴迪软件开发工作室人工智能推荐学习地址：人工智能社区        今天给朋友分享的是如何在选择工作的时候避免碰壁，如果工作没选择好，即浪费公司和我们的时间，也破坏了大家的好心情。所以选择工作是一个非常重要的事情！！！大家一定要慎之又慎，多重分析！！！这篇文章笔者不会说关于技术的问题，如果大家想要了解技术面试的相关内容可以在下方留言，笔者看情况会进行书写然后进行相关推送。【有点变懒了，不想写太多的博客了】文章目录前言：背景主体部分.
博客
前端AI语音方面的实现
04-05 2万+
文章目录前言一、开始写代码写html和简单的cssjs代码二、知识点讲解属性介绍：方法介绍：事件介绍三、兼容性介绍兼容写法三、实战演习全部代码：前言今天我们来点有意思的，AI语音转换！当我们遇到语音转换的需求感觉，哇，好难啊，这怎么开发啊。其实这是很简单的，今天笔者就来给大家演示一下我们用js实现语音转换功能！首先我们先来做俩个按钮，一个开始按钮一个结束并开始转换语音的按钮：一、开始...
博客
前端开发应知网站(强烈推荐)
03-31 12万+
作为一名前端开发者（所有程序员）最起码遇到bug就算不会解决也应该会搜解决问题的答案。一般笔者会先在百度搜（关键词一定要输入正确）如果没搜到会再去bing里面看看还没有的话就去github的Issues里面再看看如果还不行就只能自己去看官方文档然后自己研究了。只是知道搜解决问题的方法这是最基础的，遇到问题才会去想办法解决，而作为一名...
博客
一篇文章彻底搞懂异步，同步，setTimeout，Promise，async
06-10 5万+
之前翻看别的大佬的博客看到了关于setTimeout，promise还有async执行顺序的文章。观看了几篇之后还是没有怎么看懂，于是自己开始分析代码，并整理了此文章，我相信通过此文章朋友们能对异步同步还有，setTimeout,Promise,async这些内容了然于胸，接下来让我们走入正题：...
博客
你不知道的console，控制台也能玩出花样~
04-14 3万+
平时前端开发的过程console是大家用到的最多的命令之一，但是大部分人只会console.log()，并不知道console它还有其他很多的骚操作，今天就给大家分享一下~。1. 首先是大家最常用来调试的console.log([data]:any[,…args]:any),很多时候我们需要查看函数的参数是不是我们想要的值或者结果是不是我们预想的值的时候一般会使用它。console.log("...
博客
如何跨行学习前端？一个小白的跨行之路~
04-13 3万+
如何跨行学习前端？一个小白的跨行之路~此篇文章讲述了一个小白跨行学习前端过程遇到的问题，以及是如何解决的。希望此篇文章能够帮助到更多的人。前端小白该如何入门？(先给大家分享**干货**最后在讲故事)*干货分享完了最后给感兴趣的朋友分享分享笔者的真实经历*此篇文章讲述了一个小白跨行学习前端过程遇到的问题，以及是如何解决的。希望此篇文章能够帮助到更多的人。大家好，我叫吴小迪，在前端行业这个领域已经...
博客
前端分片上传实现
07-14 494
文章摘要：本文介绍了大文件分片上传的优化方案，通过将单个大文件分割为多个5MB分片并发上传（最多10个并发），显著提升上传速度。实现包含分片切割、并发控制、失败重试（最多3次）及进度通知等功能，最终调用merge接口合并分片。前端采用antd组件展示实时进度，实测速度提升1倍以上。关键代码展示了分片逻辑、并发队列管理和错误处理机制，适用于需要高效上传大文件的场景。（149字）
博客
npm link的使用方法详细介绍
07-01 606
本文详细介绍了使用npm link进行本地项目调试的方法。通过三个相互依赖的项目A、B、C为例，演示了如何建立本地依赖链接：首先在底层项目C执行npm link生成全局包，然后在项目B中链接项目C并生成自己的全局包，最后在项目A中链接项目B和C的本地版本。文章包含具体操作步骤和验证截图，展示了如何用npm list -g检查全局安装情况，最终成功实现了在本地环境下调试相互依赖项目的目标。该方法适用于需要频繁修改和测试相互依赖的本地模块场景。
博客
英语真题技巧
10-23 1296
考生需要完成一篇150词（新规定是150词，从24年4月份开始的）左右的，符合题目要求的文章。考生需要判断题干句子和阅读原文信息对比之下，是正确，错误，或未提及.3.阅读原文定位句子，与题干信息进行比较，确定正，误，或者未提及。考生需要选择正确的句子填回原文句子缺失处，以使得原文意思完整。考生需要选择正确的词汇填回原文句子缺失处，以使得原文意思完整。3.阅读选项单词，根据上一步的判断选择出正确的答案。3.阅读定位句子，其与选项对比，选出正确答案。(3)选完的选项划掉，减少下一题目的选择范围。
博客
成人自考-英语二-介词
01-25 1405
接上一篇：成人自考-英语二-形容词。
博客
highcharts.css文件的样式覆盖了options的series里面的color问题解决
01-24 854
根据第一个方案去解决非常简单，我们创建一个 highcharts.override.css文件。PS：有没见过 revert-layer 属性值的同学请不要诧异，其实我也是偶然发现的。
博客
成人自考-英语二-连词
10-27 673
Her job主语从句：翻译：她的工作很重要。简单句：This isher jobThis is翻译：这是她的工作。简单句：She likesher jobShe likes翻译：她喜欢她的工作。a. 做动词的宾语：Ibelieveb. 做介词的宾语：Give a reading listtoc. 做形容词的宾语：I’msure简单句：The girl likes the boy, a singer.
博客
成人自考-英语二-形容词
10-09 1346
一般直接加，"元e"去e加，"辅y"改i加，"le"结尾e改y。这个小男孩掌握信息的能力令人吃惊，但他的注意力集中的时间很短。句意：令人惊讶的是，地球上有11亿人难以获得干净的饮用水。句意：她生活中有许多烦恼，但她总是乐观地看着这个世界。interesting：令人感兴趣的；public -> publicly【公开的】whole -> wholly【完全的】3.be动词的后面（和主语不能划等号）句意：他在会上做了一次出奇的长的演讲。interested：感兴趣的【通常。3.一个完整的句子的句首和句尾。
博客
成人自考-英语二-动词
09-23 2889
以来：介词 + the last / past + 时间段（for / in / over / during the past / last few years）4）至今：so far / up to now / till now / by now。adj. / n. + ize 👉🏻 v.(e结尾去e；规则：adj. / n. + en 👉🏻 v.(e 结尾 + n)规则：（1）adj. / n. + fy 👉🏻 v.（有e去e）3）以来：介词 + the last / past + 时间段（
博客
成人自考-英语二-代词、数词、冠词
09-07 1014
2）quite / rather a(an)相当地。==+形容词：表一类人/物 The old 老年人。三餐、球类、学科、象棋 play football。序数词，形容词副词最高级，only修饰的名词前。3） many a(an) + 可数名词单数。姓氏名词复数：表家族. The Smiths。1.单数（this这个 / that那个）一个、每一个、某一个（数量为1=one）基变序，有规律，结尾都加"th".一二三需特记，结尾带有t、d、d.八减t，九去e，ve要用f替，季节、月份、星期、日期、节假日。
博客
成人自考-英语二-主谓一致
08-21 1142
自考英语二常考的考点包含三个一致：语法一致、意义一致、就近一致。
博客
成人自考-英语二-名词详细介绍
08-14 1390
状态单词一单词二词根agree（同意）equal（平等）否定、动词disagree（不同意）inequal（不平等）名词agreement（同意）equality（平等）否定、名词disagreement（不同意）inquality（不平等）
博客
成人自考-英语二-大纲要求及考试题型及分值详细介绍
08-13 814
自考英语二介绍
博客
git查看/切换远程仓库
06-23 2498
【代码】git查看/切换远程仓库。
博客
vue页面缓存失效问题解决
06-09 2858
前端技术栈用的是vue，然后用keep-alive组件进行缓存页面【切换页面不进行刷新页面，保留之前的查询条件及状态等等】如果你不知道什么是正确的name的话可以在keep-alive那里把name显示的debug出来看。方案一：直接删除name的声明【一定是vue3.2.34+的版本才可以用这个方法】所以到这里基本上就排查到了问题应该就是组件的name错了所以导致缓存无效了。，如果是3.2.34+的版本就无需给组件声明name。方案二：将组件的name改成正确的。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值