文章分类: Css

css相关知识,css3.0小实验,css兼容性

项目中的一些小技巧tips记录

发表于 作者
回复

项目中遇到的一些小技巧，记录下来:

  1. 对非a标签添加伪类状态，例如span:hover{}。在采用偷天换日的手法a:hover span{}，解决IE6兼容只许添加一个a:hover{#:FFF;}触发IE6下a标签hover状态的haslayout即可。
  2. 选项卡去掉虚线框，IE解决方案：<a href=”..” hidefocus=”true”>；FF下解决方案：a:focus {outline:none;-moz-outline:none;}
  3. 内联元素居中水平采用父元素text-align:center;垂直采用height=line-height；块级元素水平居中自身margin：0 auto;text-align:left（对子内联元素不入侵）父元素text-align:center;块级元素可以采用text-indent调解左边距，比padding-left的好处在与不会影响固定宽度值
  4. 小图片存为gif文件比png-8要小，但是像css sprites这种颜色种类不多的大图片存为png-8要比gif要小，而且今天在蓝色理想看到别人用position做css sprites，还有人提出img sprites的想法，都很不错
  5. 内联元素用display:inline-block;比较给力，IE6下虽然不支持这个属性，但是会触发内联元素的haslayout，所以表象一样。块级元素就不行了
  6. 内联元素float:left;之后按理说应该表现为块级，但是文字在IE6和IE7下会填充上一行的空隙。解决方案white-space: pre;
  7. IE6下当高度小于font-size的时候，会被撑高。解决方案：font-size:1px;
  8. css在浏览器渲染过程中是从右向左读取的，尽量不用名字空间约束样式名，尽量不对元素直接写样式。

CSS3 Media Query:移动Web的完美开端

发表于 作者
回复

移动时代，是任何 Web 设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了 CSS3。

CSS3 的 Media Queries

在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：

  1. 浏览器窗口的宽和高
  2. 设备的宽和高
  3. 设备的手持方向，横向还是竖向
  4. 分辨率

更多内容 →

IE下中英文混排bug

发表于 作者
回复

这个bug很常见，首先看示例代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>000</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; color:#333;}
#list{font-family:Arial; list-style:none;}
#list li{float:left;margin-right:10px;}
</style>
</head>
<body>
<ul id="list"><li>12条留言</li><li>回复</li></ul>
</body>
</html>
IE下中英文混排bug

IE下中英文混排bug

更多内容 →

弹性布局小结-相对值em和%

发表于 作者
1

弹性布局一般使用em和%为单位，但是他们的属性和相对值却完全不一样。

首先是em字体高，继承父元素字体大小，但是本元素大部分数值属性（width，height，line-height，margin，border，padding等）都是参照本身字体大小。例如父元素font-size：1em=10px，子元素font-size：2em=20px，而子元素width：2em=40px。

一个小例子代码如下：

body {
	font:62.5%/2em Microsoft YaHei, Arial, Tahoma, Helvetica, SimSun, san-serif;
	height:100%;
	position:relative;
	text-align:center;
	background:#A5CEEF;
}
.divEm{ width:10em; height:10em; border:1em solid #000; background-color:#999; font-size:1em;}
.div2Em{ width:2em; height:2em; border:1em solid #000; background-color:#666; font-size:2em; margin:1em; padding:1em}
<div class="divEm">dieEm测试
	<div class="div2Em">die2Em测试</div>
</div>
  1. 转换成px值即divEm：font-size=1em=10em，width=10em=100px，height=10em=100px，
    border=1em=10px，margin=1em=10px，padding=1em=10px；
  2. div2Em：font-size=2em=20px，width=2em=40px，height=2em=40px，
    border=1em=20px，margin=1em=20px，padding=1em=20px；效果如下图
em盒模型相对值

em盒模型相对值

使用绝对定位的top，left，right，bottom值也是参考本身元素字体高度。

margin值解析小结

发表于 作者
回复

在蓝色理想看到一篇帖子如何理解负边距，代码如下：

#mainer {
 float:left;
 width:100%;
 margin-right:-300px;
 background:silver;
}
#main {
 margin-right:300px;
}
#sider {
 float:right;
 width:300px;
 background:orange;
}
<div id="mainer">
 <div id="main"><strong>main</strong></div>
</div>
<div id="sider"><strong>sider</strong></div>

实际效果如下：

margin值测试

margin值测试

更多内容 →