【跟着mdn官方文案那个系统学习css】持续补充中

最新推荐文章于 2024-08-17 12:45:11 发布
最新推荐文章于 2024-08-17 12:45:11 发布
阅读量77 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17335549/article/details/116448198
版权
本文详细介绍了前端开发中CSS的重要概念，包括层叠和继承、选择器的优先级、伪类选择器的运用，以及盒模型的理解，如border-box和content-box的区别。此外，还涉及了正常文档流、清除浮动、定位方式如static和sticky，以及@rules的使用。同时，讨论了背景和边框、文本方向、内联和块维度的设定，以及单位和百分比的应用。对于想要精通CSS的初学者，官方文档是不可或缺的学习资源。
摘要由CSDN通过智能技术生成

【自律者出众，不自律者出局】

写在前面碎碎念，作为一个菜鸟初学者，你要记住，官方文档，永远的神，你是一个菜鸟，你就不要怀疑官方，把官方的文档看懂、看透，比在网络上搜索一些乱七八糟的文档有用得多。

官方流程

  1. 层叠和继承、选择器
    1. 优先级，按照特殊性排序
    2. 伪类选择器，这个不太熟悉，多联系todo
  2. 盒模型
    1. border-box和content-box
    2. 正常文档流
    3. 清除浮动
  3. 视觉格式化模型
    1. 定位方式 static sticky
    2. @rules
  4. 背景和边框
  5. 文本方向
    1. 内联维度
    2. 块维度
  6. 单位、百分比
  7. 表格
我有一棵树
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css，不止“突破浏览器12px限制”
小王的技术库
05-24 550
之前写过一篇文章小tips：如何摆脱浏览器下12px的限制，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 transform 的特点，可以说兼顾了效果和性能。 但是它必须考虑height甚至在“动态多行”效果时要用 JS 辅助的特点也很是让人头疼。 其实还可以用两种方法解决这个限制： SVG解决文字12px限制 SVG 本质上你可以看成是一张图片，给图片设置width:100%就能够跟随容器尺寸拉伸，SVG 也是如。并且由于 SVG 是矢量的，因此，再怎么
HTML+CSS个人笔记
qq_53233068的博客
09-10 4452
HTML+CSS个人笔记 HTML(Hyper Text Markup Language) 浏览器 什么是浏览器内核？ 浏览器所采用的渲染引擎（“Rendering Engine”）是浏览器最核心的组成部分，通俗的叫浏览器内核。 五大主流浏览器 浏览器 内核 简介 IE Trident 微软 仅支持windows Safari Webkit 苹果 Mac Firedox（火狐） Gecko Mozilla基金会 支持Windows、Linux、Mac Chrome（谷
CSS系列之背景相关API
老__L的博客
01-23 914
本文主要介绍CSS的background、background-attachment、background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size属性。线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。
【CSS】实现梯形
流萤梦的博客
04-09 2980
简单说一下背景，就是需要实现一个展开收起的按钮。那我第一个想到的方法，可不就是border自己画嘛。
20 个防御性的 CSS 实践
热门推荐
前端开发博客
05-22 1万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群看到一篇来自 @shadeed9 关于 CSS 的文章内容，整体来说主要在编写 CSS 时可能需要注意到的一些带有保护性的处理方式，以避免页面布局上出现错位等情况。CSS 属性有些还是很常见的，只不过深感在细节上的把控真的很不错。原文很长，取部分内容简单分享，并非原文翻译，图片和代码来自原文，具体的可查看原文...
小小Tips：css，不止“突破浏览器12px限制”
flying meng的菜鸟居
04-01 1万+
之前写过一篇文章「小tips：如何摆脱浏览器下12px的限制」，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 transform 的特点，可以说兼顾了效果和性能。 但是它必须考虑height甚至在“动态多行”效果时要用 JS 辅助的特点也很是让人头疼。 其实还可以用两种方法解决这个限制： SVG解决文字12px限制 SVG 本质上你可以看成是一张图片，给图片设置width:100%就能够跟随容器尺寸拉伸，SVG 也是如。并且由于 SVG 是矢量的，因此，再
数字序号css怎么写,CSS多级数字序号的目录列表(类似3.3.1.这样的列表序号)
weixin_29497981的博客
08-03 342
编写文档手册的时候，我们经常需要列表项前面的序号将上级各层的序号也附加在前面，如下图：(图一)但默认的列表，任何层次都是单个序号开始。如下图：(图二)要实现图一效果，方法之一是直接将序号部分作为列表内容的一部分，插入相应的HTML，可使用JS批量插入序号。生成的HTML结果类似这样1. 列表项1.1. 列表项1.1.1 列表项1.1.2 列表项1.1.3 列表项如果既不想将序号硬写在html代码里...
占位的css样式怎么写,科技常识：css自定义占位文本(placeholder)的样式的方法示例...
weixin_42130889的博客
08-04 710
今天小编跟大家讲解下有关css自定义占位文本(placeholder)的样式的方法示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css自定义占位文本(placeholder)的样式的方法示例 的相关资料，希望小伙伴们看了有所帮助。自定义占位文本(placeholder)的样式当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是plac...
回顾css的animation属性
weixin_42257389的博客
12-14 265
异名新接一个需求，实现一个文字的切换，结果发现太久没写css动画，对animation属性已经很陌生，尤其是对steps()函数的理解已经丢掉了。animation 属性概览animat...
mdn-css：在mdn上学习CSS
02-13
2. **盒模型**：理解CSS中的盒模型是至关重要的，它包括content、padding、border和margin，这些决定了元素的大小和布局。 3. **布局模式**：包括流体布局、网格布局（CSS Grid）、Flexbox（弹性盒子布局）和CSS ...
MDN 文件 API 中文文档
08-01
MDN 文件 API 中文文档
csstype：基于MDN数据的样式的严格TypeScript和Flow类型
02-05
CSSType CSS的TypeScript和Flow定义，由的生成。 它为CSS属性和值提供自动补全和类型检查。 打字稿import * as CSS from 'csstype' ;const style : CSS . Properties = { colour : 'white' , // Type error on ...
专用网页设计[HTML+CSS]的学习模板
02-19
【持续学习与资源】 网页设计技术不断进步，掌握HTML5新特性（如语义化标签、离线存储）和CSS3的新选择器、过渡和动画同样重要。此外，可以参考MDN Web Docs等权威在线资源，参加在线课程，加入社区讨论，以保持对...
MDN HTTP 中文文档 20171202
12-02
MDN HTTP 中文文档 20171202 MDN HTTP 中文文档 20171202
css实现水滴效果图
yinge0508的博客
08-12 2013
【代码】css实现水滴效果图。
响应式Web设计：纯HTML和CSS的实现技巧
Caleb的博客
08-16 784
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 1009
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
CSS的:current伪类：精准定位当前活动元素
最新发布
2401_85439108的博客
08-17 522
CSS（层叠样式表）是控制网页样式的核心语言。随着CSS4的提出，一系列新的选择器被引入，其中:current伪类便是这些新特性之一。:current伪类允许开发者选择当前处于活动状态的元素，这在创建动态和交互性网页时非常有用。本文将详细介绍:current伪类的使用方式、应用场景以及如何通过它们增强网页的交互性和视觉表现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值