场景:
一般项目开始前,首先会 去除掉浏览器默认样式,设置为 当前项目需要的初始化样式
作用:
防止不同浏览器中标签默认样式不同的影响,统一不同浏览器的默认显示效果,方便后续项目开发
要求:
• 已经准备好base.css代码,同学们需要认识,项目中可以直接引入使用
/* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input { margin: 0; padding: 0; } /* 设置网页统一的字体大小、行高、字体系列相关属性 */ body { font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; color: #333; } /* 去除列表默认样式 */ ul, ol { list-style: none; } /* 去除默认的倾斜效果 */ em, i { font-style: normal; } /* 去除a标签默认下划线,并设置默认文字颜色 */ a { text-decoration: none; color: #333; } /* 设置img的垂直对齐方式为居中对齐,去除img默认下间隙 */ img { vertical-align: middle; } /* 去除input默认样式 */ input { border: none; outline: none; color: #333; } /* 左浮动 */ .fl { float: left; } /* 右浮动 */ .fr { float: right; } /* 双伪元素清除法 */ .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; }