在CSS中“*”是什么意思?
我一直在寻找诸如Facebook和Youtube等许多网站的CSS文件。
几乎所有的人都看到这样的代码:
* { margin: 0; padding: 0; }
奇怪的是,在chrome web开发者工具中移除该块不会影响页面的布局。
这个代码是什么意思,什么时候使用,为什么?
这是一种常见的技术,称为CSS重置。 不同的浏览器使用不同的默认页边距,导致页面看起来不同。 *
表示“所有元素”( 通用select器 ),所以我们将所有元素设置为零边距和零填充,从而使它们在所有浏览器中看起来都一样。
*
是通配符
这意味着将这些样式应用于所有元素。
在这种情况下,将所有元素的margin
和padding
设置为0
。 这对于重置CSS文件是很常见的,以便将不同元素上的所有原生浏览器边距/填充默认为一个共同的值。
星号( *
)是通配符,表示所有元素。
* { margin: 0; }
将所有元素的边距设置为0。
这是一个通配符,并为所有HTML元素设置margin
和padding
为0
。
试试更有趣的一个:
* { font-size: 20pt; }
它将页面上的所有HTML元素的边距和填充重置为0。
有些浏览器可能已经默认这样做了,但是为了以防万一,尝试手动重置所有内容总是有用的。
事实上,许多网站都带有一个reset.css(或类似的),当你打开这个网站时,你会注意到许多规则来重置每个浏览器上的所有内容。
这是一般CSS重置的一个常见部分。 这基本上将所有(*)元素的所有边距和填充设置为0.然后,您可以根据需要自由地为每个元素添加自己的边距和填充值。
*
是通配符,它select所有元素的margin: 0;
和padding: 0;
为所选元素设置边距和填充为0,在这种情况下,这些元素将是所有元素。
这对于Web开发非常方便,我在每个构build的站点都使用它。
在CSS中,除了样式之外,还有一些默认样式应用于每个网页。 这些默认样式为像<h1>, <li>, <p>, <table>
等元素定义了某些padding
和margin
值。烦人的是,您经常需要重写这些样式以使页面看起来正确,但并非所有浏览器制造商都同意这些默认设置。 通常大多数开发人员发现最简单的方法是将所有padding
和margins
重置zero
以便所有的行为都像预期的那样。 *
是wildcard
select器,将匹配所有元素types。 基本上,这种风格说,重置所有元素的所有填充/边距为零,因此删除任何默认的风格。