CSS学习的回顾
目录
场景 2：按钮样式（用 padding+border 控制尺寸）
一、基础样式（文本与字体）
|
样式属性 |
作用 |
常用取值示例 |
|
color |
设置文本颜色 |
#333（十六进制）、rgb(51,51,51)、red（关键字） |
|
font-family |
指定字体族 |
'Microsoft YaHei', sans-serif优先微软雅黑，无则用无衬线字体） |
|
font-size |
设置字体大小 |
14px、1.2rem（相对根元素）、120%（相对父元素） |
|
font-weight |
控制字体粗细 |
normal（400）、bold（700）、500数字值，100-900） |
|
text-align |
文本水平对齐 |
left（左对齐）、center（居中）、right（右对齐）、justify（两端对齐） |
|
line-height |
设置行高（行间距） |
1.5无单位，为字体大小的 1.5 倍）、24px |
|
text-decoration |
文本装饰（下划线等） |
none取消装饰，常用於清除链接下划线）、underline（下划线）、 line-through删除线） |
|
text-indent |
首行缩进 |
2em（常用，缩进 2 个字符宽度） |
二、盒模型样式（布局核心）
盒模型 = 内容区（content）+ 内边距（padding）+ 边框（border）+ 外边距（margin）
|
样式属性 |
作用 |
常用取值示例 |
|
width/ height |
内容区宽度 / 高度 |
100px、50%（相对父元素）、auto（默认，自动适应） |
|
padding |
内边距（内容与边框间距） |
10px（单值，四方向相同）、10px 20px（上下 10px，左右 20px） |
|
margin |
外边距（元素与其他元素间距） |
10px、0 auto（水平居中，需配合固定宽度）、-5px（负边距，用于重叠） |
|
border |
边框（含宽度、样式、颜色） |
1px solid #eee（1px 宽、实线、浅灰色）、none（取消边框） |
|
border-radius |
圆角边框 |
4px（常规圆角）、50%（圆形，需配合正方形宽高） |
|
box-sizing |
盒模型计算方式 |
content-box默认，width 不包含 padding/border）、 border-box （width 包含 padding/border，推荐） |
|
box-shadow |
元素阴影 |
0 2px 8px rgba(0,0,0,0.1) （水平 0、垂直 2px、模糊 8px、透明黑） |
基础盒子模型
<style>
.box {
/* 1. 内容区：盒子内部承载文本/图片的区域 */
width: 200px; /* 内容区宽度 */
height: 100px; /* 内容区高度 */
background: #f0f0f0; /* 内容区背景色（方便观察） */
/* 2. 内边距：内容区与边框之间的空隙（不影响外部布局） */
padding: 20px; /* 上下左右各20px内边距 */
/* 3. 边框：内边距外侧的线条（属于盒子“自身”尺寸） */
border: 3px solid #333; /* 3px宽、实线、黑色边框 */
/* 4. 外边距：盒子与其他元素之间的空隙（完全透明，不占自身尺寸） */
margin: 15px; /* 上下左右各15px外边距 */
}
</style>
<div class="box">这是内容区的文本</div>场景 1：卡片布局（用 padding 控制内部间距）
卡片组件需要 “内容与边缘有空隙”，用padding实现，避免内容紧贴边框：
<style>
.card {
width: 300px;
border: 1px solid #eee;
border-radius: 8px; /* 圆角美化 */
padding: 16px; /* 内容与边框的空隙（关键） */
margin: 10px auto; /* 水平居中，上下留10px间距 */
}
.card img {
width: 100%; /* 图片适应卡片内容区宽度 */
margin-bottom: 12px; /* 图片与文字的间距（margin的“兄弟元素间距”用法） */
}
</style>
<div class="card">
<img src="product.jpg" alt="商品图">
<h3>商品名称</h3>
<p>价格：99元</p>
</div>
场景 2：按钮样式（用 padding+border 控制尺寸）
按钮不需要固定width，通过padding自适应文字长度，border实现按钮边框：
<style>
.btn {
/* 不用固定width，由padding和文字决定 */
padding: 8px 16px; /* 上下8px、左右16px内边距（控制按钮大小） */
border: 1px solid #007bff; /* 蓝色边框 */
background: #007bff;
color: white;
border-radius: 4px;
margin-right: 10px; /* 按钮之间的间距 */
}
.btn-outline {
background: transparent; /* 透明背景（-outline按钮） */
color: #007bff;
}
</style>
<button class="btn">确认</button>
<button class="btn btn-outline">取消</button>
案例 1：导航栏布局（利用 margin 控制元素间距）
<style>
.nav {
background: #333;
padding: 0 20px; /* 左右内边距，让内容不贴边 */
}
.nav-item {
display: inline-block; /* 水平排列 */
color: white;
padding: 15px 0; /* 上下内边距，增加点击区域 */
margin-right: 30px; /* 选项之间的间距 */
}
.nav-item:last-child {
margin-right: 0; /* 最后一个选项去掉右边距，避免多余空隙 */
}
</style>
<div class="nav">
<div class="nav-item">首页</div>
<div class="nav-item">产品</div>
<div class="nav-item">关于我们</div>
<div class="nav-item">联系我们</div>
</div>
案例 2：评论卡片（多层盒模型嵌套）
<style>
.comment {
border: 1px solid #eee;
border-radius: 6px;
padding: 15px; /* 卡片内边距 */
margin: 10px 0; /* 评论之间的间距 */
}
.comment-header {
margin-bottom: 10px; /* 头部与内容的间距 */
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%; /* 圆形头像 */
margin-right: 10px; /* 头像与用户名的间距 */
vertical-align: middle;
}
.username {
font-weight: bold;
margin-right: 15px; /* 用户名与时间的间距 */
}
.time {
color: #999;
font-size: 12px;
}
.comment-content {
margin-bottom: 12px; /* 内容与操作区的间距 */
line-height: 1.5;
}
.comment-actions {
padding-top: 8px; /* 操作区上内边距（视觉分隔） */
border-top: 1px dashed #eee; /* 分隔线 */
}
.action-btn {
margin-right: 20px; /* 按钮之间的间距 */
color: #666;
font-size: 14px;
}
</style>
<div class="comment">
<div class="comment-header">
<img src="https://picsum.photos/40/40" alt="用户头像" class="avatar">
<span class="username">张三</span>
<span class="time">2小时前</span>
</div>
<div class="comment-content">
这个产品很好用，推荐给大家！
</div>
<div class="comment-actions">
<span class="action-btn">点赞</span>
<span class="action-btn">回复</span>
<span class="action-btn">举报</span>
</div>
</div>
三、 布局与定位
1. 显示模式（display）
|
取值 |
作用 |
适用场景 |
|
block |
块级元素（独占一行，可设宽高） |
容器（div）、标题（h1-h6）、段落（p） |
|
inline |
行内元素（不独占一行，不可设宽高） |
文本内标签（span、a、em） |
|
inline-block |
行内块（不独占一行，可设宽高） |
导航项、图标、按钮 |
|
none |
隐藏元素（不占页面空间） |
条件性隐藏（如弹窗关闭） |
|
flex |
弹性布局（父容器开启，子元素弹性排列） |
响应式布局、水平 / 垂直居中、均匀分布 |
|
grid |
网格布局（父容器开启，子元素按网格排列） |
复杂多列布局（如仪表盘、卡片矩阵） |
①：bolck:效果：div 元素独占一行，且能设置宽高，和下一个 div 上下排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Block 示例</title>
<style>
.block-demo {
display: block;
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<a class="block-demo"></a>
<a class="block-demo">百度</a>
<a>淘宝</a>
</body>
</html>②:inline效果：span 元素和后面的 span 在同一行，设置的宽高无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline 示例</title>
<style>
.inline-demo {
display: inline;
width: 200px; /* 无效 */
height: 100px; /* 无效 */
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="inline-demo">aaa</div>
<div class="inline-demo">nnn</div>
</body>
</html>③sinline-block效果：两个 div 在同一行，且都能设置宽高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline-block 示例</title>
<style>
.inline-block-demo {
display: inline-block;
width: 150px;
height: 80px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="inline-block-demo">行内块元素</div>
<div class="inline-block-demo">和我在同一行，且可设宽高</div>
</body>
</html>④:none效果：第一个 div 完全隐藏，第二个 div 会顶到原本第一个 div 的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>None 示例</title>
<style>
.none-demo {
display: none;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="none-demo">我被隐藏了，不占空间</div>
<div>下面的元素</div>
</body>
</html>⑤:flex效果：子元素在父容器内水平垂直居中，且横向排列，有间距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex 示例</title>
<style>
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 300px;
height: 200px;
background-color: lightyellow;
}
.flex-item {
width: 80px;
height: 80px;
background-color: lightpink;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</body>
</html>2. 定位（position）
|
取值 |
作用 |
参考对象 |
适用场景 |
|
static |
默认定位（无特殊定位） |
文档流 |
常规元素 |
|
relative |
相对定位（不脱离文档流，相对自身原位置偏移） |
自身原位置 |
作为绝对定位的父容器、微调元素位置 |
|
absolute |
绝对定位（脱离文档流，相对最近非 static 父元素偏移） |
最近的 relative/absolute/fixed 父元素 |
弹窗、下拉菜单、图标定位（如标签右上角关闭按钮） |
|
fixed |
固定定位（脱离文档流，相对浏览器窗口偏移） |
浏览器窗口 |
顶部导航栏、底部版权栏、回到顶部按钮 |
|
sticky |
粘性定位（滚动到阈值前 static，之后 fixed） |
父元素可视区域 |
列表标题吸顶、侧边栏跟随滚动 |
static（默认定位，一般无需特意设置，这里简单演示默认情况）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static 示例</title>
<style>
.static-demo {
/* position: static; 默认就是，可省略 */
background-color: lightcyan;
}
</style>
</head>
<body>
<div class="static-demo">我是默认定位，正常在文档流中</div>
<div>下一个元素</div>
</body>
</html>relative效果：元素相对自身原来的位置，向右偏移 50px，向下偏移 20px，且不脱离文档流，后面的元素位置不受影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Relative 示例</title>
<style>
.relative-demo {
position: relative;
left: 50px;
top: 20px;
background-color: lightgray;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="relative-demo">相对自身原位置偏移</div>
<div>下一个元素</div>
</body>
</html>absolute效果：absolute-demo 元素相对于最近的非 static 定位父元素（parent），右上角距离父元素右边界 10px，上边界 10px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolute 示例</title>
<style>
.parent {
position: relative; /* 作为绝对定位的父容器 */
width: 200px;
height: 200px;
background-color: lightblue;
}
.absolute-demo {
position: absolute;
right: 10px;
top: 10px;
background-color: lightcoral;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="parent">
<div class="absolute-demo">绝对定位</div>
</div>
</body>
</html>
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
7
0- 0
已为社区贡献8条内容
所有评论(0)