一,Reset CSS
目的:减少各种浏览器下默认样式的差异。
方法:
- 使用Reset CSS清除浏览器默认样式,网上有很多写好的Reset CSS模板,选一个适合自己网页要求的,复制黏贴。
- 写一个适合自己的Base CSS
/* =====================RESET CSS=====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ========================================== */
参考链接:http://meyerweb.com/eric/tools/css/reset/index.html;
http://apps.hi.baidu.com/share/detail/16981702
二,clearfix(清除浮动)
css中有个头疼的东西:布局。 使用float可能会带出很多排版上的错误,这时就可以利用clearfix来清除多余的float影响。
解决办法:
- 在css文件中复制黏贴以下clearfix代码;
/* ========================= clearfix =============================== */
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after{
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after{
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix{
zoom: 1;
}
2. 在使用float:left 或者 float:right的HTML标签上调用clearfix
<div id="wraper" class="clearfix">
参考链接:http://www.cnblogs.com/zllwebjs/archive/2010/03/19/1689980.html
分享到:
相关推荐
【CSS学习笔记】这篇笔记主要涉及的是CSS在不同浏览器,特别是IE6中遇到的问题及其解决方案。以下是详细的知识点解析: 1. **错误的扩展** - 在IE6中,设置`height`为固定值时,内容超出这个高度,div会自动扩展,...
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...
### CSS Reset 初始化设置详解 #### 一、引言 在前端开发中,浏览器之间的样式差异是常见的问题之一。为了确保跨浏览器的一致性,并且使页面样式更加可控,CSS Reset 成为了一种广泛采用的技术手段。本文将详细...
reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。 具体如何规划网站CSS结构,不在文本讨论之列,可以参考Smashing Magazine上的文章,国内有差强人意的...
这段代码的工作原理是利用CSS的伪元素`:after`,在`.clearfix`类的元素后面添加一个看不见的内容(这里是一个点“.”)。这个伪元素被设置为块级元素,并且`clear:both`确保它之后的元素都会被推到新的一行,从而...
在CSS布局中,`clearfix`是一个常见的解决方案,用于清除浮动元素带来的影响,防止父元素因浮动元素而高度塌陷。`clearfix`方法的出现,主要是为了处理传统浮动布局(如左侧导航和右侧主要内容)中,父容器无法包含...
在网页设计中,CSS(Cascading Style Sheets)样式被广泛用于定义页面元素的外观、布局和结构。CSS样式初始化是开发过程中一个重要的步骤,它旨在消除浏览器之间的默认样式差异,确保网页在不同浏览器上的一致性表现...
8. **浏览器兼容性**:了解如何处理跨浏览器兼容性问题,如使用reset CSS或normalize.css来消除默认样式差异。 9. **CSS预处理器**:如果案例中涉及Sass或Less,会介绍如何使用预处理器来编写更高效、可维护的CSS...
在CSS世界中,`float`和`clear`是两个非常重要的布局属性,它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中,我们将深入探讨`float`和`clear`的概念...
### CSS十年笔记精要 #### 一、概述 在长达十年的工作经验中,积累了大量关于CSS(层叠样式表)的实用技巧与心得。...希望这篇十年笔记的总结能对读者有所帮助,让大家在CSS的学习道路上越走越远。
Blueprint CSS 是一个强大的前端开发工具,它为网页设计师和开发者提供了高效的CSS解决方案。这个框架的主要目标是简化CSS编码过程,让网页布局和设计更加高效、规范。Blueprint CSS 的核心特性包括一个灵活的网格...
### CSS基础知识 ...通过上述内容,我们不仅了解了CSS的基础概念和用法,还深入学习了如何利用不同类型的样式表、选择器以及高级特性来优化和美化网页。这对于开发高质量、易于维护的Web应用程序至关重要。
在CSS学习过程中,开发者经常会遇到一系列的挑战,包括但不限于浏览器兼容性问题、分辨率适配以及各种意想不到的样式异常。这些问题可能会让初学者感到困扰,但理解并掌握解决这些问题的方法是提升CSS技能的关键步骤...
以下是从标题“css学习必备,共十个经典例子”和描述“学习css必备,想做好一个网页,css是必不可少的”中提炼出的四个关键CSS知识点,每个知识点都配有实例代码。 1. **居中布局** 在网页设计中,经常需要将网站...
2. **浏览器内核**:主要有五个主流浏览器,其内核分别是: - Chrome 和 Safari 使用的是 Blink 内核。 - Opera 在2013年后使用了 Blink 内核,之前使用的是 Presto 内核。 - Firefox 使用的是 Gecko 内核。 - ...
2. **CSS选择器有哪些类型?** CSS选择器包括:类型选择器(如`div`)、类选择器(`.class`)、ID选择器(`#id`)、属性选择器(`[attr]`)、伪类(`:hover`)和伪元素(`::before`)等。 3. **如何实现盒模型的...
CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after { content:; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; } 如果外部有一个div...
例如,把.clearfix规则放在layout.css中,h1、h2等标题样式放入typography.css。每个CSS文件都应该专注于其特定的职责,这样可以使代码更易于维护和扩展。此外,基础样式(base.css)可以合并这些文件,为每个项目...
在本文中,我们将探讨50个便于使用的CSS2和CSS3代码片段,这些片段可以帮助设计师和开发者提升工作效率,实现更先进的网页设计。 首先,让我们看一下CSS重置。这是一个非常基础但重要的步骤,用于消除浏览器默认...
描述中提到,作者建议将.clearfix类放入layout.css,这表明.clearfix可能是一个用于清除浮动的实用类。而将h1、h2等标题样式放入typography.css中,则反映了作者对于样式的模块化管理的理念。这种做法是将CSS样式...