![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 75
樊小书生
前端开发工程师
展开
-
tailwindcss 一览表
tailwindcss 包含丰富的样式定义,且支持自由配置,可在项目中统一使用,减少 css 定义,将 css 声明写入 html ,查看 html 代码即可知道 css 样式。原创 2022-11-14 10:35:27 · 2665 阅读 · 0 评论 -
移动端1px
写本篇文章的时候是看了 移动端1px问题解决方案 ,这里面介绍了多种解决方案,我本篇文章只着重介绍 伪元素先放大后缩小 的方法。可以先点击查看效果链接,建议在Retina屏幕移动端查看:移动端1px,可直接使用手机扫码下方二维码。效果如下:这里只简单介绍两种常用的,其他的举一反三就可以。按钮边框Retina屏幕移动端查看上面的例子,可以发现按钮直接设置 border: 1px solid #aaa; 比使用伪元素宽。下面展示代码:border: 1px solid #aaa;:<bu原创 2021-05-18 00:48:05 · 101 阅读 · 0 评论 -
css选择器 - 1
[attribute]例子例子描述[target]选择带有 target 属性所有元素。[attribute=value]例子例子描述[target=_blank]选择 target="_blank" 的所有元素。[attribute~=value]例子例子描述[title~=flower]选择 title 属性包...原创 2020-02-09 19:20:06 · 168 阅读 · 0 评论 -
谷歌和火狐浏览器下的input的padding不同表现
谷歌和火狐浏览器下的input的padding不同表现,input在PC端和移动端的布局差别。原创 2017-09-24 22:25:30 · 2661 阅读 · 0 评论 -
移动端浏览器横屏、竖屏样式
在做移动端的时候,我们会遇到横竖屏样式该如何使用,我们可以定义两个最顶层的父类class,然后根据css的后代选择器来定义相应的样式,但我们今天要说的是利用媒体查询来做。原创 2018-04-22 12:29:06 · 2967 阅读 · 1 评论 -
css自定义滚动条样式
代码css自定义滚动条样式,webkit内核浏览器。/* 滚动条样式 */::-webkit-scrollbar { /* 滚动条的宽度 */ width: 10px; margin-right: 7px;}::-webkit-scrollbar-track { /* 滚动条的滑轨背景颜色 */ background-color: #fff;...原创 2018-05-13 17:32:38 · 300 阅读 · 0 评论 -
css计数器
本质上CSS计数器是由CSS维护的变量,这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。 计数器的值通过使用counter-reset 和 counter-increment 操作,在 content 上应用 counter() 或 counters()函数来显示在页面上。counter-...转载 2018-06-22 22:46:46 · 375 阅读 · 0 评论 -
video标签去除下载按钮
HTML中直接使用video来播放视频,在Chrome浏览器、360浏览器、QQ浏览器(以及其他一些使用Chrome内核Blink)等中都会出现下载按钮,但我们一般又不希望出现下载按钮。好像是从Chrome 54版本开发有下载按钮的(从网上看到的,我也不确定),网上有css解决方案,如下:video::-internal-media-controls-download-button { ...原创 2018-10-29 21:08:34 · 15368 阅读 · 0 评论 -
css选择器优先级
最初接触css选择器优先级这一块的内容的时候,是以下面这张图为准: ,按照上图进行计算,但是我昨天看了一篇文章发现这样算是错误的。文章地址:https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ 。他里面讲的css选择器是按照如下的这种方式计算优先级的:看到上面图我就突...原创 2018-10-30 22:05:03 · 512 阅读 · 0 评论 -
水平垂直居中布局的多种实现方式
下面为公共代码:<div class="box"> <div class="small">small</div></div>.box { width: 300px; height: 300px; background: #ddd;}.small { background: red;}水平垂直居...原创 2018-12-07 18:16:21 · 513 阅读 · 0 评论 -
CSS预编译器
当前环境中,直接手写 css 的越来越少,主要是通过各种预编译器来做,主要原因会通过如下几点进行描述。先看一下 css 的一些基础点,这里只说关键的,完整的可以自己查看 css2.1规范 。css 基础知识点css 盒模型页面都是通过盒模型来拼凑的,首先需要知道都有哪些块模型(也就是 display 的值):inline: 行内元素inline-block: 行内块元素block...原创 2019-07-30 15:42:08 · 2859 阅读 · 0 评论 -
ios移动端关于事件绑定区域点击闪屏的解决
最近做移动端的,在一块区域内绑定事件之后,在安卓上面没有任何问题,然而在iphone上却会出现闪屏,参考一些知名移动端的框架,例如bootstrap,在html和body标签上会添加上下面的这个csss属性:-webkit-tap-highlight-color: rgba(0,0,0,0);添加之后iPhone闪屏效果确实解决了。原创 2017-09-23 19:00:21 · 2909 阅读 · 1 评论 -
background-attachment实现背景图片的定位
我们在进行页面布局的时候经常会遇到将某个元素定位在屏幕的某个位置,这个时候我们会用到position:fixed;在很多页面上我们会看到一种特效就是页面滚动的时候,图片定位在原来的地方,然后会有一些布局的页面经过之后图片更改的效果(我将其称之滚动切图)。原创 2017-08-02 21:38:09 · 1201 阅读 · 0 评论 -
letter-spacing和word-spacing的区别
letter-spacing和word-spacing的区别转载 2016-10-17 13:04:15 · 2520 阅读 · 0 评论 -
纯html、css3、js的时钟
基于原生js和css3的时钟原创 2016-08-14 23:01:36 · 679 阅读 · 0 评论 -
七夕程序员的表白神奇
为了程序员们的幸福,加油原创 2016-08-09 13:18:43 · 7027 阅读 · 2 评论 -
原生js与css3结合的电风扇
使用原生js与css3的一些属性结合的可以换档位的电风扇原创 2016-07-29 15:51:05 · 1779 阅读 · 1 评论 -
css--文本换行最简单的实现方式
在textarea中含有空格键、换行键的时候,如果直接上传给服务器,之后在返回的数据中,如果将数据再次以textarea的值来显示,空格键和换行会依然保留,但是如果以其他标签的时候为什么就没有保留空格、换行呢?原创 2017-03-08 21:32:10 · 3254 阅读 · 0 评论 -
移动端页面滑动,菜单到顶部之后定位在顶部(position: sticky;)
在移动端的页面中,我们会遇到有一部分是一直显示的,比如说菜单项,当页面初始化的时候,它处在文档流内,当页面下滑的时候,并且菜单到达顶部之后就会一直定位在顶部,并且上滑的时候,菜单又会回到文档流。到这里大家应该会有点思路,定位在顶部不动了,那就肯定用了position: fixed;,再实现可以回到文档流,那这一块就最好使用定位布局,方便控制。下面是我根据这个来写的一个:<!DOCTYPE html>原创 2017-03-30 21:35:36 · 14091 阅读 · 5 评论 -
border-radius的趣味妙谈
border-radius是用来设置圆角的,主要是以length和%两种形式来进行设置,那两者设置的圆角是否一致呢?原创 2017-04-23 21:50:03 · 524 阅读 · 0 评论 -
cursor的所有样式
cursor可以为按钮或者某些区域强制定义一种鼠标移上去的鼠标光标形状。cursor可以定义的鼠标光标形状多种多样,相当丰富。原创 2017-04-24 21:54:06 · 5144 阅读 · 0 评论 -
水平垂直居中——position与margin的结合使用
水平垂直居中在页面的布局中还是会经常用到的,比如讲一个图片水平居中显示?我们都知道水平居中的时候我们可以使用margin: 0 auto;,但是在垂直方向上使用margin: auto 0;确是无效的。这是为什么呢?原创 2017-06-26 23:35:14 · 3548 阅读 · 0 评论 -
CSS里的visibility属性有个鲜为人知的属性值:collapse
CSS里的visibility属性有个鲜为人知的属性值:collapse转载 2016-09-09 19:04:46 · 1719 阅读 · 0 评论