暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：
内容区（content） 内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。
开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉
自 1994 年以来，设计网站一直是 CSS 的唯一目的，它是一门描述网站外观的语言。
上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。
对于如何使用 CSS 制作一个半透明边框，首先你要知道 background-clip 这个属性
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题目
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。 想要禁用这个高亮，设置颜色的alpha值为0即可。
渐变主要有三种类型：线性渐变( linear-gradient)、径向渐变( radial-gradient)、圆锥渐变( conic-gradient)
本文接前文：不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大，很多应用场景和动效的制作不断完善和被发掘出来，遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。 CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。 混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之
首先，使用::before和::after伪类，在button的前后添加两个伪元素 一个width=0，height=2px；另一个height=0，width=2px
在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。
border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。
CSS中的linear gradient(线性渐变)可能会导致各种各样的怪异和怪异的结果。其中的一些怪异在于它的语法。
相信你以前肯定尝试过 CSS 中的半透明颜色，比如 rgba() 和 hsla()。
every-day-css-1 css-设计一个半透明边框 先看一下效果： lpx1rlr4j9.codesandbox.io/ 根据 background-clip的不同设置的不同情况 关键
【动画消消乐】 平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？ 便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己
CSS虽算不上编程语言，确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，且能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。如此强大，怎能不去学习一下？而这里就记录下CSS学习使用关于Background的点滴，毕竟好记性不如烂笔头。 Background基础知识 Background语法 backgr
参考链接： postcss-loader webpack css-loader
在 CSS3 中的 2D 转换 中 , 可以使用 scale 样式 , 设置 盒子模型 的缩放属性 , 可以设置 放大 和 缩小 ;
《CSS规则定义英汉对照表》由会员分享，可在线阅读，更多相关《CSS规则定义英汉对照表(4页珍藏版)》请在人人文库网上搜索。
一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。
filter 这个 CSS 属性将模糊或颜色偏移等图形效果应用于某个元素。这些滤镜通常用于调整图像、背景和边框的渲染。
描述: 好久没更新此《#前端学习之路》专栏文章了，不知道学习前端看友们想不想我，所以这一段时间又开始整理更新了。通过前面几章的学习，相信大家已经对CSS有了一个简单的了解吧，现在我们又回到使用频率较高的 文本 text、图像 images、媒体 media、表单 table 等元素CSS样式的设置，此章节主要讲解针对图像的相关CSS属性以其使用的示例演示。
该属性的作用为为页面中的文本添加阴影效果；通过设置它可以让网页中的文本有外发光，辉光，投影，浮雕，模糊，影子，描边，3D等效果。 写法通常如下 text-shadow:2px 2px 2px #fff；这四个值分别代表 X轴，Y轴，模糊程度(不可是负值)，阴影颜色
文章背景：之前基于requests-bs4-re的技术路线（参加文末的延伸阅读），获取沪深两市A股所有股票的名称和交易信息，并保存到文件中。本文采用scrapy模块，进行股票数据的爬虫。
在日常开发中，我们常常需要对背景图进行一个尺寸的缩放，上面的常规操作是无法满足我们的需求的。如果是多行属性的操作中，我们可能是这样写：
background-image：定义背景图像。需要用 url('...') 引入图片。
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
如果遇见了 3 的倍数要说 Fizz，5 的倍数就说 Buzz，如果即是 3 的倍数又是 5 的倍数就说 FizzBuzz。
假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：
大佬级前端，用HTML+CSS绘画，全程不用PS、AI这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。
基本的 HTML 标签结构 , 就是 4 个 链接 , 使用 链接标签 ;
HTML是骨架，CSS是装饰，CSS使得网页丰富多彩，它也是Web开发不可或缺的一部分。
高考活动页面需要在一个页面容器中，实现一个两行三列宽度自适应缩放，且图片等比例缩放，随着浏览器宽度进行自适应缩放的布局。 中间的图片需要自适应，随着页面宽度的变化，三等分缩放，图片等比例缩放。页面地址
前面我们了解过了盒模型，知道盒子由外边距、边框、内边距和内容区组成。对于整个盒子，我们可以通过一系列的手段来美化，如指定盒子的背景、边框以及盒子的阴影。
昨天凌晨，苹果公司发布了带刘海的 iPhone X，这需要 iOS 开发者针对其屏幕做新的适配，会后苹果公司发布了 iPhone X 的适配指南，下面是翻译稿，供大家参考。
大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性实践太少了，不能进行灵活应用，CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径，和JS编程一样，要重视对待，要多看和多练，因为现在的CSS不再是以前的CSS啦。
树形结构是一种非常常见的数据结构，它由一组以层次关系排列的节点组成。树的结构类似于自然界中的一棵树，树根对应顶层节点，而子节点则分支延伸出来。
请注意，本文编写于 169 天前，最后修改于 167 天前，其中某些信息可能已经过时。
当我们走入一间房间时，立刻就会注意到其中最明显的陈设：墙壁、窗子、家具等。但，这些东西的质地又是怎样的呢？木板上是否有裂纹？油漆是否已经斑驳？墙面的石灰是否有些脱落？玻璃窗是否有损坏或好久没有擦拭过？类似地，你是否注意到光影效果呢？房间的整体感觉又是如何呢？沉重？轻柔？开阔？还是狭小？所有这些问题的答案都不是那么显而易见，都需要我们的仔细观察才能够回答。但若你想让作品有足够的真实感，那么这些细节却都是必不可少的。——What Lies Beneath
static遵循默认的文档流布局，top,left,right,bottom,属性都无效
然后在 /build/utils.js 创建 getHtmlArray 方法，用来自动生成多个模板的配置：
CSS中长度单位： px：像素（Pixel）；em：相对长度单位，相对于当前对象内文本的字体尺寸；pt：点（Point），绝对长度单位；pc：派卡（Pica）；in：英寸（Inch）；mm：毫米；cm：厘米。 1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc
版工之前就耳闻 CSS 功能强大，可完全取代 HTML 的 table、tr、td 等 tag，做网页「外观 (user interface)」的编排。CSS 除了可避免陷在 HTML 多层的巢状 table 里，亦可明显减少网页档案大小，让页面日后可统一维护，而非逐一修改。日前版工找了一些书上的 CSS 范例，经简单修改并测试后，开放七个 CSS + div tag 网页排版的「样板」让大家下载 (.html 格式，可直接用浏览器开启)，内容如下：
当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div)都会默认继承这些属性
将picture元素和srcset,sizes属性纳入html5规范，新规范意在解决：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
