CSS基础样式库

CSS基础样式库

  • Reset
  • Normalize
  • Reset与Normalize效果对比
  • Reset与Normalize使用哪一个?

HTML标签在各个浏览器中会有不同的默认属性, Reset.cssNormalize.css是我使用最频繁的基础样式库,他们都是为了解决兼容性和统一视觉效果,但是其中的风格略有不同。

Reset

Reset从单词的意思就很好理解,重置、清零,它会把所有的标签的margin、padding、border等等属性重置掉。

Normalize

Normalize与Reset不同之处在于,它不会重置标签的默认属性,而是保证标签在各浏览器兼容性的情况下保留下来了默认属性。

Reset与Normalize效果对比

同样一段html,来看看Reset与Normalize展示出来的效果:

<h1>标题h1>
<p>pp>
<input type="text">
<table>
    <tr>
        <td>1td>
        <td>2td>
        <td>3td>
    tr>
    <tr>
        <td>4td>
        <td>5td>
        <td>6td>
    tr>
table>
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
ul>

使用Reset的效果图:
CSS基础样式库_第1张图片
使用Normalize的效果图:
CSS基础样式库_第2张图片

Reset与Normalize使用哪一个?

网上对比的文章很多,都列出了他们的优劣势,其实更应该从项目本身考虑,适合哪个就用哪个,有句话很对,存在即合理。

你可能感兴趣的:(CSS,css,css3,html,html5,javascript)