[分享]css初始化代码怎么用

 使用CSS初始化代码可以使网页在不同浏览器中有更好的兼容性和一致性。在实际操作中，我们可以将这些初始化样式放在一个CSS文件中，并在需要的页面中引入。下面是一些常用的CSS初始化代码，通过在pre标...

 使用CSS初始化代码可以使网页在不同浏览器中有更好的兼容性和一致性。在实际操作中，我们可以将这些初始化样式放在一个CSS文件中，并在需要的页面中引入。下面是一些常用的CSS初始化代码，通过在pre标签中展示代码，帮助大家更直观的了解每个属性对网页的影响。

1. box-sizing:

* {
  box-sizing: border-box;
} 

这段代码主要用于解决不同浏览器中盒子模型（box model）计算方式的不同，使得在写布局时无需考虑各种奇怪的计算方式。border-box 方式计算元素高度和宽度时，会包含填充和边框，但是不包含外边距。

2. margin and padding:

html, body, h1, h2, h3, h4, h5, h6,
div, p, blockquote, pre,
form, fieldset, legend, input, textarea,
th, td {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
} 

这段代码主要作用是将不同元素默认的外边距和内边距都设置为0，同时去除了列表的默认样式。这样可以避免在进行网站样式设计时，各个元素的默认margin和padding值出现差异而导致样式混乱。

3. font size and line height:

body {
    font-size: 16px;
    line-height: 1.5;
} 

这段代码主要用于设置页面正文的默认字体大小和行高，使网页在不同的浏览器和屏幕上看起来更加一致。设置行高也可以让网页更加美观和易读。

总之，使用CSS初始化代码可以让页面样式更加规范、美观、一致，但是需要注意的是，我们需要在实际应用中根据需求进行灵活调整，而不一定要死板地照搬这些代码。