`

CSS十条速记口诀

阅读更多


        如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?

一、IE边框若显若无,须注意,定是高度设置已忘记;

二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

三、三像素文本慢移不必慌,高度设置帮你忙;

四、兼容各个浏览须注意,默认设置行高可能是杀手;

五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

九、IE浮动双边距,请用display:inline拘。

十、列表横向排版,列表代码须紧靠,空隙自消须铭记。



分享到:
评论

相关推荐

    css 学好的口诀

    ### CSS 学好的口诀 在前端开发领域中,CSS(层叠样式表)是用于控制网页布局和样式的强大工具。学好CSS对于解决网站bug、提高网站美观度及用户体验至关重要。以下根据提供的文件信息,整理出一些关键的学习口诀及...

    CSS布局口诀

    ### CSS布局口诀详解 #### 一、IE边框若显若无,须注意,定是高度设置已忘记 此条口诀提醒我们在处理Internet Explorer(IE)浏览器中的边框显示问题时,需要检查元素的高度是否被正确设置。在IE中,如果一个带有...

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    CSS样式表设计的十条技巧

    以下就是关于CSS样式表设计的十条实用技巧,旨在提高你的CSS编写效率和网页设计质量。 1. **选择器优化**:尽可能使用类选择器(.class)和ID选择器 (#id),而非标签选择器(element)。标签选择器的权重较低,使用...

    前端开源库-postcss-css-variables

    在前端开发领域,CSS Variables(也称为CSS自定义属性)是一种强大的工具,它允许开发者在整个样式表中定义和重用变量。PostCSS 是一个JavaScript工具,它可以解析CSS,执行一些任务,然后输出新的CSS。Postcss-css-...

    CSS CSS CSS

    CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    CSS特效+CSS图标

    CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS...

    CSS酷站CSS特效华丽CSS

    在本篇内容中,我们将深入探讨"CSS酷站"、"CSS特效"和"华丽CSS"相关的知识点,以及通过一些CSS精美示例来展示其魅力。 首先,"CSS酷站"是指那些运用创新和独特CSS技巧设计的网站,它们通常具有引人入胜的视觉效果和...

    css经典教程 css电子书

    - **测验与挑战**:通过在线测验检验自己的CSS技能水平,加深理解和记忆。 - **参考手册**:提供了完整的CSS2参考手册,包括属性、选择器等详细信息。 #### 九、总结 通过以上内容的学习,我们可以了解到CSS作为一...

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...

    CSS网站布局与美化,css

    CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...

    birt公用CSS样式

    在创建BIRT报表时,CSS(Cascading Style Sheets)样式起到了至关重要的作用,它们用于控制报表的外观和布局,使其符合用户界面的需求。本主题将深入探讨“birt公用CSS样式”,并结合提供的文件内容进行详细说明。 ...

    CSS:The Definitive Guide, 4th Edition[CSS权威指南](英文版)

    《CSS权威指南》第四版是CSS领域的重要著作,作者Eric A. Meyer凭借其深厚的行业经验和智慧,对CSS的各个方面进行了详尽的探讨。 本书从基础讲起,逐步深入到CSS的核心概念与应用。CSS权威指南第四版涵盖了CSS的...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

Global site tag (gtag.js) - Google Analytics