【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;
}

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