好文分享

flex布局和传统的布局有什么不同？ 传统布局：基于盒模型，依赖 display属性 、position属性 、float属性； flex布局：flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 （推荐教程：css快速入门） 设为display:fle…

如何实现css代码复用？ （推荐学习：css快速入门） 建议如下： 1、在做CSS项目规划时，首先写好reset类代码； 因为浏览器对于标签是有默认样式的。 立即学习“前端免费学习笔记（深入）”； 2、划分CSS原子类； 一个大型的项目，会有一些常用的css规则，比如text-align,float…

最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ): 视屏教程推荐：《CSS视频教程-玉女心经版》 最终效果如下: 全屏时: 屏幕宽度小于960px时: 立即学习“前端免费学习笔记（深入）”…

利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 推荐视频教程：《CSS视频教程-玉女心经版》 webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样高。…

首先我们知道用作背景图片的有两类： （推荐学习：css快速入门） 1、一整张大图，尺寸和区域大小刚好吻合； 2、一个很小的条状图，通过repeat后，形成一个很规则的大图背景。 那么如何实现背景图片拉伸填充呢？ 立即学习“前端免费学习笔记（深入）”； 方法如下： 背景图尺寸（数值表示方式）： 代码如…

项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。 先贴代码： Document *{margin: 0;padding: 0} .box{width: 100px;height: 10px;bord…

绝对长度 px px是像素值，是一个固定的长度，比如我们的米，厘米一样。 相对长度 为什么我们需要相对长度rem em等？ 固定长度已经不能满足我们现在的需求了。 立即学习“前端免费学习笔记（深入）”； 举例：比如我们在缩小我们屏幕的时候，我们不仅仅是需要缩小我们的盒子的宽高，我们还想要让我们字体大…

本文目标： 1、掌握css中结构性伪类选择器—enabled的用法 问题： 1、实现以下表单，且使用纯DIV+CSS，必须使用选择器—enabled 附加说明： 1、年龄，身份证，手机号，均是可以输入的，但是地址输入框不可以输入，默认就是湖南 立即学习“前端免费学习笔记（深入）”； 2、整体宽度38…

css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…

CSS Position属性值有：1、static，是position的默认值；2、fixed，生成固定定位的元素；3、absolute，生成绝对定位的元素；4、relative，生成相对定位的元素；5、inherit，继承父级属性值。 1、position: relative;相对定位 不影响元素…