【CSS】样式与效果

个人主页：Guiat
归属专栏：HTML CSS JavaScript

正文

1. CSS盒模型

1.1 盒模型基础

盒模型是CSS布局的基础，由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

.box {width: 300px;height: 200px;padding: 20px;border: 1px solid black;margin: 30px;
}

1.2 盒模型类型

1.2.1 标准盒模型

在标准盒模型中，元素的宽度和高度只包括内容区域。

.standard-box {box-sizing: content-box; /* 默认值 */width: 300px; /* 仅内容区域宽度 */
}

1.2.2 IE盒模型

在IE盒模型中，元素的宽度和高度包括内容、内边距和边框。

.ie-box {box-sizing: border-box;width: 300px; /* 包括内容区域、内边距和边框 */
}

2. CSS选择器

2.1 基本选择器

/* 元素选择器 */
p { color: blue; }/* 类选择器 */
.highlight { background-color: yellow; }/* ID选择器 */
#header { font-size: 24px; }/* 通用选择器 */
* { margin: 0; padding: 0; }

2.2 组合选择器

/* 后代选择器 */
article p { line-height: 1.6; }/* 子元素选择器 */
ul > li { list-style-type: square; }/* 相邻兄弟选择器 */
h2 + p { font-weight: bold; }/* 通用兄弟选择器 */
h2 ~ p { color: gray; }

2.3 伪类和伪元素

/* 伪类 */
a:hover { text-decoration: underline; }
li:first-child { font-weight: bold; }/* 伪元素 */
p::first-line { font-variant: small-caps; }
p::before { content: "➤ "; }

3. CSS布局技术

3.1 Flexbox布局

Flexbox提供了一种更有效的方式来布局、对齐和分配容器中项目之间的空间。

.container {display: flex;justify-content: space-between;align-items: center;
}.item {flex: 1;margin: 5px;
}

3.2 Grid布局

Grid布局允许开发者创建二维网格布局系统。

.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;
}.grid-item {grid-column: span 2;
}

3.3 定位

CSS定位允许你精确控制元素的位置。

.relative {position: relative;top: 20px;left: 30px;
}.absolute {position: absolute;top: 50px;right: 10px;
}.fixed {position: fixed;bottom: 0;width: 100%;
}

4. CSS过渡与动画

4.1 过渡

CSS过渡允许元素在不同状态之间平滑地改变。

.button {background-color: blue;transition: background-color 0.3s ease;
}.button:hover {background-color: darkblue;
}

4.2 动画

CSS动画使用@keyframes规则来创建动画序列。

@keyframes slide-in {0% {transform: translateX(-100%);}100% {transform: translateX(0);}
}.animated {animation: slide-in 1s ease forwards;
}

5. 响应式设计

5.1 媒体查询

媒体查询允许根据设备特性应用不同的样式。

/* 桌面设备 */
@media (min-width: 992px) {.container {width: 970px;}
}/* 平板设备 */
@media (min-width: 768px) and (max-width: 991px) {.container {width: 750px;}
}/* 移动设备 */
@media (max-width: 767px) {.container {width: 100%;}
}

5.2 视口单位

视口单位基于视口的尺寸，适合响应式设计。

.hero {height: 100vh; /* 视口高度的100% */width: 100vw; /* 视口宽度的100% */
}.text {font-size: 5vw; /* 视口宽度的5% */
}

6. CSS变量

CSS变量(自定义属性)提供了在整个文档中重用值的能力。

:root {--primary-color: #3498db;--secondary-color: #2ecc71;--font-size-base: 16px;
}.button {background-color: var(--primary-color);font-size: var(--font-size-base);
}.highlight {color: var(--secondary-color);
}

7. CSS预处理器

7.1 Sass/SCSS

Sass为CSS添加了变量、嵌套、混合等高级功能。

$primary-color: #3498db;.navbar {background-color: $primary-color;ul {display: flex;li {margin: 0 10px;a {color: white;&:hover {text-decoration: underline;}}}}
}

7.2 Less

Less是另一种流行的CSS预处理器，语法与CSS更接近。

@primary-color: #3498db;.button {background-color: @primary-color;&:hover {background-color: darken(@primary-color, 10%);}
}

8. CSS优化技巧

8.1 选择器优化

/* 避免 */
body .content article .title { color: red; }/* 推荐 */
.content-title { color: red; }

8.2 简写属性

/* 避免 */
.element {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;
}/* 推荐 */
.element {margin: 10px 20px;
}

8.3 减少重绘和回流

/* 避免 */
.box {width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;border: 1px solid black;
}/* 推荐 */
.box {transform: translate(50px, 50px);width: 100px;height: 100px;position: absolute;border: 1px solid black;
}

结语
感谢您的阅读！期待您的一键三连！欢迎指正！