CSS设置盒子容器(div)高度(height)始终为100%
前言 有时需要让一个盒子容器的 高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。 demo 如果想让一个元素的百分比高度...
CSS3里box-shadow属性的使用方法示例详解
CSS里面的属性很多，有些属性长时间不用，就容易忘，尤其是那种需要设置多个值的属性。比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实现对应的...
flex布局换行空白间隙之align-content的使用
一、本文实现的效果图如下：布局右侧使用flex布局，超过3个则换行。 父元素代码如下： .nav-right{ width: 75%; padding: 10px; display: flex; /* 默认是水平的 */ flex-direction: row;/*设置...
CSS 中使用径向渐变实现卡券效果
前几天，同事接到一个积分商城项目，其中有一个卡券兑换礼品功能。我想了一会没什么好的思路，就忙自己的项目去了。但想到以后自己可能也会遇到类似的需求，所以周末学习整理了下几种卡券效果的...
纯CSS3实现鼠标滑过按钮动画第二节
有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？ 前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就...
详解css3中dispaly的Grid布局与Flex布局
Gird布局与Flex布局有一定的相似性，都是对容器的内部项目进行划分。 Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作成一维布局 Grid布局则是将容器划分成行和列，产生单元格，然后...
看完不迷糊的 CSS 盒子模型介绍
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻...
H5中取消a标签在点击时的背景颜色的方法
1、取消a标签在移动端点击时的蓝色 a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; } 2、使用图片作...
CSS变量对JS交互组件开发带来的提升与变革示例代码详解
一、CSS变量带来的质变 CSS变量带来的提升绝不仅仅是节约点CSS代码，以及降低CSS开发和维护成本。 更重要的是，把组件中众多的交互开发从原来的JS转移到了CSS代码中，让组件代码更简洁，同时让...
flex布局实现上下固定中间滑动的布局方式
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾...