![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Css
文章平均质量分 66
眷恋天空的驴-Anikinly
一切归零!
展开
-
CSS3中的Transition属性详解
W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” 语法: transition 属性是一个简写属性,用于设置四个过渡属性:transition-propertytransition-durat原创 2017-03-17 10:16:59 · 1699 阅读 · 0 评论 -
css sass在chrome浏览器中的调试
http://www.imooc.com/video/7804sass新版本的直接可以按照上面方式进行调试原创 2017-03-17 10:24:20 · 1653 阅读 · 0 评论 -
sass+compass css自动化框架深度解析
缘由: 自动化构建 远离刀耕火种的上世纪远古社会 生产工具决定生产力的主要关系 当你拿着一把锤子的时候,满世界都是你的钉子,当你有一根钉子的时候,你会满世界寻找一把锤子。诱导: 你的注释必须是你代码的2/3,否则就是对不起社会主义。一句话概括:compass就是sass的高级封装,类似jq跟js的关系,使用得心应手,类名一定要有语义化的作用,持续的可维护性提醒: 千万不要使用web原创 2017-03-17 10:22:53 · 996 阅读 · 0 评论 -
css 日常点滴汇总
很少写css有些基本生疏了,特此用做一些常见效果的记录:ortant; bottom: auto !important; float: none !important; left: auto !important; outline: 0px !important; overflow: visible !important; right: auto !important; top: auto !im原创 2017-03-17 10:21:53 · 236 阅读 · 0 评论 -
让ie6,ie7,ie8支持 css3 的部分属性实现全兼容
css3中的一些属性 圆角 阴影 或者渐变等简单,但是在ie678下面很常用的效果如果一直用图片做的话比价鸡肋。PIE: http://css3pie.com/ 论坛: https://github.com/lojjic/PIE目前最先版本是2.0 完全可以实现效果,在项目中使用这里做个记录。下载完主要有以下几个文件: PIE.js PIE.htc使用要原创 2017-03-17 10:21:33 · 493 阅读 · 0 评论 -
display:none和visibility:hiddden
1. 表现层上来说: 二者都会让元素不可见,区别是disply:none是不可见的同时不会占用原来的区域,但是visibility:hidden会占用原来的地方2. 深度理解 测试: 在页面一开始加载的时候display:none 不会进行加载,只有改变为block的时候会进行加载填充。 但是visibility:hidden是在页面一上来的时候就会开始加原创 2017-03-17 10:21:05 · 258 阅读 · 0 评论 -
SASS-预处理语句
安装: 经过无数次的尝试后终于成功的安装了sass到本地版本。v3.4 先下载安装ruby到本地电脑中,然后就是百度各种教程,大概都是使用淘宝的镜像进行的安装,坑爹的墙让大部分的人翻越不过去。 1: 在 https://rubygems.org/ 里面搜索sass,找到对应的版本进行下载到本地 2: 然后执行 gem install 下载文件的地址(拖进来就行) 3原创 2017-03-17 10:20:34 · 289 阅读 · 0 评论 -
flex布局
1: 指定flex的元素,可以是任何元素,在指定flex的时候 display: flex; display: inline-flex;设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。2: 几个常见的属性: a: 主轴项目的排列方向 flex-direction: row | row-reverse | column | colu原创 2017-03-17 10:20:14 · 295 阅读 · 0 评论 -
webapp中的单位
rem: 是相对更节点字体来计算的,1rem = 1rootSize;vh:是根据可视窗口计算的,1vh = 1%viewPoint;rem 是相对根元素设置的字体大小来的。vw是相对屏幕的宽度来的,根元素设置的字体大小可以手动设置,屏幕的宽度是固定的。vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%font-size: 1.5625vw;是怎么回事呢?这个1.5625原创 2017-03-17 10:20:03 · 622 阅读 · 0 评论 -
css高级布局知识点汇总
1:大小不固定的的div中图片垂直水平居中 display: table ; display:table-cell //ie8 .container{ width: 600px; height: 500px; margin: 50px auto; border: 1px solid #ccc; display: table; /* 作为table元素显示 */ background-c原创 2017-03-17 10:19:57 · 441 阅读 · 0 评论 -
css 实现三角原理解释
1:首先一个元素在以下结构下面是个黑色的正方形.div1{ width:0; height: 0; border:4px solid; }2:四块红色和黑色的木板代表元素的四个边框,把他们两横两竖重叠起来,这时候他们在二维平面的投影便成了上面的效果。说到这里,大家该明白了上面的三角形图标是怎么来的了吧:元素没有下边框,而左右边框又是透明的,相当于只有上原创 2017-03-17 10:19:54 · 309 阅读 · 0 评论 -
兼容总结
1:zoom:1Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。而这个属性只要在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等,如:.border{ border:1px solid #CCC;原创 2017-03-17 10:18:54 · 165 阅读 · 0 评论 -
css3 学习
time:2015年7月9日22:53:231.属性选择器:transition:1s (ie8) Chrome(谷歌浏览器) :-webkit- Safari(苹果浏览器) :-webkit- Firefox(火狐浏览器) :-moz- IE(IE浏览器) :-ms- Opera(欧朋浏览器) :-o- 因此,应该先用有厂商前缀的指定样式,紧接着使用无前缀的。这样可以保证当浏览器移除了前原创 2017-03-17 10:18:16 · 322 阅读 · 0 评论 -
【转载】IE6 浏览器常见兼容问题 大汇总(23个)
IE6以及各个浏览器常见兼容问题 大汇总综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作。在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享。 如需转载,请注明出处:网易博客-独行冰海:IE6 浏览器常见兼容问题 大汇总1.原创 2017-03-17 10:17:47 · 276 阅读 · 0 评论 -
overflow:hidden的作用
功能1、隐藏溢出在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来。要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐藏。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当子容器这个div的宽度和高度都大于父容器这个div的时候,父容器并没有被内撑开而是依旧显示为我们指定的宽高。例如:结构原创 2017-03-17 10:17:10 · 377 阅读 · 0 评论 -
CSS定位属性Position详解
1. position:static所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。#div-1 { position:static;}2. position:relative如果设定 position:relative,就可以使用 to原创 2017-03-17 10:17:07 · 209 阅读 · 0 评论 -
css3 box-sizing属性
css3 box-sizing属性box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入width之内,其实就是怪异模式了~ ie8+浏览原创 2017-03-17 10:24:37 · 271 阅读 · 0 评论