`
sky_uck
  • 浏览: 29553 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
社区版块
存档分类
最新评论

CSS布局口诀 - CSS BUG查找顺口溜

    博客分类:
  • css
阅读更多
   
在进行CSS网页布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?

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

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

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

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

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

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

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

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

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

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

分享到:
评论

相关推荐

    CSS布局口诀

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

    变幻之美DivCSS网页布局揭秘-案例实战篇源码

    《变幻之美DivCSS网页布局揭秘-案例实战篇源码》是一部深入探讨Div+CSS网页布局技术的实践性教程。在Web开发领域,Div+CSS布局是构建高效、可维护、响应式网站的基础,它能够帮助开发者实现灵活多变的页面设计,提升...

    mini-css-extract-plugin-NS-bug

    《深入理解mini-css-extract-plugin及其NS Bug》 在JavaScript的世界里,构建工具扮演着至关重要的角色,它们帮助我们优化代码、提升性能。其中,`mini-css-extract-plugin`是Webpack中一个非常实用的插件,它负责...

    FireFox_css_usage-0.2.9

    FireFox_css_usage-0.2.9 过滤网站中没有必要的CSS 简化CSS代码非常方便

    div+css布局大全

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

    postcss-flexbugs-fixes, PostCSS插件,试图修复flexbug的所有问题.zip

    postcss-flexbugs-fixes, PostCSS插件,试图修复flexbug的所有问题 PostCSS Flexbugs修复 这个项目试图修复所有问题的插件。 Bug 4输入.foo { flex: 1; }.bar { flex: 1 1; }.foz { flex: 1 1 0; }.b

    css权威指南-css权威指南

    css权威指南-css权威指南-css权威指南

    [变幻之美-DivCSS网页布局揭秘-案例实战篇]..扫描版

    [变幻之美-DivCSS网页布局揭秘-案例实战篇].(金峰).扫描版

    css页面源码-1

    综上所述,"css页面源码-1"涉及的内容广泛,从基础的CSS语法到复杂的布局策略,再到多浏览器兼容性的处理。通过学习和实践,我们可以构建美观、功能丰富的网页,并确保它们在各种环境下正常工作。压缩包中的...

    CSS网站布局实录-基于Web标准的网站设计指南(第2版)

    《CSS网站布局实录——基于Web标准的网站设计指南(第2版)》是一本深入探讨CSS(Cascading Style Sheets)技术在构建网站布局中的应用的专业书籍。由李超编著,它针对Web开发人员和设计师,提供了一个全面、实践性...

    [变幻之美-DivCSS网页布局揭秘-案例实战篇](金峰) 源码+PDF

    《变幻之美:Div+CSS网页布局揭秘(案例实战篇)》通过作者原创的4个案例,细致地介绍了基于Web标准的Div CSS网页布局的实现方法。每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果分析,以及最终CSS页面...

    DIVCSS布局大全.pdf

    ### DIV+CSS布局大全知识点概览 #### 一、DIV+CSS布局入门 - **CSS布局原理**:在学习CSS布局之前,理解CSS处理页面的基本原理至关重要。这涉及到如何通过内容的语义和结构来组织HTML,而不是仅仅关注外观效果。 -...

    CSS工具-CSS工具

    - **功能介绍**:提供2栏和3栏的CSS布局框架,方便用户快速构建网页布局。 - **应用场景**: - 构建新闻网站、博客等需要明确分栏显示内容的页面。 - 作为基础模板,进一步开发复杂的页面结构。 - **技术细节**: ...

    CSS3.0--CSS4.0 API

    在网页设计和开发中,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责控制网页的布局和样式。随着技术的不断发展,CSS从最初的1.0版本逐步演进到目前广泛使用的3.0版本,并且已经出现了对下一代CSS4.0的...

    css页面源码-2

    5. **布局技术**:CSS提供了多种布局方式,如浮动布局(float)、定位布局(position),以及现代CSS的Flexbox(弹性盒子布局)和Grid(网格布局)。这些技术可以帮助创建复杂的页面结构和响应式设计。 6. **响应式...

    高效学习CSS布局之道

    高效学习CSS布局之道:通过244个范例掌握网页样式与布局技术

    CSS网站布局与美化,css

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

Global site tag (gtag.js) - Google Analytics