CSS初始化代码（包含常用操作，注释详细）

刃星辰

于 2023-01-15 23:50:47 发布

阅读量562

点赞数

分类专栏：笔记文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/qq_33522195/article/details/128699232

版权

笔记专栏收录该内容

5 篇文章

订阅专栏

这篇文章主要介绍了CSS的一些基础样式设定，包括清除所有标签的内外边距，设置em和i标签的文字不倾斜，移除li标签左侧的小圆点，处理图片的边框和垂直对齐，以及确保button标签在鼠标悬停时显示可点击状态。同时，文章也涉及了抗锯齿技术和浮动清除方法，以提高页面布局的控制和浏览器一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* 将所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉 li 标签左侧默认的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 是为了照顾低版本浏览器，如果图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 ，让图片与文字居中对齐*/
    vertical-align: middle
}

button {
    /* 当鼠标经过button 标签按钮的时候，鼠标变成小手，代表可以点击 */
    cursor: pointer
}

body {
    /* CSS3的属性，用来抗锯齿，让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
}

/* 使用伪元素来清除浮动1 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

/* 使用伪元素来清除浮动2 */
.clearfix {
    *zoom: 1
}