樊小书生

tailwindcss 包含丰富的样式定义，且支持自由配置，可在项目中统一使用，减少 css 定义，将 css 声明写入 html ，查看 html 代码即可知道 css 样式。

写本篇文章的时候是看了 移动端1px问题解决方案 ，这里面介绍了多种解决方案，我本篇文章只着重介绍 伪元素先放大后缩小 的方法。可以先点击查看效果链接，建议在Retina屏幕移动端查看：移动端1px，可直接使用手机扫码下方二维码。效果如下：这里只简单介绍两种常用的，其他的举一反三就可以。按钮边框Retina屏幕移动端查看上面的例子，可以发现按钮直接设置 border: 1px solid #aaa; 比使用伪元素宽。下面展示代码：border: 1px solid #aaa;：<bu

[attribute]例子例子描述[target]选择带有 target 属性所有元素。[attribute=value]例子例子描述[target=_blank]选择 target="_blank" 的所有元素。[attribute~=value]例子例子描述[title~=flower]选择 title 属性包...

谷歌和火狐浏览器下的input的padding不同表现，input在PC端和移动端的布局差别。

在做移动端的时候，我们会遇到横竖屏样式该如何使用，我们可以定义两个最顶层的父类class，然后根据css的后代选择器来定义相应的样式，但我们今天要说的是利用媒体查询来做。

代码css自定义滚动条样式，webkit内核浏览器。/* 滚动条样式 */::-webkit-scrollbar { /* 滚动条的宽度 */ width: 10px; margin-right: 7px;}::-webkit-scrollbar-track { /* 滚动条的滑轨背景颜色 */ background-color: #fff;...

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。 计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。counter-...

HTML中直接使用video来播放视频，在Chrome浏览器、360浏览器、QQ浏览器（以及其他一些使用Chrome内核Blink）等中都会出现下载按钮，但我们一般又不希望出现下载按钮。好像是从Chrome 54版本开发有下载按钮的（从网上看到的，我也不确定），网上有css解决方案，如下：video::-internal-media-controls-download-button { ...

最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准： ，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。文章地址：https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ 。他里面讲的css选择器是按照如下的这种方式计算优先级的：看到上面图我就突...

下面为公共代码：&lt;div class="box"&gt; &lt;div class="small"&gt;small&lt;/div&gt;&lt;/div&gt;.box { width: 300px; height: 300px; background: #ddd;}.small { background: red;}水平垂直居...

当前环境中，直接手写 css 的越来越少，主要是通过各种预编译器来做，主要原因会通过如下几点进行描述。先看一下 css 的一些基础点，这里只说关键的，完整的可以自己查看 css2.1规范 。css 基础知识点css 盒模型页面都是通过盒模型来拼凑的，首先需要知道都有哪些块模型（也就是 display 的值）：inline: 行内元素inline-block: 行内块元素block...

最近做移动端的，在一块区域内绑定事件之后，在安卓上面没有任何问题，然而在iphone上却会出现闪屏，参考一些知名移动端的框架，例如bootstrap，在html和body标签上会添加上下面的这个csss属性：-webkit-tap-highlight-color: rgba(0,0,0,0);添加之后iPhone闪屏效果确实解决了。

我们在进行页面布局的时候经常会遇到将某个元素定位在屏幕的某个位置，这个时候我们会用到position:fixed；在很多页面上我们会看到一种特效就是页面滚动的时候，图片定位在原来的地方，然后会有一些布局的页面经过之后图片更改的效果（我将其称之滚动切图）。

letter-spacing和word-spacing的区别

基于原生js和css3的时钟

为了程序员们的幸福，加油

使用原生js与css3的一些属性结合的可以换档位的电风扇

在textarea中含有空格键、换行键的时候，如果直接上传给服务器，之后在返回的数据中，如果将数据再次以textarea的值来显示，空格键和换行会依然保留，但是如果以其他标签的时候为什么就没有保留空格、换行呢？

在移动端的页面中，我们会遇到有一部分是一直显示的，比如说菜单项，当页面初始化的时候，它处在文档流内，当页面下滑的时候，并且菜单到达顶部之后就会一直定位在顶部，并且上滑的时候，菜单又会回到文档流。到这里大家应该会有点思路，定位在顶部不动了，那就肯定用了position: fixed；，再实现可以回到文档流，那这一块就最好使用定位布局，方便控制。下面是我根据这个来写的一个：&lt;!DOCTYPE html&gt;

border-radius是用来设置圆角的，主要是以length和%两种形式来进行设置，那两者设置的圆角是否一致呢？

cursor可以为按钮或者某些区域强制定义一种鼠标移上去的鼠标光标形状。cursor可以定义的鼠标光标形状多种多样，相当丰富。

水平垂直居中在页面的布局中还是会经常用到的，比如讲一个图片水平居中显示？我们都知道水平居中的时候我们可以使用margin: 0 auto;，但是在垂直方向上使用margin: auto 0;确是无效的。这是为什么呢？

CSS里的visibility属性有个鲜为人知的属性值：collapse