随笔分类 -  CSS2.0

水平居中和垂直居中
摘要：1.水平居中(1) 文本、图片等行内元素的水平居中 给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。(2) 确定宽度的块级元素的水平居中 通过设置margin-left:auto;和margin-right:auto;来实现的。(3) 不确定宽度的块级元素的水平居中 方法一: 使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中! 将需要居中的部分包含在table标签内，对t... 阅读全文
posted @ 2012-09-13 15:25 子非魚87 阅读(38144) 评论(1) 推荐(3)
relative、absolute和float
摘要：position:relative和position:absolute都可以改变元素在文档中的位置，都能激活元素的left、top、right、bottom和z-index属性。（默认这些属性未激活，设置了也无效） 设置position:relative和position:absolute都会让元素浮起来，会改变正常情况下的文档流。 不同： position:relative会保留自己在z-index:0层的占位，left、top、right、bottom值是相对于自己在z-index层的位置。 position:absolute会完全脱离文档流，不再z-index:0层保留占位符... 阅读全文
posted @ 2012-03-13 11:42 子非魚87 阅读(4423) 评论(3) 推荐(1)
display:inline-block
摘要：inline-block,行内的块级元素,它拥有块级元素的特点,可以设置长宽,可以设置margin和padding值,但它却不是独占一行的. IE6和IE7支持block,inline,none. IE6和IE7不支持inline-block属性,它们的inline-block属性其实只是触发了行内元素的hasLayout,使行内元素拥有了一些块级元素的特性.其效果和zoom:1是一样的. 在IE6,7下display:inline-block只能对行内元素实现,如果是块级元素就不行.(只能使行内元素能设置高宽这样的属性,但不能使块级元素不独占一行,即对块级元素无效). IE8和火... 阅读全文
posted @ 2012-03-13 10:50 子非魚87 阅读(317) 评论(0) 推荐(0)
块级元素和行内元素的区别
摘要：块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度. 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 块级元素可以设置width,height属性. 行内元素设置width,height属性无效. 块级元素即使设置了宽度,仍然是独占一行. 块级元素可以设置margin和padding属性. 行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padd... 阅读全文
posted @ 2012-03-13 10:34 子非魚87 阅读(3961) 评论(0) 推荐(0)
CSS hack
摘要：1.IE条件注释法只在IE下生效<!--[if IE]><link type="text/css" href="..." rel="stylesheet" /><![endif]-->只在IE6下生效<!--[if IE6]><link type="text/css" href="..." rel="stylesheet" /><![endif]-->只在IE6以上版本生效<!--[if gt IE 阅读全文
posted @ 2012-03-13 10:17 子非魚87 阅读(306) 评论(0) 推荐(0)
关于margin属性
摘要：margin有个特殊的样式,相邻的margin-left和margin-right是不会重合的,但是相邻的margin-top和margin-bottom会产生重合. 如果不确定上下margin特定不稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂原子类. 阅读全文
posted @ 2012-03-13 09:56 子非魚87 阅读(199) 评论(0) 推荐(0)
CSS reset
摘要：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}table{ border-collapse:collapse; border-spacing:0;}a{ text-decoration:none;}fieldset,img{ border:0;}address,caption,cite,code,dfn,th,var{ font-style:normal; font-weight:normal;}ol,u 阅读全文
posted @ 2012-03-09 10:03 子非魚87 阅读(174) 评论(0) 推荐(0)
全屏透明遮罩层
摘要：在网上转悠的时候，看到了一篇不错的效果，便转载过来，以免以后用的时候难得找。 主要是运用"position:fixed;"属性。 直接上代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>& 阅读全文
posted @ 2012-01-04 17:51 子非魚87 阅读(1521) 评论(0) 推荐(0)
css selector的优先级
摘要：SelectorSpecificity行内样式style=""1,0,0,0id选择器#content {}0,1,0,0class选择器.content{}0,0,1,0标签选择器div{}0,0,0,12个id选择器#div #content{}0,2,0,011个class选择器.a1 .a2 .a3.....a11{}0,0,11,01个id和1个class选择器#div .nav{}0,1,1,0 如表格所示，行内样式拥有最高优先级，其次是id选择器，再其次是class类选择器，最后是标签选择器。 当选择器叠加的时候，并不是简单的相加。如果将id选择器的优先级看成 阅读全文
posted @ 2012-01-04 17:08 子非魚87 阅读(299) 评论(0) 推荐(0)
CSS一些解决办法收集整理
摘要：1. pre自动换行(符合w3c标准并支持多浏览器)pre{ white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap;}* html pre { word-wrap: break-word; white-space : normal ; }2. 禁止换行.nowrap{ word-break:keep-all; white-space:nowrap;}3. 段落文字*{ text-transform:capitalize;/*所有单词首字母... 阅读全文
posted @ 2012-01-04 11:45 子非魚87 阅读(264) 评论(0) 推荐(0)