CSS中的百分比值

Author : lovecicy

一、介绍 CSS中有很多的属性可以有百分比值,而这些百分比值所相对的却各不相同,本文就来总结下这些拥有百分比值的CSS属性的百分比值是相对于谁来计算的。 首先有一个概念需要交待,那就是containing block,这里将其翻译成包围块。许多元素百分比值的相对值是根据包围块来计算的,因此对于包围块的定义,就非常重要了。包围块可以理解为一个包围元素的长方形,而包围块的定义对不同元素来说各不相同。 根元素的包围块叫做初始包围块,和viewport有同样的尺寸。其他元素的包围块取决于元素的定位值: static/relative: 包围块为祖先元素中最近的display值为block/inline-block/list-item/run-in/table/table-cell的元素的内容区域 absolute: 包围块为节点树中最近的定位元素的包括padding的内容区域,定位元素即POSITION属性值为absolute、fixed或relative的元素 fixed: 包围块为viewport,即可视区域 二、来看看都有哪些百分比值 知道了包围块的定义,我们再来看看哪些属性有百分比值:[Read More]

standard

Mobile Web开发奇淫巧计

Author : luckyGirl

做了一段时间的Mobile Web开发,遇到一些坑,总结一下: HTML <meta> HTML5 开发一个页面适配所有设备,先从配置<meta>各种标签属性开始。 viewport: 对文档的视图进行配置,示例有强制文档宽度为设备宽度;初始化缩放比例是1:1;最大缩放比例是1;不允许用户进行屏幕缩放;其他属性如minimum-scale,height等 apple-mobile-web-app-capable:IOS特有标签,是否允许全屏模式浏览 apple-mobile-web-app-status-bar-style:Safari顶端状态条颜色 format-detetion:格式检测,是否把数字识别为电话号码,是否识别邮箱 http-equiv=”x-dns-prefetch-control”:DNS Prefetch 是一种DNS预解析技术,对网页中的域名进行解析缓存,减少用户等待时间,提高用户体验  CSS 1px边框 由于Retina屏幕的出现,设置1px的边框,实际上却显示2px,有时就会略显粗壮,用JS可以进行处理,但兼[Read More]

standard

Sticky定位

Author : lovecicy

先来看个例子,在Safari或者火狐下打开哦: See the Pen CSS Sticky headers by YuC (@yuuuuc) on CodePen. 或者再看个例子:HTML5Rocks 先来解释下sticky定位的作用是什么:当用户滚动到某一位置时,某个元素就固定在页面上了。 这样的场景非常常见,比如iOS或者安卓的联系人,当你滚动时,对应的字母总在最顶端,当下一个字母上来时,会将前一个字母顶上去;或者BootStrap的文档页面,初始状态下,右边的菜单会随页面滚动而滚动,但是当菜单顶部滚动到页面顶部时,再往下滚,菜单就固定在页面顶部了。 通常(现在),我们的做法是使用js来监听用户的滚动事件,当滚动到某一高度,就将特定的元素设置为position:fixed。类似下面的做法: 这样的做法非常简单,但是如果你要对非常多的元素进行这样的操作,那将会是灾难性的。 为什么JS的做法不够好呢? Something else to consider is that more and more browsers are implementing hardware acceler[Read More]

standard

文字溢出 text-overflow:ellipsis

Author : luckyGirl

文字溢出是常碰到的情境,div(或其他标签)太长多余的文字被截掉然后用…替代,最简单的办法是使用CSS属性text-overflow:ellipsis,之前碍于Firefox不支持此属性,不得不用其他办法来兼容,如今所有浏览器已经支持此属性,在此Mark一下。 示例: CSS方法就可以实现所有主流浏览器对于文字溢出用省略号表示 .textOverflowExample{   width:20em;   overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap;}

standard

CSS3 布局神器–flexbox

Author : luckyGirl

flexbox,是一种新的布局模式–伸缩布局,是为呈现复杂应用与页面而设计的,与浮动或是多栏等块布局相比,它是更简单强大的分配空间与对齐内容的工具。   首先,让我们通过一个简单的例子,看看应用flexbox会有什么效果。这是个常用的三栏式布局模式,通常还会期望三块内容等高,不但能达到响应式布局,而且尽量保持中间区域面积大以保证主区域有足够大的显示空间,使用flexbox就可通过简单几行CSS满足以上需求。 接下来flexbox有哪些属性,是如何轻松愉快实现以上布局吧   一、伸缩器能做什么呢? 设置任何伸缩方向(上、下、左、右均可) 只通过样式重排显示顺序(使视觉顺序跟源码无关) 沿着单一粥折行 充分利用可用空间,扩展内容尺寸,使内容更加紧凑 灵活控制对齐方式   二、伸缩容器(flexbox)基本术语 设置元素 display:flex 或是 display:inline-flex,此元素就为一个伸缩容器,伸缩容器的每个子元素都会成为一个伸缩项目,当伸缩项目仅包含空白时,则浏览器将之视为 display:none   注:在不特殊设置时,默认渲染方向是从左到右,主轴方向[Read More]

