CSS网页布局学习之Font-size的妙用

11米幽蓝

11米幽蓝

2016-02-19 23:39

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

div style="background:blue; height:8px;overflow:hidden"/div

因为加overflow:hidden有时候会出现很多问题.

我在网上翻阅了一下资料,造成IE6.0下多出来高度的原因是因为:没有给div定义字体大小的情况下,默认是font-size;12px. 所以给font-size定义为0就可以解决问题了.

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

!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

在各浏览起的实际效果如下:

展开更多 50%)
分享

猜你喜欢

CSS网页布局学习之Font-size的妙用

Web开发
CSS网页布局学习之Font-size的妙用

CSS:font-size

Web开发
CSS:font-size

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS教程:建议font-size使用em

Web开发
CSS教程:建议font-size使用em

CSS:font-size-adjust

Web开发
CSS:font-size-adjust

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

学习css网页布局口诀

Web开发
学习css网页布局口诀

CSS教程:通过实例学习CSS布局网页

Web开发
CSS教程:通过实例学习CSS布局网页

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

给力QQ分组图案你死或不死我就在这等你

给力QQ分组图案你死或不死我就在这等你

css教程:css指令,兼容,注释,selector

css教程:css指令,兼容,注释,selector
下拉加载更多内容 ↓