AhCola

效果可以在 codepen 上查看效果和源代码。我整理了一篇关于学习 css 的教程，想要学习 css 或者 复习知识的，可以看一看。戳 =>>>> css 教程地址 <<<<<= 戳代码<div class="book-container"> <div class="book"> <div> <div class="title">3d book</div&gt

本文展示一些纯CSS实现的悬浮动效，附源码。原文地址：https://pengfeixc.com/blogs/css/pure-css-hover-animation，可以在线编辑代码，查看动画效果。代码：github。按钮悬浮动效卡片悬浮透视动效卡片悬浮文字平移卡片悬浮背景动效图标旋转动效菜单悬浮动效纯html、css图标动效菜单/按钮悬浮动效涨水效果更多特效参考：https://www.proglobalbusinesssolutions.com/css-h

最近花了点时间，整理了一下之前的CSS博客文章，完成了这个CSS教程。也为我的个人网站，增加了一个教程模块。教程地址：请点击这里。该教程是一套完整的CSS入门教程，看了绝对不会吃亏，不会上当☺。我的个人网站也欢迎大家光临，你有任何问题都可以向我咨询，可以在我的文章下方留言，或者给我发邮件。...

阴影文章中的demo无法实时预览，可以在这里获得更佳的阅读体验。css提供了多种方式可以为元素或者文字添加不同的阴影效果。通过本节内容，你将学会如何使用这些方式，知道它们各自的用途。一.box-shadowbox-shadow是比较常用的一个属性，可以为元素边框周围添加一层阴影效果。.ele { box-shadow: 5px 5px 20px 5px #000;}box-shadow接受的值，按照从左至右的顺序依次表示：x偏移：水平偏移，正值表示向右偏移，负值表示向左偏移。y

边框文章中codepen例子无法实时预览，可以点击这里获得更佳的阅读体验。边框指的是CSS元素盒子的边框。本节内容将说明如何通过css更改边框的尺寸、样式和颜色。在盒模型章节中，讲述了盒模型由四个部分组成：内容区（content box）、内边距（padding box）、边框（border box）和外边距（margin box）。可以通过border属性修改边框（border box）的样式。一.边框属性类型元素的边框可以有多种类型，例如实线、虚线、双线等等。可以通过border-styl

伪元素文章中的codepen deom无法实时预览，点击这里可以获得更好的阅读体验。伪元素的作用是在不添加任何html代码的情况下可以拥有添加额外的元素的功能，或者是指定某个目标元素。你可以在本节学习伪元素的相关知识。如果你的上司安排给你一个任务，将一篇文章的每个段落的首字母变大，你将如何实现这个功能呢？幸运的是，css恰好提供了这个功能。你可以使用::first-letter实现这个需求。p::first-letter { color: blue; float: left;

css间距本节深入研究如何更好的调整元素之间的间距（margin和padding）。文章中deom无法实时预览，可以在这里获得更好的阅读体验。first，假设有三个box，从上往下堆叠在一起。现在你想在它们之前添加一个间距，你有几种方式处理这个问题呢？margin属性也许正好能满足你现在的要求，但是它可能会添加了额外的边距，超出了你的预期。例如，你如何调整边距正好处在这些元素的之间？可能gap属性更适合这种情况。调整元素的间距有很多方式，每种方式都有它们的优点和使用场景。一.HTML间距HTM

css逻辑属性文章中demo无法实时预览，可以在这里获得更好的阅读体验。本节，将讨论css中的一些逻辑属性。一.块流（Block flow）**块流（Block flow）**指的是块排列的方向。例如有两个段落，块流动的方向就是从第一个块到第二个块。在英文文档中，块流动方向是从上到下。下一个段落在上一个段落的下方。二.内联流（Inline flow）内联流的方向就是一行文本的书写方向（页面渲染一行文字的方向）。在英文文档中内内联流的方向是从左至右。如果你将网页页面语言更改为Arabic（&l

最全面的CSS元素居中教程文章中demo案例无法实时预览效果，可以在这里获得更好的阅读体验。作为一名web开发者，你应该经常会遇到居中一个元素的场景，通常你会觉得居中一个元素会很困难。为什么一个简单的居中会如此困哪呢？我认为应该是需要居中的场景可能有很多，而每种场景的居中方式也不一样，所以造成了我们面临某个居中需求时，不知道采用什么方式去解决问题。本节内容，我将各个场景细分，讨论每种场景的可用的居中方式。一.水平居中内联元素内联元素，即inline或者inline-*的元素。居中一个内联元素可以

CSS Grid 网格布局教程本文转自阮一峰老师的grid布局教程文章。文章同时发布于：个人网站作者：阮一峰日期：2019年3月25日一.概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex

Flex 布局教程：语法篇本文转自阮一峰老师的flex教程文章。文章同时发布于个人网站。作者：阮一峰日期：2015年7月10日网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，

布局文章中codepen demo无法实时预览，可以在这里获得更好的阅读体验。当你构建一个组件或者页面时，有多种布局方式可供选择，本节内容是各种布局的一个概览。假设你是一个开发者，此时一个设计专业的同事递给你一份新的网站设计稿让你开发。这份设计稿有很多有趣的布局和组件，有二维布局，也有非常灵活可流动的布局。你怎么去选择最好的css布局方式呢？CSS为我们提供了多种布局方式，有水平轴布局，垂直轴布局或者水平和竖直混合布局。选择一个正确的布局方式往往很困难，通常你需要多个布局方式去解决问题。为了解决这些

css filter属性详解文章中codepen例子，无法实时预览，可以在这里获得更好阅读体验。最近琢磨着把网站主题色更改一下，看到了一篇文章Dark Mode in One Line of Code，作者讲述了如何用一句代码将网站主题色更改成相反色，这样网站就可以拥有有白天模式和黑夜模式了。html { filter: invert(1);}使用上面的代码，可以很方便的将页面颜色反转，达到黑夜模式的效果。但是我并不推荐以这种方式去给网站增加黑夜模式，因为这句代码会将页面中的图片的像素颜

尺寸单位文章中codepen的demo无法实时预览，可以在这里获得更好的阅读体验。本节内容，将讲述如何使用css调整元素的大小，提高页面的美观性。一. 数字（Numbers）数字可以用来定义opacity、line-height,还可以用于定义rgb颜色中的大小。这里指的数字是无单位的。例如(1, 2, 3, 100)和小数(.1, .2, .3)。数字所处的上下文不同，它的意义也不一样。例如当定义line-height时，一个无单位的数字表示的是一个比例值：p { font-size:

颜色博客中demo无法实时预览，可以在这里获得更好的阅读体验。在css中颜色的值可以有多种格式设置。本节内容讲述一些最常用的方式。一. 数值类型的颜色用数值表示颜色，也有几种不同的方式。十六进制h1 { color: #b71540;}十六进制数值表示法是RGB的一种简写方式，六个数字中每两个数字为R、G、B赋予一个0-255区间的值。据统计，十六进制是最受欢迎的颜色表示格式。 See the Pen 006 Box Model_1 by Pengfei Wang

继承csdn不支持demo实时预览，可以在这里获得更好的阅读体验。某些css属性，如果你不显示设置它的值，那么它的值会从父节点继承。本节内容将会讲述继承是如何工作的，怎么去利用这一特性。一. 继承流继承的方向是向下传递的，父级元素的某些属性值可能被子节点继承，但是子元素的属性值，不可能被父元素继承。看下面的demo： See the Pen 005 Box Model_1 by Pengfei Wang (@AhCola) on CodePen.父元素（div类名为parent

特征性特征性是级联算法的一个关键部分，本节内容将深入了解特征性。上一节，介绍了级联算法，级联算法是为了解决css规则冲突的算法。而特征性作为其中一个重要部分，我们有必要去弄懂它。假设有如下css和html：<button>color?</button>button { color: red;}.branding { color: blue;}按钮文字将显示蓝色。因为类选择器的权重高于类型选择器。一.特征性分数（权重）比较两个选择器的特征性（权重）大

盒模型（box model）文章中的demo无法实时预览，请移步至001 盒模型 获得更好的阅读体验。html页面中任何元素都是一个盒子（box）。学好css的基础是理解盒模型的工作原理。内容和大小盒子的大小可以有两种控制方式：extrinsic sizing: 显示设置盒子的width和height为固定尺寸，例如设置width和height为400px、600px，那么盒子的大小就固定了。intrinsic sizing: 不设置盒子的大小，或者设置盒子的大小为非固定尺寸，例如设置widt

级联文章中的demo无法实时预览，请移步至003 级联 获得更好的阅读体验。有时候，有多个相同的css规则可以被应用于同一个元素。此时浏览器需要使用级联算法确定最后使用哪一个css规则进行页面渲染。css是级联样式表（Cascading Stylesheets）。级联是解决当多个css规则被同时应用于一个html元素时产生的冲突的一种算法。正因为级联，下面的按钮才会被渲染成蓝色：<style> button { color: red } butto

选择器（selector）文章同时发布于：个人网站—css模块。CSS提供了几种方式，可以让开发者将css样式应用到指定的html元素。本节内容将会讲述这些方式。一.CSS规则（rules）首先，我们简单的看下css语法的结构，假设有如下css规则：.class-rule { background: red; color: green;}上面是一个简单的css规则，它将类名为class-rule的所有元素的背景色设置为红色，颜色设置为绿色。在css代码中，.class-rul