HTML5和CSS3基础
HTML元素 空元素 不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素例如：元素 `` 是用来在页面插入一张指定的图片。 布尔属性 有时会看到没有值的属性，这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一 ...
CSS中的BFC、IFC、GFC、FFC
CSS中的BFC、IFC、GFC和FFC是布局模型中的概念，用于描述元素在文档流中的布局行为。它们分别代表块级格式化上下文（Block Formatting Context）、内联级格式化上下文（Inline Formatting Context）、网格格式化上下文（Grid Formatting ...
由小见大！不规则造型按钮解决方案
今天，有个群友在群里提问，使用 CSS 能否实现下述这个图形： emmm，中间这个酷似三次贝塞尔曲线的造型，使用 CSS 不太好实现。我的建议是切图实现，然而群友要求一定要用 CSS 实现。 虽然麻烦，但是这个图形勉强也是能用 CSS 实现的。本文就将探讨一下上述图形的纯 CSS 实现方式，并且从中 ...
CSS-@规则(At-rules)常用语法使用总结
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。 这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。 常用规则 @import @import 主要用于从其他样式表导入新的样式规则， ...
CSS 清除浮动
在元素设置浮动（float）后，该元素就会脱离文档流，并且向左或向右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。 一、浮动元素对布局的影响 1.1、浮动元素造成父元素的高度塌陷： 原来的父元素高度是内部元素撑开的，但是当内部元素浮动后，脱离文档流浮动起来，那父元素的高度就坍塌，变为高度 0 ...
关于css、scss、sass、html单页面应用scss
1.CSS、SCSS、SASS CSS是开发人员熟知的一种用于页面样式开发的语言，可以通过内容的分离控制减少代码的重复性，降低代码的复杂程度。 SASS 与 SCSS 都是 CSS 预处理器，可包含在基于 CSS 的 UI（用户界面）或前端框架中以简化开发。这些 SASS 与 SCSS 框架在高级别 ...
Css 常用布局方式
1.CSS 参考手册 2.元素的分类 首先我们要知道一共有几种元素 1.行内元素（可以与其他行内元素位于同一行，不会以新行开始高度、宽度不能设置） 2.块级元素（每个块级元素都从新的一行开始，其后的元素也另起一行。默认排列方式：从上至下元素的高度、宽度、行高、内外边距都可设置） 3.行内块元素（和其 ...
flex布局 -- 弹性盒模型
flex布局 -- 弹性盒模型 display: flex; 就会让其变成弹性盒子 当把一个元素的 display 属性设置为 flex 或者 inline-flex 后，它就成了一个容器。 flex 与 inline-flex 的关系就类似 block 与 inline-block 的关系，定义里 ...
轻松解决 CSS 代码都在一行的问题
前言 最近在做博客园的界面美化，用的是博客园[guangzan]的开源项目，配置超级简单，只需要复制粘贴代码就好啦。 但在粘贴 CSS 代码时遇到一个问题，那就是所有代码都挤在了一行，没有一点排板的样子（如下图），对我来说是不能忍受的，便决定解决这一问题。 经过一番网上冲浪后，我找到了解决方法，并且 ...
常量与变量
在上一篇博客中我们有提到一个词叫做常量，现在就来讲讲它常量：指的是在程序运行过程中值不会发生改变的量其实我们也有写过，在这个输出语句中，这个1就是常量简单来说程序运行下去，这个1它怎么样也不会变成3吧变量：指的是在程序运行过程中值会发生改变的量那么怎么来定义一个变量呢我们先来试着定义一个x，值就先为 ...
CSS 网格(Grid)布局
CSS Grid 布局是一种二维布局方式，可以将页面分成行和列，并在其中放置元素。使用 Grid 布局时，需要定义网格容器和网格项目。 ...
云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM
著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。 玉兔主题元素绘制 成本最低的绘制 ...