CSS核心知识详解：选择器与属性实战指南

一、CSS入门：从选择元素开始

1. 基础选择器

选择器类型	示例	使用场景	优先级
元素选择器	p	修改所有段落样式	1
类选择器	.nav-item	复用样式（最常用）	10
ID选择器	#header	唯一元素样式	100
后代选择器	div p	嵌套元素定位	累加
伪类选择器	a:hover	交互状态样式	10
通用选择器	*	全局样式重置	0

示例代码：

/* 元素选择器 */
h1 {
    color: blue;
}

/* 类选择器 */
.active {
    font-weight: bold;
}

/* ID选择器 */
#main-content {
    padding: 20px;
}

/* 后代选择器 */
nav a {
    text-decoration: none;
}

/* 伪类选择器 */
button:hover {
    background-color: #f0f0f0;
}

二、文本样式：让文字会说话

1. 字体控制

p {
    font-family: "Helvetica Neue", Arial, sans-serif; /* 字体栈 */
    font-size: 16px;       /* 推荐使用rem单位 */
    font-weight: 400;      /* 100-900，400=normal */
    line-height: 1.6;      /* 行高建议用无单位值 */
    color: #333;           /* 十六进制颜色值 */
    text-align: center;    /* 对齐方式 */
    text-decoration: underline; /* 下划线/删除线 */
}

2. 字体单位对比

单位	特点	使用场景
px	固定像素值	精确控制
em	相对于父元素字体大小	相对单位
rem	相对于根元素字体大小	推荐使用
%	相对于父元素字体大小	百分比控制
vw/vh	视口宽高百分比	响应式设计

---

三、盒子模型：网页布局的基石

1. 盒子模型详解

.box {
    width: 200px;         /* 内容区宽度 */
    height: 150px;
    padding: 20px;        /* 内边距 */
    border: 2px solid #000; /* 边框 */
    margin: 30px;         /* 外边距 */
    box-sizing: border-box; /* 推荐使用！保持元素总尺寸 */
}

2. 常见问题解决方案

• margin塌陷：父元素添加overflow: hidden或使用Flex布局

• 边框重叠：使用box-shadow替代边框

• 高度塌陷：使用clearfix技巧

---

四、定位与浮动：元素位置控制

1. 定位系统

定位方式	特点	示例代码
static（默认）	正常文档流	position: static;
relative	相对自身定位	position: relative; top: 10px;
absolute	相对于最近定位父元素	position: absolute; left: 0;
fixed	相对于视口固定	position: fixed; top: 0;
sticky	混合定位（新版特性）	position: sticky; top: 20px;

2. 浮动布局

.left {
    float: left;
    width: 200px;
}

.right {
    float: right;
    width: 200px;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

五、显示与隐藏：元素可见性控制

1. 常用属性

属性	特点	使用场景
display	控制显示方式	none完全隐藏
visibility	控制可见性	hidden保留空间
opacity	控制透明度	0-1之间取值
overflow	内容溢出处理	hidden隐藏溢出内容

2. 示例代码

.hidden {
    display: none;      /* 完全隐藏，不占空间 */
}

.invisible {
    visibility: hidden; /* 隐藏但保留空间 */
}

.transparent {
    opacity: 0.5;       /* 半透明效果 */
}

.scrollable {
    overflow: auto;     /* 自动显示滚动条 */
}

六、实战案例：个人简介页面美化

HTML结构

<div class="profile">
    <img src="avatar.jpg" alt="头像">
    <h1>张三</h1>
    <p>前端开发工程师</p>
    <ul class="skills">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</div>

CSS样式

.profile {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
}

.profile img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.skills {
    list-style: none;
    padding: 0;
}

.skills li {
    display: inline-block;
    margin: 5px;
    padding: 5px 10px;
    background: #f0f0f0;
    border-radius: 15px;
}

七、常见问题解答

Q1：如何实现垂直居中？

/* 方案1：Flex布局 */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 方案2：Grid布局 */
.container {
    display: grid;
    place-items: center;
}

/* 方案3：绝对定位 */
.container {
    position: relative;
}
.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Q2：如何实现响应式布局？

• 使用媒体查询@media

• 使用相对单位（rem、%）

• 结合Flex/Gird的自动换行特性

Q3：如何清除浮动？

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}