随笔分类 - CSS
摘要：相信大家对列表展示早已不陌生了，工作中也经常会有这样的需求。那我们如何实现一个既简单又美观的列表展示呢？ 首先让我们来看一下效果： 上面是普通的展示列表，而下面则是我们处理过的展示列表，是不是感觉美观了很多啊。 实现： 核心属性： linear-gradient（线性渐变） 思路：绝对定位一个盒子到
阅读全文
摘要：今晚上我们来简单的聊一聊CSS的伪元素，多说无益，开聊 GG: 话说盘古开天辟地之时。 QQ：嗨，咱今天还能讲的完吗？您给来点实际的啊。 GG：要听实际的是吧，得嘞，那今天咱就来聊一聊CSS里的伪元素，这个可以吧。 QQ：可以可以，您来。 GG：话说这个CSS的伪元素呢，想必您各位也应该有所耳闻，今
阅读全文
摘要：昨天被问到一个很有意思的问题，单个div元素怎么实现双边框，当时脑子懵了一下，然后就回答出来用伪元素，别的实在是想不起来了，所以在此总结一下子防止以后再被问到 总结了一下大约有以下几种方案: 伪元素实现 box-shadow outline 下面我们来具体看看实现方法,为了看上去效果更好，我将直接使
阅读全文
摘要：在前端领域，当我们想在ie6及以下版本和标准浏览器的样式不同我们怎么做呢 此时此刻不得不提到过滤器：即一种对特定浏览器显示和隐藏规则的声明方法 1.下划线属性过滤器 符合标准的浏览器都会忽略这个声明，而在IE6及更低浏览器则会被解析 在标准浏览器只会解析min-height，而_height不起作用
阅读全文
摘要：关于CSS定位都是老生常谈的问题了，不过有一个问题，最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static：静态定位，没有特殊的定位规则，遵循正常的文档流对象 2.relative：相对定位，相对于元素自身进行定位 3.absolute:绝对
阅读全文
摘要：置换元素： 非置换元素 个人理解就如字面上那样，非置换就是我用了这个span标签那他就是span标签，内容不会变，但是置换标签不一样，得根据属性来显示具体内容，就相当于一个空盒子，盒子里面的物体是不固定的
阅读全文
摘要：在CSS中有一些属性是可以继承的，跟继承家产一样，哎，一代一代的往下传，而有些属性就比较惨了，不能继承，只能自己来设置。 我简略的总结了一下一些可以继承和不可以继承的属性 可继承 1.字体系列属性：font-family，font-size 2.文本系列属性：text-indent，line-hei
阅读全文
摘要：1.行高无单位 line-height：2 此种写法表示行高为文字大小的两倍，即文字大小为16px,行高则为32px 2.文字风格 font-style：italic/oblique/normal 共有三种属性值，italic：斜体字，oblique：倾斜的文字，normal：正常 italic和o
阅读全文
摘要：这是复习篇的第一个知识点，（CSS权重进制在IE6为256，后来扩大到了65536。而现代浏览器则采用更大的数量）在说这个知识点之前我们先来看一个例子 这个大家猜一下是什么颜色，可能有的老铁会觉得蓝色啊，后代选择符的权重不是各个选择符的和吗，class选择符权重为0010，而类型选择符权重为0001
阅读全文
摘要：说起CSS规则，除了普通规则（属性和值，key:value),可能大家都会想到@media,@keyframes,@fontface等常用的，那剩余的大家是否有所了解呢。 我们先来看一看CSS有哪些规则： CSS的顶层样式表由两种规则组成的规则列表构成，⼀种被称为 at-rule，也就是at 规则，
阅读全文
摘要：我们在构造页面时，会发现有的元素是上下排列的，而有的则是横向排列的，这是为啥子呢 看看上图，我们也没给他设置啥子属性咋就不一样了，其实是因为每个元素都有默认的 display 属性，比如 div 标签的默认 display 属性是 block，我们通常称这类元素为块级元素；span 标签的默认 di
阅读全文
摘要：今天搜索资料时，忽然发现了以前没注意的一个知识点，所以拖过来搞一搞，这个知识点叫做CSS的7阶层叠水平 在说这个知识之前，我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平 这个东西就是z-index属性（此篇为上篇，仅仅讲z-index） 基本含义： z-index通俗来说就是在Z轴
阅读全文
摘要：今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下 （摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完善，对大家有帮助） 1.基本的盒模型知识 CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容
阅读全文
摘要：1.图片间隙 A)div中的图片间隙（该bug出现在IE6以及更低版本当中） 描述：在div中插入图片时，图片会将div下方撑大三像素 hack1：将</div>和<img>写在一行上 hack2：将<img>转化为块状元素，给<img>添加声明：display:block; B)dt,li中的图片
阅读全文
摘要：今天先来说关于BFC的一些基础知识 BFC是块状格式化上下文，它是一个独立的渲染区域，规定了内部如何布局，并且这个布局和外部毫不相干 触发BFC的方法 1.根元素（即html） 2.float属性不为none 3.position属性为absoulute，fixed 4.display为inline
阅读全文
摘要：now，给大家分享一个用flex写的圣杯布局，大家可以参考一下子 首先圣杯布局是两列固定宽度，中间自适应。 我直接说一下步骤，上图，上图 1.步骤1 2.步骤2 上面就是基本的步骤，下面我把代码给大家，大家感兴趣自己拿回去偷偷的撸就可以
阅读全文
摘要：今天给大家搞一个弹性盒布局的实例，最近一直在复习一些基础的东西，所以一直会跟大家分享一些基础的东西 说实话，最近感觉被掏空了，别问我为什么，谁去保健谁知道，哈哈，注意安全，好了步入正题，今天用弹性盒写了一个小例子， 关于弹性盒的一些基础我就不列举了，大家有需要可以去 http://www.ruany
阅读全文
摘要：昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家 1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading 这个是效果图片 下面我直接把代码放上来，大家需要的可以直接拉走 核心思想：（旋转，以及overflow
阅读全文
摘要：CSS的sprites（雪碧图，精灵图） *三个名字都要记住 定义：就是将界面上需要的小的导航按钮图标，小图标整合成一张背景图片 然后用background-position来实现背景图片的定位 优点：1.通过整合减少图片数量从而减少对服务器的请求次数 2.整合图片来减少图片体积 图片整合的原则：
阅读全文
摘要：三种方法 1.父级设置display：table-cell，text-align：center，vertical-align：middle； 2.给图片再加一个同级的span，在img和span上同时添加display：inline-block，vertical-align：middle；再给spa
阅读全文
