CSS魔法堂:Reset CSS

下列样式规则可用于最小化各浏览器标签样式的不一致性。注意:实际使用时应该对其进行适当的调整,以适应项目要求。

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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-size: 100%;
    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;
}
时间: 2024-10-30 06:44:24

CSS魔法堂:Reset CSS的相关文章

CSS魔法堂:不得不说的Containing Block

前言  <CSS魔法堂:重新认识Box Model.IFC.BFC和Collapsing margins>中提到在没有floated兄弟盒子时,line box的左右边框会与所属的containing block的左右content edge相接触.那到底什么是containing block(abbr. CB)呢? containing block在CSS的visual formatting model中十分重要的理论基础,因为盒子的宽/高度自动值/相对值的计算,相对/浮动/绝对定位,均依赖

CSS魔法堂:&quot;那不是bug,是你不懂我!&quot; by inline-block

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发现盒子间无端端多了个不可选的空白符,于是想尽办法修复这个bug. 直到一天拜读了@一丝姐.@HAX等高人的秘笈后才顿悟,原来我错了.那不是bug,是我不懂而已. 先行者--IE5.5中的inline-block  当我们为支持IE5.5/6/7而添加这段hack时*display:inline;*z

CSS魔法堂:深入理解line-height和vertical-align

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊......于是通过本篇来一探究竟:) line-height到底有多height? 行距.行间距傻傻分不清  首先看看"有道词典"的解析! Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本

CSS魔法堂:hasLayout原来是这样!

前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context).也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算.而IFC(即没有拥有布局)而言,

CSS魔法堂:Absolute Positioning就这个样

前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们意识到自己力量的微弱,开始迷茫不前. 后来有幸拾到各路前辈高人的秘笈,终于打通任督二脉,记录在案以便日后查阅. 以Normal flow为基础 Q:不是说好以左上角为原点(0,0)吗?怎么top:auto;right:auto;bottom:auto;left:auto;时的效果和Normal fl

CSS魔法堂:你真的懂text-align吗?

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The 'text-align' CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control

CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习的记录. 何为盒子模型?     盒子模型到底何方神圣居然可以作为CSS的基础?闻名不如见面,上图了喂!   再来张切面图吧!   下面我们以 <div></div> 为栗子. <div></div> 标签被浏览器解析后会生成div元素并添加到documen

CSS魔法堂:选择器及其优先级

一.前言    首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::first-letter C. #main::before   D. [type="checkbox"]:checked E. ul#shop-list   二.回顾选择器类型           html片段 <body> <div id="content"

CSS魔法堂:盒子模型简介

本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model)   一.W3C标准的盒子模型       二.IE盒子模型   三.两种模型的区别 W3C标准盒子模型:   外盒模型        元素空间宽度 = content width + padding + border + margin的宽度        元素空间高度 = content width + padding + border + margin的高度   内盒模型 元素宽度 = content he