standard

word-break, word-wrap和white-space

Author : lovecicy

一直以来对于word-break,word-wrap和white-space这三个css属性的作用不是很清楚,不知道对于文字换行的属性为什么需要使用3个样式,每次碰到需要换行或不换行时就需要拼命回忆,然后试着组合使用,以至于对这三个属性的区别越来越迷糊,今天准备一次性解决这个问题。 请看jsfiddle里对word-wrap和word-break的比较。 word-wrap 定义: The word-wrap property allows long words to be able to be broken and wrap onto the next line. 此属性允许长单词被截断到下一行。 语法: word-wrap: normal(default)|break-word; 各主流浏览器都支持 值 描述  normal  Break words only at allowed break points 只在允许的断字点换行(浏览器保持默认处理)  break-word  Allows unbreakable words to be broken 在长单词或 URL 地址内部进[Read More]

standard

div + css 使footer置底

Author : luckyGirl

现在网站比较流行 导航(Header)一直固定在顶部,footer一直固定在底部,前者使用position:fixed很容易实现,而将footer一直固定在底部可能会比较棘手,尤其是要兼容各种浏览器。最近发现了个比较好的方法,简单几行CSS就可实现这个功能。 HTML结构 <html>     <head></head>     <body>         <div></div>         <div id=”footer”></div>     </body> </html> CSS *{margin:0} html,body{height:100%;} .wrapper{min-height:100%;height:auto !important;height:100%;margin:0 auto -4em;} #footer{height:4em;} 几点注意: 1. 如果想要fixed的header,header要加在wrapper之内,且不能在wrap[Read More]

standard

IE下margin:auto失效

Author : lovecicy

最近碰到一个问题,在IE8下,margin:auto失效了。在网上搜了下,发现好多人遇到这个问题。 但是,在MSDN的文档表明,IE6及之后的浏览器都支持此样式。那到底是什么原因会失效呢。 原来出问题的是<!DOCTYPE>。当没有指定<!DOCTYPE>时, IE会以怪癖模式来显示文档,即IE5.5的模式,因此margin:auto会失效。而其他高级浏览器则不会出现问题。 但是我看了下我的文档,发现是有定义<!DOCTYPE>的。只是在php中,多个文件include以后,在一个被include的文件顶部的注释被放到了<!DOCTYPE>之前,因此引起了这个问题,在把注释去掉之后,问题就解决了。 参考:http://www.lifelaf.com/blog/?p=97

standard

IE hack

Author : lovecicy

通过4个字符,实现对IE6、7、8的css hack: body {  color: red; /* all browsers, of course */  color : green\9; /* IE8 and below */  *color : yellow; /* IE7 and below */  _color : orange; /* IE6 */ } 当然,你无法保证下一个版本的Chrome或者火狐不会将 ‘*’ 和 ‘_’ 作为新的前缀使用,所以,要视需求决定是否使用这些hack。如果仅仅是为了在IE7下修改一两个属性,不妨用下面的方法: <!–[if lte IE 7]> Make IE7 happy. <![endif]–> 参考:nettuts+

standard

CSS探索: 负边距巧用

Author : luckyGirl

之前对于负边距的使用有限,最近经常听到这个词,应用场景蛮多,包括流布局,等高布局等,于是乎就总结一下。 一. 原理 1. 对于普通文档流(normal flow)中的元素(除浮动/绝对对位/固定定位),这些元素的位置跟随文档流的变化而变化。而负边距会使这些元素在文档流的位置发生偏移,与相对定位不同,通过负边距偏移的元素会放弃偏移前所占据的空间,让文档流的其他元素“流”过来填充这部分空间,如下图 当块元素不设置宽度(或width: auto)时,盒模型对于宽度和高度的计算公式为: 子元素的宽度 = 父元素的宽度 – 父元素的左右padding – 子元素的左右margin 父元素的高度 =  子元素最下边界 – 子元素的最上边界 由此公式可以解释例图的现象: a) 水平方向:当块元素的宽度 不进行设置时,负边距可以加宽元素的宽度 b) 垂直方向:父元素的高度减少了 15*4 即60px,总的来说,元素的上下边界由margin决定,而负边距相当于将边界向里收而如论实际尺寸是多少,在标准浏览器中父元素还需要一个 overflow: hidden属性 c) [Read More]

standard