前端工作中常用 CSS 知识点整理

在前端开发中，CSS是一种用于描述网页样式的语言，它非常重要。以下是一些常用的CSS知识点和实例代码：

1. CSS选择器：用于选择页面中的元素。

/* 标签选择器 */
p { color: blue; }
 
/* 类选择器，可以被多个元素使用 */
.my-class { font-size: 16px; }
 
/* ID选择器，应该给页面中唯一的元素使用 */
#my-id { background-color: yellow; }
 
/* 子选择器，用于选择父元素的直接子元素 */
div > p { border: 1px solid black; }
 
/* 后代选择器，用于选择父元素的所有子孙元素 */
div p { color: red; }
 
/* 相邻兄弟选择器，选择紧接在另一个元素后的元素 */
p + div { margin-top: 20px; }
 
/* 通用兄弟选择器，选择一个元素之后的所有兄弟元素 */
p ~ div { border-top: 1px dotted black; }
 
/* 属性选择器，选择包含特定属性的元素 */
input[type="text"] { border: 1px solid black; }

2. CSS盒模型：定义如何计算一个元素的总高度和总宽度。

/* 标准模型，元素的宽高只包含内容区域 */
#my-id { box-sizing: content-box; width: 100px; height: 100px; padding: 10px; border: 1px solid black; }
 
/* 边框盒模型，元素的宽高包含内容区域、边框和内边距 */
#my-id { box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 1px solid black; }

3. CSS布局：定义如何在页面中排列元素。

/* 浮动布局 */
.float-left { float: left; }
.float-right { float: right; }
 
/* Flexbox布局 */
.flex-container { display: flex; }
.flex-item { flex: 1; }
 
/* Grid布局 */
.grid-container { display: grid; grid-template-columns: auto 1fr; }
 
/* 绝对定位 */
#parent { position: relative; }
#child { position: absolute; top: 10px; left: 10px; }

4. CSS特效：添加一些视觉效果。

/* 阴影效果 */
.shadow-effect { box-shadow: 5px 5px 10px #888888; }
 
/* 渐变背景 */
.gradient-background { background: linear-gradient(to right, red, yellow); }
 
/* 动画效果 */
@keyframes example { from { background-color: red; } to { background-color: yellow; } }
.animated-background { animation-name: example; animation-duration: 4s; }

5. CSS响应式设计：使网页在不同设备上都能良好显示。

/* 媒体查询 */
@media screen and (max-width: 600px) {
  body { background-color: lightblue; }
}
 
/* 弹性布局 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 1;
  margin: 10px;
}

6. CSS优先级：解决样式冲突问题。

/* 直接在元素上设置样式 */
p { color: red; }
 
/* ID选择器 */
#my-id