随笔分类 -  CSS

无线端通用的reset样式
摘要：@charset "utf-8"; html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; -web... 阅读全文
posted @ 2016-08-13 16:06 xiaoxiaohui 阅读(241) 评论(0) 推荐(0)
css3选择器总结
摘要：1.属性选择器[attr=val]: 选取attr属性的属性值是val的元素例：[type=text]选取type属性值是text的元素[attr*=val]:选取attr属性的属性值中包含val字符元素例：[class*=sel]选择class属性的属性值包含sel的元素[attr^=val]:选取attr属性的属性值开头是val字符开头的元素例：[class^=sel]选择class属性的属性值是以sel开头的元素[attr$=val]:选取attr属性的属性值是val字符结尾的元素例：[src^=jpg]选择src属性的属性值是以jpg结尾的元素2.伪元素选择器p:first-line 阅读全文
posted @ 2013-08-06 16:16 xiaoxiaohui 阅读(206) 评论(0) 推荐(0)
关于IE浏览器不识别空链接样式
摘要：问题：当一个a标签被绝对定位时，IE浏览器不支持其定义为block的高和宽。它的可点击区域为它所包含的内容。如果内容为空，则可点击区域为0；如果有内容，则可点击区域为内容本身所占的位置。1. background:url(about:blank);2. background:url(data:);3. background:url(mhtml:);4. background:url(#);5. background:url(fake_image.png);6. background:url(image_1px_1px.png)repeat;7. background:url(whatevery 阅读全文
posted @ 2012-10-30 11:53 xiaoxiaohui 阅读(237) 评论(0) 推荐(0)
IE6下position:absolute定位错误的bug和解决方法
摘要：今天在项目中碰到了一个位置：例：如下<div style="position:relative;"> <div style="text-align:center;"><span style="display:inline-block;height:24px;text-align:center;width:80px;background:red;"></span>（只要这里面有内容）</div> <div style="width:80px;height:24p 阅读全文
posted @ 2012-01-10 14:27 xiaoxiaohui 阅读(410) 评论(0) 推荐(0)
line-height的一点见识
摘要：今天在项目中，分页问题，数字与上一页、下一页不对齐，上一页与上边框的距离在各个浏览器下面表现不一样body{font:12px/1 Thoma,Helvetical,Arial,\5b8b\4f53}.page a{border:#cccccc 1px solid;background-color:#ffffff;text-decoration:none;float:left;}<a href="#">上一页</a>在firefox下面：上一页离上边框的距离是2px，下面占1px边框的位置，与下边框重叠了在IE8下面：上一页离上边框重叠，占1px，下 阅读全文
posted @ 2011-08-20 14:50 xiaoxiaohui 阅读(203) 评论(0) 推荐(0)
css设置字体换行效果
摘要：1.阻止字体换行：white-space:nowrap;(nowrap是指文本在一行内显示完，不换行)2.强制英文字体断行：word-break:break-all;3.让文本换行：word-wrap:break-word;word-break:normal 阅读全文
posted @ 2011-06-06 14:54 xiaoxiaohui 阅读(558) 评论(0) 推荐(0)
position定位产生的两个问题
摘要：定位元素有下面的两个问题，在做页面时会经常碰到，为了备忘1.position:relative;如果一个元素的子元素或孙元素有position:relative属性的话，overflow:hidden;不能隐藏子元素，需要将这个元素设置position:relative;（IE6）例：<style type="text/css"> .test1{width:200px;overflow:hidden;} .test2{width:8000px;position:relative;}</style><div class="test1&q 阅读全文
posted @ 2011-04-03 11:02 xiaoxiaohui 阅读(396) 评论(0) 推荐(0)
Cursor:url()的使用
摘要：今天在项目中，要用到自定义鼠标样式，格式：css:{cursor:url('绝对路径的图片(格式：cur,ico)'),-moz-zoom-out;}//FF下面css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以前面url是自定义鼠标格式，图像的绝对路径地址，后面的参数是css标准的cursor样式，（IE下面可以不需要）图标的格式根据不同的浏览器来分：IE支持cur,ani,ico这三种格式，FF支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此来说一般将图片存 阅读全文
posted @ 2011-01-20 17:44 xiaoxiaohui 阅读(29510) 评论(5) 推荐(4)
li元素的行间距问题
摘要：/ul这里面有两个问题:1.IE6:li与li之间有3像素的间距,li元素将图片当成文本来处理了(利用这个属性可以解决图片垂直居中问题),必须把font-size:0;才能解决(其它浏览器中不会出现此现象)2.非IE6浏览器(FF,IE8,IE7,谷歌,opear浏览器):img元素底部到li的间距要比其它三个方向要大(5),是因为li有行间距,将行间距设为0,四个方向就间距就是5了(IE6中不会出现此现象) 阅读全文
posted @ 2010-12-27 10:30 xiaoxiaohui 阅读(2536) 评论(0) 推荐(0)
css hack
摘要：整理出一个Windows系统下各浏览器常用CSS hack汇总表，如下：说明：1. 此汇总表中测试浏览器的版本为 o IE6 o IE7 o IE8 o Firefox 3.6.6 o Safari 5.0 o Chrome 6.0.458.1 dev o Opera 10.602. 其中，多数CSS hack是在selector{property:value;}基础上更改的。selector代表CSS选择器，property代表CSS特性，value代表特性的值。3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera4. Q代表Quirks Mode，S 阅读全文
posted @ 2010-12-22 15:34 xiaoxiaohui 阅读(194) 评论(0) 推荐(0)
图片垂直居中
摘要：图生垂直居中有多种方法:1.图片宽度,高度都小于外面框的宽和高度,不知图片(宽和高).xh_b{ display:table-cell; vertical-align:middle; //上面两条主要是为了不是IE6浏览器 *font-size:200*0.873px; *display:block; *font-family:Arial; //防止别的编码,GBK; text-align:center; width:200px; height:200px;}.xh_b1 img{vertical-align:middle;//主要是为了IE6}2.图片宽度,高度都小于外面框的宽和高度,(知道 阅读全文
posted @ 2010-12-21 19:44 xiaoxiaohui 阅读(451) 评论(0) 推荐(0)
居中问题
摘要：text-align:center;//行内元素居中对齐margin:0 auto;//块级元素居中对齐主要是来讨论下:margin:0 auto;如果父元素的宽度不定的话,使用margin:0 auto;的话会导致父元素的宽度占领整个的父父元素,例:如果父元素的宽度不定(设置了float:left;),是以内部元素为支撑点,随着内部元素的多少自动伸展宽度,里面的元素又是多个块级元素,想块级元素居中显示,如果使用margin:0 auto;(在IE6下面)的话会导致父元素的宽度占领整个的父父元素,这时候可以使用display:inline-block;text-align:center;来解决 阅读全文
posted @ 2010-12-21 11:44 xiaoxiaohui 阅读(163) 评论(0) 推荐(0)
font-size不同时文字对齐
摘要：一行文字中,如果文字大小(font-size)不同时,文字不能垂直居中对齐例:p对不齐啊,对不齐span style="font-size:30px;"140/span啊/p这行文字,会以最大字体的基线为准对齐,也就是,这行文字靠底对齐,不能垂直居中对齐,就是设置了height:30px;line-height:30px;也不能居中,这个行高会导致最大字体的能居中,如果想他们能居中对齐的话,这时候就必须设置两个line-height外面的一层行高设置大点,里面的行高设置小点就可以对齐总结:文字是以底线为准靠基线对齐(不管字体大小) 添加随笔 标题： 请输入标题 内容:【推 阅读全文
posted @ 2010-12-21 11:28 xiaoxiaohui 阅读(1813) 评论(0) 推荐(0)
样式透明度
摘要：经常弹出层需要透明:IE和FF,opear,谷歌浏览器解析并不一样IE:filter:Alpha(opacity=30)//IE专有的滤镜表示其它的浏览器:opacity:0.3以上大家平常都知道,在项目中是经常用到还有一点需要注意:IE8下面,IE有绝对或相对定位内容不随父透明度变化的bug.IE6,IE7和其它浏览器中没有发现这种形象,都随父透明度变化 阅读全文
posted @ 2010-12-15 17:20 xiaoxiaohui 阅读(204) 评论(0) 推荐(0)
块级元素与行内无素的区别
摘要：页面中元素一般分为两种：块级元素，行内元素（内联元素），即然分为两种元素，那么他们之间必然有区别：1.块级元素总是独自占一行，前面和后面就好像有个换行符，内联元素总是和其它的内联兄弟占一行2.块级元素可以设置宽和高度值，内联元素就不行了，他们的宽和高总是随着自身的内容自动扩大和缩小3.块级元素的margin和padding都正常，内联元素左右maring和左右padding正常，上下不正常不识别，也就是说不能通过margin-top和padding-top来改变行高关于第3点补充下：行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一 阅读全文
posted @ 2010-12-01 16:14 xiaoxiaohui 阅读(1068) 评论(1) 推荐(0)