xiaoho

xiaoho

学习学习再学习,我只想安静地做一个重构学习者。 博客<a href="http://xiaoho.com">xiaoho</a>

table-cell的手机应用场景

前言 最近在前端观察看见了这篇老文章,看见了元素居中的5种办法,其中提到了display:table-cell这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒其实可以用到移动端来。 在PC端,应该很少用到 display:table-cell 这个属性,究其原因在于兼容性【IE8+以及现代浏览器才支持】,或者说很少去关注这个标签。此标签的用处就是垂直居中布局功能,这个功能可以让我们不用依赖 margin:0 auto 属性达到居中的目的,并且 margin 外边距还达不到 table-cell 的效果。 元素居中 让一个块级元素居中,我们都想到了 margin:0 auto 属性,一般的最外层的布局经常看见这属性,但是这样的居中只是把元素整体居中,元素中的内容依然按照正常流来排列,从左上角到右下角。但是这样并达不到我们需要的效果,我们需要的效果是不管元素里面的内容有多少,还是添加新内容都是垂直居中于元素。 关于垂直居中的办法,用的最多应该 position + margin 负值的办法达到居中的效果 .test{ height: 400px; position:

css

引入css外部样式表

前言 为什么会有这篇文章,外部引入样式有什么好谈的,不外乎就是 就这么简单,还有什么,so easy,我之前都是这么认为的你肯定比我聪明多了~_^,但是当做一个页面在微信上浏览并且修改再浏览的时候我发现不对劲,因为已经上传的样式表木有改变,IOS还好,可以强制刷新页面。但是安卓端这块一直在用微信的缓存,还没有刷新的按钮,所以觉得css引入问题目测应该没有这么简单。 好了,下面都是一些自己的纯扯蛋瞎扯,欢迎前辈多拍砖。 关于路径 在还没有说之前先说下关于css引入的2种方式: 相对路径(Relative Path),顾名思义:就是css文件相对某一个参照物的位置。上物理课的时候老师都会提到相对运动:指某一个物体对另外一个物体的相对于一个固定参照物来是相对运动的。我们走路看汽车的时候觉得汽车往后走,汽车看我们的时候是往前走,那么相对路径也是酱样子的,网页所处目录就是我们的参照物。像刚刚上面这段css代码的引入就是一个相对路径地址,test是网站的目录,style.css文件跟这个网页文件是同处一个目录层级,如图: 那么在网页文件index.html引入css应该是 假如说css文件放在跟index.html同级目录,名为css文件夹里面,类似这样: 那么这时候引入css的时候就应该是 假如css放跟目录也就是test这里 那么引入css就应该是 “/”斜杠符号在这里表示的就是根目录,也就是这些网页文件之间联系的参照物。 绝对路径(Absolute

IE

css透明度的一些兼容测试

前言 网站丢给了外包公司来弄,但是老外写css的时候似乎没有考虑到国内的浏览器市场,于是只用了opacity这个属性来写,当IE8-的浏览器访问的时候,浮动层就像一块大黑斑药膏贴在哪里。很显然,婀娜多姿的模特被黑色药膏挡住了,用户完全感觉不到药膏下的她是有多么秀色可餐,因此也没有点击“性趣”去点击这条新闻了。所以必须来修改,让婀娜多姿的图片有种朦胧美。 我们希望起码IE7+的效果都是这样 这只狗有点丑,它在微博上求助各路PS大神,请它玩坏 代码进行时 HTML代码如下: <li> <img src="" alt="" /> <p></p> </li> css代码如下 .item li { position: relative; width: 240px; height:

动画

利用css3-animation来制作逐帧动画

前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇。今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animation 属性来写了一个菊花打转的loading,然后google了一下知道了有这么一个css动画组件叫做 animation.css 其实还有很多这种动画组件,他们很多都是基于jquery来操作的。今天我们不是来谈他们怎么用的,只是来了解一下执行这些动作后的这个animation属性,到底是怎么起到作用的。 先上最终demo:奔跑的小人物 或者拿出手机手机扫一扫 动态效果如下 假如你想要用非gif做一些css的逐帧动画,那不妨可以看看这篇文章,说不定哪天还真用得着呢 animation介绍 对于这个css3属性,w3c定义其为实验性技术,那么自然对于那些非高帅富浏览器来说都是痛,通过caniuse我们可以直观看见这个属性浏览器支持情况: IE10+和firefox33+支持这个属性切不需要写私有前缀,chrome31+,safari7+,andriod4.1+都需要写上自己的私有前缀才可以支持,不过oprea电脑端支持,但是移动端的却不支持,无解。w3c的官方文档 属性名:animation属性值: single-animation初始值:详见独立属性值应用于: 所有元素继承性:无百分比: N/A计算值: single-animation的值有<

css伪元素

利用伪元素仿苹果手机官网导航

前言 好久没有上苹果官网了,周三用手机登录 苹果官网 的时候,发现苹果官网的导航用了自适应,并且把所有的导航都浓缩在一个打开关闭的小图标,如下图: 看见左上角这个两杠的东东了嘛,点击弹出导航,再点击然后隐藏,右键审查元素看了一下,用到的是svg标签 <svg x="0px" y="0px" width="100%" viewBox="0 0 96 96" class="gh-svg gh-svg-top" enable-background="new 0 0 96 96"><rect

filter

关于IE中CSS-filter滤镜小知识

前言 前段时间在做一个专题的时候用到了opacity不透明度属性,因为设计图上是半透明背景,白色文字 所以在IE用到了其支持的filter属性,听说这个属性还有不同的效果,不单单就只有不透明度而已,所以抽个时间赶紧来充下电。 有时候我们很习惯的用到不透明属性opacity来增加层次感或者增加用户体验,但因这个属性是css3属性,所以对于低级浏览器的兼容性来说就达不到我们预期的效果。一般而言,我们都尽可能少用一些浏览私有属性-webkit,-moz,-ms,-o,这也仅仅解决了市面上很多浏览器的问题,面对IE,特别是IE9-版本的,也是显得有气无力。因此假如要使得市面上的浏览器达到统一的近类似效果,那么是非常有必要写上IE私有属性,触发IE hasLayout 特性,比如这样: .opacity{ opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/ } OK,这样的代码可以基本兼容目前市面上的浏览器。今天我们的重点是后面这个 filter 属性 filter历史 其实这个filter是CSS1的属性了,但是因为老版本的IE4.0~IE9对此支持不怎么感冒,对浏览器的支持也不稳定,

bestcss

css3中的几何图形shape研究

前言 估计大家在日常工作中都会用到css形状,但是目前天朝中使用到最多的估计就是圆(circle)、椭圆(ellipse)、各种三角形形状,但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形,那么请前往百度百科,就算是我们用:after :before 这些伪元素来构造我们所需要的形状或者利用边框来曲线救国,但是对于代码来说还是太长了,有没有直接定义几何图形或者是多边形的属性。今天来说说 shape 摘要 关于shape的应用,个人感觉有点奇葩,为什么这么说,因为只能应用于float 值中,假如不是浮动元素,那么对不起,不适用。所以个人觉得一般用这个 shape 来构造一个我们工作中的形状,应该是带有浮动的图像,像impressivewebs这种左侧图像右侧文字的头像特别适用 不过,只能应用于带有浮动属性的元素才能使用这个 shape 属性,想必兼容性应该也不咋地,通过caniuse 可以看得出这个属性兼容性在各个浏览器,哪怕是移动端的兼容性惨不忍睹,只见飘红不见绿。 学习还是要的,说不定哪天用得着呢? 既然这货是给带有float属性的元素使用,那么是时候说说浮动元素了 浮动行为和盒子模型 对于浮动,想必大家在进入到这行的时候,只要是设计稿有明显的左右设计,那么就很喜欢用

text-shadow

css3文字阴影属性text-shadow

前言 前面我们曾经学习了盒子阴影属性box-shadow,这篇文章说的文字阴影属性text-shadow。小文章一篇,希望大家通过这篇文章再来回顾一下box-shadow盒子阴影属性。 text-shadow属性值 对于w3c对于text-shadow的规范如下: 属性名:**text-shadow**属性值: none | [,]* 初始值:none应用于: 所有元素继承性:是百分比: N/A计算值: 1、none,没有指定任何的值,文本形式按照用户代理或者csser设置的文本形式展示 2、[<shadow>,]*,每一个shadow(阴影值)之间用逗号(,)隔开,*表示可以重复无限制。其中shadow的值有如下属性值: shadow的值有 [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y>

webapp

关于webapp中的文字单位的一些捣腾

写完之后发现,这篇破文章用的图片比较多,假如流量不多的童鞋,看到这段文字马上按返回键,回家开电脑再看,高帅富者直接忽略。 前言 文字是网页内容的一枚大将,我们无时无刻都在看着它,只要是你盯屏幕上的任何一个地方都会有文字。地铁上无时无刻都在盯着屏幕上的人对于文字更为敏感,太大不行,太小TN又看不清上面到底在说什么,有时候车一晃完全是蛋疼的货。下面一篇文字就是针对webapp的文字做了一些小捣腾,肯定有很多不足的地方,欢迎补充。 有必要了解一下我们所常见的数值。 关于单位 对于webapp上文字用什么单位的问题,一直以来都是让我们csser头疼的问题,公说公有理,婆说婆有理。有人说px好,有人说em自适应,有的说百分比牛逼,rem文字出来就跟风说目前最好的就是rem单位。不管是什么说,我们还是要实地捣腾一下。 相对PC端,我们基本要做的就是根据设计图设计出来的文字大小,PS上是什么字体大小我们就直接在css控制文字的大小,基本都是以px像素为单位的,当然除了自适应页面的文字需要特别使用em或者rem外。所以对于pc端只要不涉及到自适应页面,我们通常的做法就是px通吃,一个字“爽”。 pc端中的px像素单位是针对电脑屏幕来说的一个单位,对于桌面上来说,衡量屏幕尺寸的就是分辨率了,1920*1280的分辨率屏幕,横向就是1920像素,纵向1280个像素点(高清屏没研究过),那我们设置一个字体样式 font-size:12px 计算得出来的应该是相对于电脑屏幕分辨率的12个单位长度,

font-face

再说iconfont和font-face

前言 简单说完css边框和背景属性,那么今天就轮到css3字体属性值了,网页最最最最最最重要的莫过于内容,但是内容的主体是文字,所以文字才是大头。 乍一看这标题就有很明显的菊(蛋)花(疼)味,假如说我要再重复一遍@font-face泼出去的水又收回来重复利用的属性的话,感觉有点索然无味,大众审美会疲劳。各位看了会嗤之以鼻,不屑一顾!当然了,简单的介绍那是必不可少,比较普及率没有这么高嘛。 iconfont和font-face到底存在什么乱七八糟的事情呢,假如你看过前端观察CSS3 icon font完全指南和小胡子哥再探@font-face及webIcon制作 就会大概的知道其实他们是相辅相成,相互依懒的关系,缺一不可吧。 好吧,调情开始。 初始font-face 每次介绍一次新属性之前,都要把其属性值先简单介绍一下,这样可以让同行加深一下印象,对于@font-face这个属性,mozilla 的语法如下 @font-face { [font-family: <family-name>;]? [src: [ <uri> [format(<string&

webapp网页调试工具Chrome Devtools

前言 css3说太多了,会显得文章显得千篇一律:介绍,介绍~demo,完结,然后就没有然后了。所以时不时插一篇扯蛋的玩意,起码还可以调节一下胃口,咸的辣的哪个喜欢就拿克(去)。 之前想要测试手机demo的时候都要先把电脑屏幕拉窄,然后用自适应的办法来捣腾,但是我们都这样做其实并不是符合手机屏幕标准的。现在的智能手机都是以每英寸包含有多少像素点来衡量屏幕清晰度,而不是像PC端的屏幕清晰度都是以像素点来作为基准,因此假如老是按照拉窄屏幕来试图获取手机上显示效果显然不全对。 当然,作为一个非智能设备研究者,我们没发能像他们知道这些点究竟是通过什么高科技工业技术得来,我们只关心的是:假如射击湿给我们一张移动手机PSD稿,当我们写完页面的时能快速的调试我们所写的页面是否能较为完美地还原设计稿。 所以,来学习一下Chrome DevTools之webapp调试界面是非常有必要的,你说呢? Chrome devtools初识 最近更新Chrome到了40.Dev版本,打开网页按F12之后惊喜的发现原来调试工具有了新的改变,默认在底部的调试工具调整到右侧。对于大屏显示器的童鞋来说这个用起来应该会很舒服,但是小屏幕的同学就会很纠结了,假如你想要在底部显示那么还是按照老办法:长按倒数第二个按钮,就可以让调试工具横屏或者侧屏切换。 今天我们的猪脚是webapp调试,所以各种什么的都直接pass掉,直接点击手机小图标进入到webapp调试界面 在这里,我们可以看见了和PC端不一样的调试界面,首先是调试界面的背景发生了改变,不是PC端的白色背景,取代的是由像素点组成的深色背景。 1、device:各种手机设备,

分享会

唯品会前端分享小结

前言 听说周六很多的技术分享会如火如荼地举行,有幸参加了1/N个,同时,我会不好意思地跟你说,这是我第一次参加这类活动,真的没有像VIP家权兄逗你.. 我要声明:下面一开始会有一些前奏(你懂的),然后才会进入正题,假如你不想有前奏的人,直接进入正题,那么我就不送你了,飞机票在这里 本次从大深圳大老远跑去广州荒村(芳村)花海街20号唯品会的总部倾听他们的前端分享会,受益匪浅,表示要学习的东西还有很多很多。为此,在坐车回来的路上,我就在想需要写一篇文章来归纳一下别人讲过的一些经验,总结一下前辈走过的坑,让自己跳入另外一个坑。好吧,我表示不如VIP行政MM这么能在大讲台上准确无误地说到9分30秒,然后咔嚓,因为码到这段文字的时候,其实已经过了10分钟了。。。 走入唯品会 在查找怎么去唯品会的时候在街边十字路口的地方看见了一家粥店,广州的粥是全国都出了名的,所以带着好奇心去点了一碗。6.5一碗鱼片粥,3.5糯米鸡老板外送一份不知道名字的点心,正好10块钱,我只想说这有肉有菜的尼玛比大深圳便宜多了。我为什么写这段为开头,后面我会提到。 唯品会在专门的摆渡车去公司,但更喜欢徒步,因此我自己找过去了,确实很挺好找,路口拐角处就有一个标识牌 再往前300M左右就到了大门,虽说是大门,

css3

css3新增3大背景属性 clip, size, origin

前言 本篇文章有点长,假如你没有耐心看完请直接点击浏览器右上角按钮,要么就是静下来慢慢看完,假如有理解不到位的地方或者我说得不好的地方,那么问题就不要来了,直接丢砖过来。谢谢!O(∩_∩)O 好了,最近进度有点慢了,继续来发css3的教程,写完css3背景属性之后我去研究下Google 开发者调试工具之webapp调试工具栏。智能手机的出现让HTML5+CSS3有了一个全新的舞台去演绎。很多的单页面都应用到了css3的酷炫效果,所以捣腾一下webapp开发工具应该可以帮助自己了解一下相关知识。算是一个加分项么。。。 前面的几篇文章已经介绍了边框属性,那么今天我们正式来入手这个背景属性,css3中新增了3大属性,分别是背景裁剪(background-clip)、背景尺寸(background-size)、背景起点(background-origin),因为涉及到的知识点不是很多,所以在这里一一写出来,算是整合吧。 背景裁剪 background-clip 先来说说背景裁剪属性clip,假如你看过前面的文章的话,那么你就会对裁剪属性有一丝了解。不过边框图片属性中是切片属性slice而非clip,对于其含义,前者是用刀子随便切,后者是为了某个区域而裁剪额外的区域,比如说桌布,想把尺寸为1.2M1M桌布正正方方地码在尺寸为1M1M的书桌上,那么必须用剪刀把多余的0.2M卡擦掉!而slice可不管你这么多,使出十八般武艺一道乱剪。先来看看clip的语法 属性名:

边框半径

css3:border-radius圆角边框详解

前言 今天来聊聊这个 border-radius 属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角。当年前辈们都是用图片君搞定圆角的年代或用一条条边框构造的年代已经一去不复返,而移动互联网的高速发展为 border-radius 属性的飞速发展,so今天就来聊聊圆角边框。虽然英文翻译过来叫做半径弧度,但是为了能让大家更加熟悉,下文统一使用圆角半径来代替。 相关介绍 这个 borde-radius 属性其实也是一个简写值,它分别是 border-top-left-radius(左上圆角半径), border-top-right-radius(右上圆角半径), border-bottom-right-radius (右下圆角半径),border-bottom-left-radius(左下圆角半径),如下图所示: 说到半径,我突然想起来了以前数学中学过关于圆跟半径的关系,百科如下: 在圆中,连接圆心和圆上任意一点的线段叫做圆的半径。通常用字母r来表示。 在球中,连接球心和球面上任意一点的线段叫做球的半径。 正多边形所在的外接圆的半径叫做圆内接正多边形的半径。 css中的radius多少也跟圆扯上关系,不过要分椭圆还是圆,因为css中分了垂直半径和水平半径。而几何中的圆只要确定了半径就可以画出一个圆出来。css中圆角,当使用一个值时,确定为圆角;当使用两个值时,确定一个椭圆圆角,但是不管是圆角还是椭圆角其实都有点像是背景和设置这个圆角半径的重叠产生的,浏览器会去除他们的没有交集的部分,留下有交集的部分,

border-image

css3:border-image边框图像详解

自我介绍 hello,大家好,我叫小黑,也叫xiaoho,目前喜欢并从事写页面。因为不喜欢在那些类似BBS型的论坛上发帖,所以之前在html-js上发表几篇戳文,现在申请了前端观察打字员,在这里谢谢神飞童鞋,虽然我不懂他是干嘛的~不过为什么选择在这里发表文章的缘由就是下面这句话: 向来中国的前端开发领域,就像一盘散沙一样,每个人每个站都各自为营,高手就像就像天空的星星一样多,但是他们的成就却很少广为传播,初学者却苦于在大海一样的设计中寻找自己的参考。 我非圣人,我只是把我自己所学所想的表达出来,毕竟个人想法有限,假如有悖论或者冒犯之处,还请拍砖,大家一起在争论中提高。还有,也许你们可能也会奇怪,为什么网上有这么一大把的学习的文章,类似的文章还要自己写出来,我的个人想法是:只有自己亲自去实践过才有发言权。 那么问题来了:怎么对我的言语进行反驳呢?在评论中猛戳! 前言 对于这个border-image属性已经不是什么新奇的事情了,也是一个老生长谈的话题。这是属性从很多年前已经出现了,但一直形单影只的,似乎不被看好,但是假如你对此深入研究之,想必其用处还是多多,不过很可惜到目前为止对于浏览器支持还不比其他css3属性多,特别是IE,只有IE11以上才支持,详情请移步 border-image兼容性。不过很好,对于纯正的现代浏览器和移动浏览器支持度还是非常牛逼哄哄的,所以今天就来详解一下这个属性的各个值。 border-image摘要