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

css学习笔记(2) Reset CSS,clearfix

    博客分类:
  • CSS
阅读更多

一,Reset CSS

目的:减少各种浏览器下默认样式的差异。 

方法:

  1. 使用Reset CSS清除浏览器默认样式,网上有很多写好的Reset CSS模板,选一个适合自己网页要求的,复制黏贴。
  2. 写一个适合自己的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影响。

 解决办法:

  1. 在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学习笔记】这篇笔记主要涉及的是CSS在不同浏览器,特别是IE6中遇到的问题及其解决方案。以下是详细的知识点解析: 1. **错误的扩展** - 在IE6中,设置`height`为固定值时,内容超出这个高度,div会自动扩展,...

    浅谈css清除浮动(clearfix和clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法,首先我们先看个例子: XML/HTML Code...

    css reset初始化设置.docx

    ### CSS Reset 初始化设置详解 #### 一、引言 在前端开发中,浏览器之间的样式差异是常见的问题之一。为了确保跨浏览器的一致性,并且使页面样式更加可控,CSS Reset 成为了一种广泛采用的技术手段。本文将详细...

    WEB标准之CSS 打造自己的reset.css

    reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。 具体如何规划网站CSS结构,不在文本讨论之列,可以参考Smashing Magazine上的文章,国内有差强人意的...

    css之clearfix的用法深入理解(必看篇)

    这段代码的工作原理是利用CSS的伪元素`:after`,在`.clearfix`类的元素后面添加一个看不见的内容(这里是一个点“.”)。这个伪元素被设置为块级元素,并且`clear:both`确保它之后的元素都会被推到新的一行,从而...

    css中clearfix清除浮动的用法及其原理示例介绍

    在CSS布局中,`clearfix`是一个常见的解决方案,用于清除浮动元素带来的影响,防止父元素因浮动元素而高度塌陷。`clearfix`方法的出现,主要是为了处理传统浮动布局(如左侧导航和右侧主要内容)中,父容器无法包含...

    CSS样式初始化commonInitialize.css

    在网页设计中,CSS(Cascading Style Sheets)样式被广泛用于定义页面元素的外观、布局和结构。CSS样式初始化是开发过程中一个重要的步骤,它旨在消除浏览器之间的默认样式差异,确保网页在不同浏览器上的一致性表现...

    div+css案例,网页设计

    8. **浏览器兼容性**:了解如何处理跨浏览器兼容性问题,如使用reset CSS或normalize.css来消除默认样式差异。 9. **CSS预处理器**:如果案例中涉及Sass或Less,会介绍如何使用预处理器来编写更高效、可维护的CSS...

    css 的 float 与clear

    在CSS世界中,`float`和`clear`是两个非常重要的布局属性,它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中,我们将深入探讨`float`和`clear`的概念...

    css十年来笔记

    ### CSS十年笔记精要 #### 一、概述 在长达十年的工作经验中,积累了大量关于CSS(层叠样式表)的实用技巧与心得。...希望这篇十年笔记的总结能对读者有所帮助,让大家在CSS的学习道路上越走越远。

    css框架Blueprint CSS

    Blueprint CSS 是一个强大的前端开发工具,它为网页设计师和开发者提供了高效的CSS解决方案。这个框架的主要目标是简化CSS编码过程,让网页布局和设计更加高效、规范。Blueprint CSS 的核心特性包括一个灵活的网格...

    css 笔记.docx

    ### CSS基础知识 ...通过上述内容,我们不仅了解了CSS的基础概念和用法,还深入学习了如何利用不同类型的样式表、选择器以及高级特性来优化和美化网页。这对于开发高质量、易于维护的Web应用程序至关重要。

    CSS学习疑难解答

    在CSS学习过程中,开发者经常会遇到一系列的挑战,包括但不限于浏览器兼容性问题、分辨率适配以及各种意想不到的样式异常。这些问题可能会让初学者感到困扰,但理解并掌握解决这些问题的方法是提升CSS技能的关键步骤...

    css学习必备,共十个经典例子

    以下是从标题“css学习必备,共十个经典例子”和描述“学习css必备,想做好一个网页,css是必不可少的”中提炼出的四个关键CSS知识点,每个知识点都配有实例代码。 1. **居中布局** 在网页设计中,经常需要将网站...

    web之html&css相关笔记

    2. **浏览器内核**:主要有五个主流浏览器,其内核分别是: - Chrome 和 Safari 使用的是 Blink 内核。 - Opera 在2013年后使用了 Blink 内核,之前使用的是 Presto 内核。 - Firefox 使用的是 Gecko 内核。 - ...

    经典的CSS面试题(含答案)

    2. **CSS选择器有哪些类型?** CSS选择器包括:类型选择器(如`div`)、类选择器(`.class`)、ID选择器(`#id`)、属性选择器(`[attr]`)、伪类(`:hover`)和伪元素(`::before`)等。 3. **如何实现盒模型的...

    css清除浮动clearfix:after的用法详解(附完整代码)

    CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after { content:; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; }  如果外部有一个div...

    编写适合所有项目的通用的reset.css

    例如,把.clearfix规则放在layout.css中,h1、h2等标题样式放入typography.css。每个CSS文件都应该专注于其特定的职责,这样可以使代码更易于维护和扩展。此外,基础样式(base.css)可以合并这些文件,为每个项目...

    50个便于使用的CSS2CSS3代码片段.pdf

    在本文中,我们将探讨50个便于使用的CSS2和CSS3代码片段,这些片段可以帮助设计师和开发者提升工作效率,实现更先进的网页设计。 首先,让我们看一下CSS重置。这是一个非常基础但重要的步骤,用于消除浏览器默认...

    css reset 重置样式介绍

    描述中提到,作者建议将.clearfix类放入layout.css,这表明.clearfix可能是一个用于清除浮动的实用类。而将h1、h2等标题样式放入typography.css中,则反映了作者对于样式的模块化管理的理念。这种做法是将CSS样式...

Global site tag (gtag.js) - Google Analytics