文章分类 -  CSS

摘要:一直比较纠结垂直居中的问题,最近又查阅了一些资料,借鉴了一些优秀方案,捣鼓出了一个兼容性较强的多行文本垂直居中解决方案,主要思路依然是利用vertical-align:middle来实现,经过测试,该方案能兼容IE6及以上版本的浏览器,先看代码:12324多行文本的垂直居中多行文本的垂直居中多行文本... 阅读全文
posted @ 2014-05-25 01:06 倒霉熊 阅读(1910) 评论(1) 推荐(0) 编辑
摘要:元素水平居中是css中的常见问题,在css中元素要么是定宽,要么是不定宽,对于定宽元素,要实现其水平居中是非常容易的,但对于不定宽元素,要实现其水平居中略微复杂些,本文从定宽和不定宽两个角度来探究一下实现元素水平居中的常见方法。一、定宽元素的水平居中1,通过设置元素的margin-left和marg... 阅读全文
posted @ 2014-05-21 04:27 倒霉熊 阅读(244) 评论(0) 推荐(1) 编辑
摘要:bug描述:IE6\7中对inline元素(本身就是inline元素或者通过设置display为inline的block元素)应用text-indent,text-indent会传递到父元素,导致该元素本身位置偏移应用场景:在制作一组精美的横排按钮时,我们通常用float:left或者display... 阅读全文
posted @ 2014-05-21 02:21 倒霉熊 阅读(379) 评论(0) 推荐(0) 编辑
摘要:1,垂直居中为什么写top:50%;margin-top:-50px这种形式而不是top:-50px;margin-top:50%margin的值为百分比的话,其值的计算依赖于包含块的宽度,这条规则对margin-top、margin-bottom也实用,如果包含块的宽度不确定的话,这种方式就得不到... 阅读全文
posted @ 2014-05-20 08:52 倒霉熊 阅读(157) 评论(0) 推荐(0) 编辑
摘要:现象1:IE6下同一个父元素中的两个紧挨着的DIV,如果其中一个浮动另一个不浮动,则两个DIV之间会产生3px间隙。案例:左栏宽度固定,右栏自动伸展的两栏布局,两个DIV之间产生了3px的间隙如图:代码:1 2 左栏3 右栏4 css:1 .content{ width:100%; background:#9FC; height:1000px; overflow:hidden; zoom:1;}2 .aside,.main{ height:800px;}3 .aside{ width:170px; float:left; background:#9C3;}4 .main{bac... 阅读全文
posted @ 2013-10-09 21:39 倒霉熊 阅读(162) 评论(0) 推荐(0) 编辑
摘要:网页中我们经常遇到一些固定在页面中某个位置的返回顶部、分享等小按钮,它不会跟随滚动条改变位置。如下图:CSS实现固定定位最简便的是position:fixed;但是IE6不支持fixed,要实现IE6下的固定定位方法有多种,比如通过js、css表达式,这里分享一种纯CSS的解决方法。原理:把需要固定定位的元素相对于html定位,并保证html不产生滚动条,然后把body的高度设置为窗口的高度,内容溢出时body产生滚动条,这样在视觉上元素始终保持在浏览器窗口的固定位置。具体实现代码如下,供参考: 1 2 3 4 5 纯CSS实现固定定位position:fixed(兼容IE6) 6 ... 阅读全文
posted @ 2013-09-20 13:01 倒霉熊 阅读(2969) 评论(0) 推荐(1) 编辑
摘要:如图所示,我们需要实现这样一种效果,图片img的高度是未知的(但高度还是小于外层box的高度)。HTML结构如下: CSS中跟元素垂直对齐有关的属性是vertical-align,W3C中说,在单元格中这个属性会设置单元格框中的内容的对齐方式。也就是说通过把一个DIV元素设置为单元格,然后就可以控制其中内容的显示方式了。 .box{ width:200px; height:200px; border:1px solid #06C; display:table-cell; text-align:center; vertical-align:middle; }此时除... 阅读全文
posted @ 2013-06-28 15:24 倒霉熊 阅读(6065) 评论(2) 推荐(0) 编辑
摘要:当要在网页上要隐藏一个DIV的时候,我们立马想到设置display:none就能搞定。设置了一个DIV的display为none时,该DIV就从网页上消失了,也不占用空间。但在做项目的时候偶然发现了一个奇怪的现象,IE6下某些时候设置DIV的display:noe,该DIV依然占据一定空间。这里首先来重现一下这个奇怪的现象:1,我需要如上图所示的一个HTML结构: box1 box2 box3 box4对应的CSS:.box { width: 440px; background: #0CF; padding: 5px;}.list { width: 98px; height: 98px... 阅读全文
posted @ 2013-06-27 21:08 倒霉熊 阅读(1307) 评论(1) 推荐(0) 编辑
摘要:气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示:拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便,可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。首先我们来看一下border这个属性,当我们把一个div的border-color设为不同值的时候,可以看到四边都成了一个梯形。# test{width:50 阅读全文
posted @ 2013-06-27 14:10 倒霉熊 阅读(65198) 评论(13) 推荐(16) 编辑
摘要:一、IE6\7其实是支持inline-block的IE5.5 后开始支持 inline-block, 但是它所支持的 inline-block 不能等同于 CSS2.1 中的 inline-block,因为 IE5.5 比 CSS2.1 更早提出 inline-block 的概念并作为所谓的「私有属性值」使用,所以二者表现出来的效果是不完全一致。IE 5.5、6、7 、8(Q)中 block 元素对 inline-block 支持不完整,如果要达到类似的效果,需要先设置为 display:inline,然后使用 zoom:1 等触发 hasLayout。IE 5.5、6、7 、8(Q)中 in 阅读全文
posted @ 2013-06-23 12:41 倒霉熊 阅读(170) 评论(0) 推荐(0) 编辑
摘要:border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异。性能差异:【border:0;】把border设为“0”像素效果等于border-width:0,浏览器依然对border-width、border-color进行了渲染,即已经占用了内存值。【border:none;】把border设为“none”,实际效果等同于border-style:none,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。兼容性差异:IE6、IE7中,border为“none”时,标签button、input边框依然存在。解决方法:1,input,but 阅读全文
posted @ 2013-06-17 12:40 倒霉熊 阅读(4041) 评论(0) 推荐(1) 编辑
摘要:CSS背景图片的定位:1,关键词定位:如top right bottom left center2,像素定位:如background-position:100px 200px; 表示图片左上角定位到距离容器左上角(100px,200px)的点3,百分比定位:如background-position:20% 50%;百分比定位是背景图片本身(x%,y%)的点与容器左上角(x%,y%)的点重合 阅读全文
posted @ 2013-06-04 15:28 倒霉熊 阅读(671) 评论(0) 推荐(0) 编辑
摘要:在网页设计中,由于图片更具表现力(例如网站logo),所以我们往往利用图片代替文字标题来表现某些内容,这种代替不是说要用一个<img/>标签完全替换文字,如果这样的话,就不利于搜索引擎抓取我们的网站页面,这个时候我们往往利用隐藏文字(以图换字)这个小技巧来达到目的,既能够用图片很好的表现我们的文字标题,又能够很好的照顾到搜索引擎的蜘蛛。实现原理:1,利用图片作为文字标题的背景;2,把图... 阅读全文
posted @ 2010-05-05 20:46 倒霉熊 阅读(1530) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示