`
willeager
  • 浏览: 95194 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

html一些知识点

    博客分类:
  • html
阅读更多


要取得居中位置只能用table的td实现,因为table可以设置水平居中,
但不会垂直居中,而td会垂直居中
div的text-align设置水平居中有效,而vertical-align属性是无效的
此外body和table都有自动的外边界和内边界,div好像没有
width和height属性设成百分比的时候是相对于上层的,上层未设置则无效

很多div+css新手在学习css的书写过程中,发现,在IE和火狐中效果不一致,甚至认为火狐是垃圾,还是IE好的感叹。我刚刚从css菜鸟中摆脱出来,经过不断的实践发现。其实,并不是火狐不好,而是IE太变态。只要是认真写的CSS,火狐都会将你的正确想法表述出来。而IE则不然,经常有莫名其妙的错误。那么,我们如何来针对不同的浏览器来书写CSS呢?本人来谈谈我书写CSS的一些经验。希望对大家有帮助。

一:默认内填充(padding),外填充(margin)的不一致。这点存在在所有的浏览器上。他们对不同的值赋予不同的内填充和外填充。比如,FROM P div li 等等众多的HTML标记。怎么办?其实很简单,只要一行代码就可以解决这个问题。代码如下:
*{ margin:0; padding:0; border:0;} *号是通配符,指调用这个CSS的网页的所有的元素,默认的内填充,外填充,以及边框,都为0。小标题中我没说边框,为什么我这边说边框呢?
因为图片。大家知道,如果图片有链接,那么是有一条边框的。这个不难理解。那么我们在每个图片中都必须加入border=0来控制,叫他们不要有边框。和上面的内填充和外填充是一个道理,只要加了这个,你所有的网页中都不必给带链接的图片加上边框了。大大节省了代码。

二:LI的解释不一样。li,很常用。列表嘛!但是需要注意的是,li在IE中,如果距左外填充小于30px,则不显示前面的点点。而火狐中默认是无论怎么样都显示的。解决方法很简单,加上如下代码:
li { list-style:none;}

三:浮动元素外填充IE漏洞需要注意的是,在IE中,浮动元素加上外填充,则会发生像素不正确的BUG。怎么解决呢?就是避免给浮动元素加上外填充。或者在外填充的部分尽量使用内填充替代。
这个不需要写什么代码。会CSS的都知道怎么做了吧?

四:浮动元素上级div未指定宽度BUG
这个是很多新手都犯的错误。上级DIV未指定宽度,则导致在IE中正常,火狐中变形。
解决方法:给浮动元素上级指定宽度。

五:火狐中浮动元素解释为立体浮动。这个比较难理解,网上除了本人的教程外,很多人都没注意这个问题。或者注意了也不写教程。我请教了很多的人,才从一个高手那边找到答案。其他的人也可能是知其然不知其所以然,所以我特别写了个教程。可惜的是,这个教程在科讯官方论坛居然没人顶。也活该你。呵呵~
解决方法:为浮动元素上级div指定 overflow:hidden; 值。这个值的解释是隐藏溢出。但有另外一个解释。详细内容请查看网站其他内容。

六:相对于四五。IE中浮动元素上级div如果带边框的bug比较难理解了是吧,详细的描述一下。如果,你考虑了火狐中的立体浮动而加上了overflow:hidden;属性而没有加宽度,而你这个上级DIV又使用了边框的话。则会导致在IE中边框闪烁的BUG。
解决方法:给上级div又加宽度又加overflow:hidden;属性。
大家看到了吗?浮动是最容易出问题的了,不要紧张,下面还是浮动。

七:针对火狐和IE设定不同的外填充值。这个就比较高级了。大家如果在不可避免的需要给浮动元素加外填充的情况下,怎么办?
第一,不要加左外填充。改成右外填充。为什么使用右外填充呢?因为IE中右外填充没有那个讨厌的BUG。左或者右,这个是没问题的。
第二,如果这个浮动的div不仅仅加了右外填充,而且还加了内填充以及边框值,哈哈,那么在IE和火狐中你是怎么调整都不会一致的。怎么办?设定不同的值来控制。这个有个专业名词叫什么乱七八糟的玩意我不记得。我只知道方法如下。
给对于火狐的值加上 !important 。IE的值保持原来的样子。具体怎么写,如下:
margin-right:11px !important;margin-right:9px;
解释,在火狐中,外右填充为11像素,IE中为9像素。

分享到:
评论

相关推荐

    html知识点

    一、HTML知识点 1. HTML基本结构:一个HTML文档通常由<!DOCTYPE>声明、<html>根元素、头部元素和主体元素组成。<!DOCTYPE>声明指定了文档类型,中包含元数据如标题、字符集等,则包含实际的网页内容。 2. HTML标签...

    HTML 知识点总结

    HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结

    html+css知识点总结

    html+css知识点总结

    HTML5+全套知识点

    这个"HTML5+全套知识点"压缩包文件包含了一系列关于HTML5的重要概念、语法、新特性以及实际应用的详细资料,非常适合对Web开发感兴趣或希望提升HTML5技能的学习者。 首先,HTML5的核心目标是提高用户体验,简化...

    HTML基础知识点汇总

    HTML 基础知识点汇总 HTML(Hypertext Markup Language,超文本标记语言)是网页设计的基础语言,它将影像、声音、图片、文字等连接显示出来。HTML 语言使用标记式的指令(Tag),将网页文件组织起来,并由浏览器...

    HTML知识点总结(思维导图)

    HTML知识点总结(思维导图)

    HTML知识点汇总

    一、HTML基础知识;二、文字与图像;三、超级链接;四、表单;五、表格;六、框架;七、网页多媒体;附录、HTML标签列表

    对于HTML结构的知识点总结

    对于初学者的HTML知识点的总结,要使用xmind软件打开,有助于初学者对于HTML结构有更加深入的理解和对于知识点网络的结构

    HTML的知识点总结 HTML.xmind

    HTML基本知识点总结,它是用xmind总结的,整体看起来思路会比较清晰,对于学习html的小伙伴,希望有所帮助

    html5和CSS知识点分享

    CSS3和html5的知识点总结,适合入门的朋友预览。是学习CSS3之前,预习的好知识点。

    html+css基础知识点整合

    这是我在学习html和css时候整合的知识点,里面还是比较详细,一些容易混淆的知识点也有说明

    html-css-js学习过程中的知识点.zip

    html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的...

    用心精编的html知识点,方便速查记忆

    用心精编的html知识点,方便速查记忆,里面精简易理解,适合初学者去使用,难得的资源,欢迎下载使用

    html+css+javascript知识点总结.docx

    HTML+CSS+JavaScript 知识点总结 HTML 基础知识: 1. HTML 是网页内容的载体,负责承载网页的内容。 2. HTML 标签不区分大小写,但建议使用小写。 3. 一个 HTML 文件由和两部分组成,用于定义文档的头部,用于承载...

    web课程上座的一些小知识点

    在“Web课程上座的一些小知识点”中,我们主要探讨的是Web开发的基础概念和技术,这些都是构建Web应用程序不可或缺的部分。下面将详细阐述其中的关键知识点。 首先,我们要了解Web的基本架构。Web是由一系列相互...

    HTML知识点汇总(代码+知识点)

    这个压缩包文件"HTML知识点汇总(代码+知识点)"提供了一个全面的学习资源,涵盖了HTML的所有核心元素和概念,对于初学者和经验丰富的开发者来说都是一份宝贵的参考资料。下面我们将深入探讨HTML的一些关键知识点。 ...

    html各种基本知识点学习教程

    非常齐全的关于html各种基本知识点的学习教程,很好的资源啊。

    HTML、CSS知识点总结

    html、css知识点,归纳整理。包括基本标签、样式、例子、运行环境等。欢迎大家讨论、更正,共同进步!

    WEB老师课件,包括javascript,jsp,css,html知识点

    以下是一些JavaScript的关键知识点: 1. **变量与数据类型**:JavaScript支持动态类型,可以声明不同类型的变量,如数字、字符串、布尔值、null、undefined等。 2. **控制结构**:包括条件语句(if...else,switch...

    c#基础知识点大全

    c#基础知识点大全,分条总结。另附winform,css,HTML知识点

Global site tag (gtag.js) - Google Analytics