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

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

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

IE, FireFox, Chrome浏览器支持CSS实现Alpha半透明的方法

Author : lovecicy

在网站中, 使用半透明效果的场景很多,但是各个浏览器对于标准的支持又不一样,在网上搜索了一下,总结了下各个浏览器的实现方法。 使用下面的CSS代码,基本可以覆盖主流的浏览器: -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”; /*IE8*/ filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/ opacity: 0.3; /*Opera9.0+、Firefox1.5+、Safari、Chrome、IE9+*/ 现代浏览器都支持opacity属性,主要针对IE8及之前的IE浏览器。

standard

IE haslayout详解

Author : luckyGirl

要掌握好浏览器的兼容问题,IE无疑占据重要地位,虽然现在做的项目无需兼容IE6,但是IE6还是占据一定市场,做好IE6的兼容还是很有必要滴,在集合IE bug之前,首先了解一下IE的haslayout属性,许多IE的布局问题都是来源于它。   IE/Win的显示与其他浏览器不同的原因之一是,显示引擎使用一个称为布局(layout)的内部概念。 什么是layout? “Layout”是一个 Internet Explorer for Windows的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下,所有元素都控制自己的尺寸和定位。但是,这会在IE中导致很大的性能问题。因此,IE/Win 开发团队决定只将布局应用于实际需要它的那些元素,这样就可以充分地减少性能开销。   拥有layout的定义 一个元素”得到 layout”,或者说一个元素”拥有 l[Read More]

standard

清理浮动的几种方法以及对应规范说明

Author : lovecicy

原文:http://w3help.org/zh-cn/casestudies/001 作者:钱宝坤   前言 浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响其后元素布局。 我们将现有已知的清楚浮动元素方法罗列下: 采用一个HTML标签,以及css的clear属性,来手工清理浮动; 采用伪类:after,动态建立一个块元素,设定 clear 属性,清理之前的浮动元素; 采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素; 采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素; 使用 TABLE 以及 TD 标签作为浮动元素容器; 采用 float:le[Read More]

standard