`
clfsw0201
  • 浏览: 41858 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css容易发生错误或混淆的探索笔记

    博客分类:
  • CSS
阅读更多

〇、不清除浮动,FF可能会有背景被隐藏,而IE更多的是使你设置的padding、margin没有作用,达不到想要的效果。


一、
    1、不要让CSS有过多的标记
    2、最好不要在类属性里面去加入颜色或者长宽的尺寸
    3、1)一个标签或者属性就算只有一点点的跟表现搭上,都不要使用。那是CSS的事。并且CSS做得更好。
         2)把标签使用在如它的名字所暗示的用途上。表格标签是用在表格式数据上的。标题标签是用在标题上的。等等。
         3)特定的内容用恰当的标签。列表用list,标题用hx(x = 1 - 7)等等。

 

二、
    1、空白边叠加——只有普通文档流中的垂直空白边才会发生空白边叠加;行内框、浮动框活绝对定位框之间的空白边不会叠加。
       ①当一个元素出现在另一个元素上面时,第一个元素的底空白边与第二个元素的顶空白边发生叠加。
       ②当一个元素包含在另一个元素中时(假设没有填充或边框将空白分隔开),他们的顶和/或底空白边也发生叠加。
       ③空白边甚至可以与本身发生叠加。假设有一个空元素,它有空白边,但是没有边框或填充。这种情况下,顶空白边与底空白边就碰到一起,他们会发生叠加。如果这个空白边碰到另一个元素的空白边,它还会发生叠加。
    2、块级元素从上到下一个个排列;
         行内元素在一行中水平布置。可以使用水平填充、边框和空白边调整他们的水平间距,但这些设置不能改变行内框的高度,改变这种元素框的高度只能通过设置行高来改变。
    3、相对于相对定位的祖先元素对框进行绝对定位,这在大多数现代浏览器中实习的都很好。但在IE5.5 和IE 6中有一个bug。如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置,那么需要确保相对定位的框已经设置了尺寸。如果没有,那么IE会相对于画布定位这个框。最简单的解决方案是为相对定位的框设置宽度和高度。
    4、浮动元素脱离了文档流,不影响周围的元素。但是,对元素进行清理实际上为前面的浮动元素留出了垂直空间。


三、
    1、如果使用像素设置背景位置,那么图像左上角的距离为指定的像素数。但是,使用百分数进行背景定位的工作方式不太一样。百分数定位并不对背景图像的左上角进行定位,而是使用图像上的一个对应点。所以,如果指定垂直和水平位置都是20%,那么实际上将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。
    2、并不是所有浏览器都支持背景图像动画,但是不支持这个特性的浏览器常常会显示动画的第一帧。


四、
    1、IE不知道为什么会在列表项上下添加额外的空间。可以为列表项添加属性display:inline;来修复这个bug。
    2、对于远距离翻转,IE会不太正常。IE在使用:hover动态伪类寻找锚链接中的嵌套元素方面似乎有问题。但是,有一个简单的(但有点奇怪的)解决方案。添加a:hover{border:none;}规则到锚的鼠标停留状态上就能够修复IE中的错误。


五、
    1、div居中可以在设置宽度后,用margin:0 auto;来让元素居中,但怪异模式中的IE5.x和IE6不支持自动空白边。幸运的是,IE将text-align:center;误解为让所有东西居中,而不只是文本。可以向下面这样设置:
        body{text-align:center;}
        #wrap{width:950px;margin:0 auto;text-align:left;}
        在Netscape 6中,当浏览器窗口的宽度减少到小于容器的宽度时,容器的左边会跑到屏幕的外边,就无法访问它了。为了防止这种现象,需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度:body{text-align:center;min-width:760px;}
        居中还可以用定位50%,然后设置负值空白边使层居中。
    2、典型的两列布局时,#left和#content,为了使内容不紧贴边,可以设置padding。但水平padding会调用IE 5.x专有的框模型。为了避免这种情况,将水平填充添加到导航区域的内容上。
    3、布局三种方式:固定宽度、流体布局(宽度设置为百分比,以适应不同分辨率)、弹性布局(以em为单位设置宽度,适应不同字体大小)
        弹性-流体混合布局,以em设置宽度,然后用百分数设置最大宽度(max-width)。这种布局将随着字号伸缩,但决不会超过窗口的宽度。但这样布局的网页,上面的图像伸缩也是一个问题。跨越大区域的图像,可以将其设置为背景图像,随元素伸缩而显示不同。作为页面上的图像元素,可以设置百分数宽高,但要注意设置最大宽高,以免失真。
        固定宽度布局的网页非常容易应用大背景,但其他方式的布局就要考虑用百分数定位背景了。


六、
    1、作为一种语言,CSS设计成具有很强的向前兼容性。如果浏览器不理解某个选择器,那么它会忽略整个规则。同样,如果它不理解某个属性或值,它就会忽略整个声明。
        CSS过滤器和招数是不同的。前者过滤不同浏览器,后者主要是解决特定的浏览器bug。
    2、最安全的过滤器依赖于未实现的CSS,而不是浏览器bug。
          ①子选择器(IE6不支持)html>body{},为了让这种过滤器起作用,必须确保在子选择器前后没有空格。
          ②属性选择器(IE6不支持)div[id="content"]{}
          ③星号HTML招数(只有IE6和更低版本认识)* html{},它提供了一种相当可靠的指定IE 6和更低版本的方法。
         HTML元素被认为是网页上的第一个元素(即根元素),但是,IE的所有当前版本有一个匿名的根元素。可以使用通用选择器指定包围在另一个元素中的HTML元素。星标记只有IE认识。
    3、IE/Mac注释反斜线招数
        Mac上的IE 5错误地允许在注释内部进行转义,这个过滤器的工作方法是在结束注释字符串前面添加一个反斜线。其他所有浏览器都会忽略这个转义,并且应用后面的规则。但是,IT 5/Mac会认为注释仍然没有结束,因此会把下一个结束注释字符串前面的所有字符都忽略。
        /* Hiding from IE5/Mac \*/
        #nav a{width:5px;}
        /* End Hack */
    4、转义属性招数
        该过滤器要在属性中添加一个转义字符。所有现代浏览器都应该不会忽略这个转义字符,但是,IE 5.x/Win认为这是
属性名的一部分,并且不认识这个属性,所以忽略这个声明:
        #content{w\idth:100px}
     因此,转义属性过滤器提供了一种对IE 5.x/Win隐藏样式的简单方法。但是,在使用这种过滤器时要小心,因为反斜线字符不能出现在数字0~9或字母a~f(或A~F)前面。这是因为在十六进制表示法中要使用这些值,因此可能被转义。  
    5、下划线招数与!important招数相似,在属性前面放一个下划线,符合标准的浏览器就不再认识这个属性并且忽略这个声明,但是IE 6和更低版本会忽略下划线,因此应用这个规则,覆盖前面的规则。


七、
    1、空白边问题是由于具有块级子元素的元素计算其高度的方式造成的:如果元素没有垂直边框或填充,那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此,包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是,有一个简单的解决方案。通过添加一个垂直边框或填充,空白边就不再叠加了,而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。


八、
    1、在XHTML中,div的次序是主列、次要列、边栏。而在应用了样式的页面中,次序应该是边栏、主列、次要列。通过在css中扩大主列左侧边距,同时设置边栏左侧边距为相应的负值即可。
    2、用javascript实现透明的定制角和边框,参见Roger的教程:http://www.456bereastreet.com/archive/200506/customising_custom_corners_and_borders/
    3、对于较大的图像,设置display:block;float:none;并没有清除浮动,可以使它单独占一列。若没有display:block;下面的浮动元素仍有可能排列混乱。


九、
    1、如果用户重新设置尺寸,可以假设大多数人都会加大文本而不是减小。
    2、为了使两列或者更多的列(有不同色背景)看起来是对齐的,可以用faux列解决。这种方法是用一个大的背景在列的父级元素上进行纵向平铺,显示出对齐的伪列。
    3、如果有两列,用流体布局水平排列。流体布局的关键是宽度会根据浏览器的宽度扩展和收缩。为了实现这种效果,使用百分数值替代px或em(如各50%)。但是,这里有个问题。IE在计算浮动相邻元素的误差方面有问题。对两个设置为50%的浮动div的计算是错误的,使它们比容器宽,所以IE会将它们垂直排列。但是,不必担心——只需将第二个div的宽度改为49.9%即可。
    4、使用z-index属性,要注意相对性,因为堆放次序只决定一个父元素中的子元素的相对次序。如果在其他父元素中使用z-index,那么这是整个页面的堆放次序问题。
    5、在用图像替换技术时,最好用Phark图像替换方法,即用text-indent:-9000px;方式隐藏文本。
    6、设置超链接背景图像时,注意在IE中常常发生的当用户鼠标经过时发生闪烁。


十、
    1、id可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名规则。但是语义的 (semantic) 或者元结构化 (meta-structural) 的命名是最好的(即能够解释其中元素所执行功能的命名)。
          当客户决定使用蓝色时,你会觉得将站点某部分命名为 orangebox(橙色框)会非常地傻。下面的这种情况中,会觉得自己更傻,当距离最后交付只有六个月时,你开始调校样式表,却怎么也想不起来 "Gladys"到底代表导航区、侧栏还是搜索框。
    2、id 值必须以字母或者下划线开始;不能以数字开始。虽然 W3C 验证不会捕获这个错误,但是 XML 解析器会的。同时,如果你将 id 与 JavaScript 在表单中配合使用,那么 id 名称和值必须是合法的 JavaScript 变量。空格和连字号,特别是连字号,是不被允许的。不仅如此,将下划线用于 class 或者 id 名都不是个好主意,这是由于在 CSS2.0(以及某些浏览器)中的限制。
    3、元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
    4、由于浮动元素脱离了文档流,所以包围浮动元素而没有进行清理的 div 不占据空间。解决方法有二:
                  a、添加一个空元素,定义它的css属性为clear:both;
                  b、将这个父级元素设为浮动。(但这样会给后面元素带来影响)
    注:若要IE(包括IE 7)按标准方式处理一个块级元素浮动而它下面的块级元素不浮动,不能指定第二个元素的宽和高。

 

/*===========================================*/

这些笔记都是看《精通CSS 高级Web标准方案》(人民邮电出版社 ISBN:7-115-15316-7)时写的,当然还参考其他人发表的很多优秀文档。无论如何,大量的实践才能真正用好CSS。现在还得继续努力……>

分享到:
评论

相关推荐

    grunt学习笔记

    **Grunt 学习笔记** Grunt 是一个基于任务运行器的 JavaScript 工具,它在前端开发领域中被广泛使用,主要用于自动化构建、测试、压缩、合并等任务,极大地提高了开发效率。Grunt 依赖于 Node.js 环境,并通过 npm...

    HTML5响应式网页设计moot笔记.docx

    缺点:工作量大,可能效率低,代码冗余,可能导致用户混淆。 4. **视口(viewport)**: - 视口是移动设备上显示网页的区域,通常用`, initial-scale=1.0">`设置,确保页面宽度与设备宽度一致。 5. **媒体查询**...

    CSS3产品分类对比评论样式代码.zip

    7. **Web性能优化**:如何通过最小化CSS文件、利用CSS预处理器(如Sass或Less)以及合理组织CSS代码来提高页面加载速度。 总的来说,这个压缩包是一个实践性的教程,对于想要提升网页设计技能,尤其是CSS3和jQuery...

    js笔记web前端开发

    - **问题描述**:在前端开发中,经常需要获取或设置元素的宽高,而 `clientWidth`, `offsetWidth`, `clientHeight`, `offsetHeight` 等属性常常让人混淆。 - **解决方法**:了解每个属性的区别,并根据需求正确使用...

    纯CSS3绘制黑色小萌猫特效.zip

    CSS3是层叠样式表(Cascading Style Sheets)的第三版,它引入了许多新的功能和属性,使得网页设计师能够实现更复杂、更动态的视觉效果,而无需依赖JavaScript或jQuery等其他脚本语言。 【描述】提到这个特效代码...

    锋利的jquery笔记

    《锋利的jQuery笔记》是一份深入探讨jQuery库的宝贵资料,它主要针对JavaScript开发者,尤其是那些希望提升jQuery技能的人员。jQuery是一个轻量级、高性能的JavaScript库,它的核心功能在于简化HTML文档遍历、事件...

    HTML详细笔记.md

    - **下划线**:`<u>`,不建议使用,因为默认样式容易与链接混淆。 - **删除线**:`<del>`,表示已删除的文字。 - **上标/下标**:`<sup>`和`<sub>`,用于化学式或数学公式中的上下标。 - **缩进**:`<blockquote>`,...

    HTML笔记.docx

    两者都可以通过CSS来添加样式,但`<div>`更适合做大的布局调整,`<span>`则适用于细节修饰。 在HTML中,还有一些特殊的字符实体,比如`表示小于号,`>`表示大于号,`&`表示和号,这些都是为了避免和HTML标签混淆而...

    saraswati-scratch:各种各样的便笺簿。 我的文件夹里夹着想法和框架。 请忽略

    综合以上信息,我们可以推测"Saraswati-scratch"是一个以CSS为主题的个人学习或开发项目,可能包含了一系列关于CSS设计和实现的笔记、示例代码或小型项目。作者在这里探索和实践CSS的各种特性,比如选择器、盒模型、...

    jQuery弹出提示层插件.zip

    这个文件名可能是因为某种命名规则或者是为了保护原始文件名而进行的加密或混淆。 为了使用这个插件,你需要在你的HTML页面中引入jQuery库和插件的JavaScript文件,然后通过jQuery的选择器和方法来调用插件功能。...

    HTML5 Canvas水印特效.zip

    由于提供的压缩包子文件只有一个名为"jiaoben6988"的文件,这可能是混淆的文件名,实际的代码文件可能会包括.js(JavaScript)、.css(CSS)以及示例HTML文件等。这些文件将提供具体实现水印特效的详细代码和结构。 ...

    jQuery自适应父容器宽度高度代码.zip

    这些规则可能包括使用百分比单位或者CSS Flexbox或Grid布局来实现自适应效果。 `img`目录通常用于存储网页所需的图像资源。在这个案例中,如果`index.html`中包含了图像元素,这些图像文件可能会存放在这个目录下,...

    JQuery Study Notes 学习笔记(一)

    需要注意的是,在使用JQuery时,虽然它提供了丰富的功能,但也要注意以下几点:保持代码的可读性和维护性,避免过度使用或滥用选择器,以及在生产环境中引入压缩和混淆后的JQuery文件以减小文件大小和提高加载速度。...

    Ext相关随笔

    1. 引入ExtJS的CSS文件,如`extjs-4.1.1/resources/css/ext-all.css`。 2. 引入ExtJS的核心库文件,通常是`extjs-4.1.1/ext-all.js`或`extjs-4.1.1/ext-all-debug.js`。 这种固定的引用顺序确保了CSS样式能够正确...

    Browser Notes-crx插件

    这种设计尤其适合进行研究、学习或项目工作,用户可以在多个相关的网页间自由穿梭,而不用担心信息丢失或混淆。 在实际使用中,Browser Notes-crx可能提供了各种定制选项,如字体样式调整、颜色标记、高亮等,以...

    HTML5 SVG兼容手机端jQuery图表插件代码.zip

    可能包含的是min.js和min.css文件,它们是经过压缩和混淆的,更适合部署到生产环境。 css目录下的文件负责样式定义,包括图表的颜色、布局、动画等视觉效果。在CSS3中,我们可以使用transitions和animations来实现...

    jxNotes

    8. **构建脚本和配置**:项目可能使用Webpack或Rollup这样的构建工具,将所有源代码打包成可部署的格式,同时处理如压缩、混淆和版本控制等任务。 9. **README** 和 **LICENSE**:提供关于项目的基本信息、安装指南...

    jQuery表单占位符动画特效插件.zip

    `static`可能包含了一些额外的JavaScript库或者CSS样式文件,用于支持插件的运行或提供额外的样式。`src`目录可能存放着未压缩和未混淆的源代码,方便开发者阅读和修改。 `css`目录下的文件则是样式表,可能定义了...

    minotes-crx插件

    2. **位置自由**:与传统的书签或高亮不同,minotes-crx的便签可以在页面上的任何位置放置,这使得用户可以更精确地针对特定内容进行标记,避免了信息混淆。 3. **多用途笔记**:不仅限于文字,用户还可以在便签中...

    《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,它与HTML和CSS一起构成了现代网页开发的基础。在《JavaScript DOM 编程艺术》一书中,作者深入浅出地讲解了JavaScript的核心概念,包括语法、变量、数据类型...

Global site tag (gtag.js) - Google Analytics