CSS网页布局学习之Font-size的妙用
互联网 发布时间：2009-04-02 19:38:25 作者：佚名 
我要评论
我要评论网页制作Webjx文章简介：CSS网页布局学习之Font-size的妙用.
我在做网站项目的时候通常需要定义一个高度为10px以下的div。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
CSS网页布局学习之Font-size的妙用. 我在做网站项目的时候通常需要定义一个高度为10px以下的div。代码如下：
<!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>无标题文档</title>
</head>
<body>
<div style="background:blue; height:8px"></div>
</body>
</html>
意思是定义一个高度为8px,蓝色背景的div.在各浏览起的实际效果如下：
以前我解决IE6.0下出现的这种问题的方法是 加overflow:hidden
<div style="background:blue; height:8px;overflow:hidden"></div>
因为加overflow:hidden有时候会出现很多问题.
我在网上翻阅了一下资料,造成IE6.0下多出来高度的原因是因为:没有给div定义字体大小的情况下,默认是font-size;12px. 所以给font-size定义为0就可以解决问题了.
代码如下:
<!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>无标题文档</title>
</head>
<body>
<div style="background:blue; height:8px; font-size:0"></div>
</body>
</html>
在各浏览起的实际效果如下:
相关文章
详解使用 CSS 的 font-size-adjust 属性改善网页排版
本篇文章主要介绍了使用 CSS 的 font-size-adjust 属性改善网页排版，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-18知识普及之CSS: body{font-size: 62.5%;}这种写法的原因
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？下面脚本之家小编给大家揭晓这个答案，一起了解了解吧2016-05-06- 这篇文章主要介绍了CSS中的font-size属性使用教程,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-13
- 这篇文章主要介绍了CSS的font-size属性及其em值的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-05
CSS Font-Size: em、px 、pt 、Percent之间的关系及换算
这篇文章主要介绍了CSS Font-Size: em、 px 、pt 、Percent之间的关系及换算，本篇整理的还是比较详细的，需要的朋友可以参考下2014-05-15- CSS的字体样式设置相信许多人再熟悉不过，其实字体样式的设置并不仅仅限于我们平时常用的那几个属性，本文为您详细叙述 font-size 的字体样式设置的详细属性。2009-08-29
css中一些常用的font-size字体单位和line-height详解
这篇文章主要介绍了css中一些常用的font-size字体单位和line-height的相关知识，给大家提到了px(pixel)像素的一些小知识，本文通过实例代码相结合给大家介绍的非常详细，感2020-05-20
最新评论