C备忘单 - CSS

前言

CSS是前端开发者必须熟练掌握的技能之一。下面给大家分享一份CSS备忘单，让你可以快速查阅CSS的常用技巧。

基础选择器

标签选择器

p { 
  color: red; 
}

ID选择器

#main { 
  width: 50%; 
}

类选择器

.intro { 
  font-size: 16px; 
}

后代选择器

.container p { 
  line-height: 1.5; 
}

相邻兄弟选择器

h1 + p { 
  font-size: 18px; 
}

通用选择器

* { 
  margin: 0; 
  padding: 0;
}

CSS盒模型

概念

CSS盒模型是CSS中一个非常重要的概念，也是CSS布局的基础，它包括四个部分：内容(content)、内边距(padding)、边框(border)和外边距(margin)。

例子

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

CSS显示属性

display

display属性可以指定元素的显示方式，常见的取值包括：

• none：元素不显示
• block：元素以块级元素的方式显示
• inline：元素以行内元素的方式显示
• inline-block：元素以行内块级元素的方式显示
• flex：元素以弹性盒模型的方式显示

visibility

visibility属性可以指定元素在页面中的可见性，常见的取值包括：

• visible：元素在页面中可见
• hidden：元素在页面中不可见，但仍然占据页面空间
• collapse：仅对表格元素有效，会将表格合并

opacity

opacity属性可以指定元素的透明度，取值范围从0（完全透明）到1（完全不透明）。

CSS布局属性

position

position属性用于指定元素的定位方式，常见的取值包括：

• static：元素按照正常流排列
• relative：元素相对于其正常位置进行定位
• absolute：元素相对于最近的已定位祖先元素进行定位
• fixed：元素相对于浏览器窗口进行定位

float

float属性用于指定元素在父元素中的浮动方式，常见的取值包括：

• left：元素向左浮动
• right：元素向右浮动
• none：元素不浮动

clear

clear属性用于指定元素不允许出现浮动元素的方式，常见的取值包括：

• both：元素下方不允许左右两侧出现浮动元素
• left：元素下方不允许左侧出现浮动元素
• right：元素下方不允许右侧出现浮动元素
• none：元素下方可以允许浮动元素

CSS字体属性

font-family

font-family属性可以指定元素使用的字体家族，例如：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

font-size

font-size属性可以指定元素的字体大小，例如：

h1 {
  font-size: 2em;
}

font-weight

font-weight属性可以指定元素的字体粗细，常见的取值包括：

• normal：正常粗细
• bold：粗体
• lighter：细体
• bolder：更粗的字体

text-align

text-align属性可以指定元素中文本的对齐方式，常见的取值包括：

• left：左对齐
• center：居中对齐
• right：右对齐
• justify：两端对齐

CSS颜色属性

color

color属性可以指定文字颜色，例如：

h1 {
  color: #333333;
}

background-color

background-color属性可以指定背景颜色，例如：

body {
  background-color: #f0f0f0;
}

border-color

border-color属性可以指定边框颜色，例如：

.box {
  border-color: #cccccc;
}

CSS动画属性

transition

transition属性可以指定元素的动画效果，包括动画持续时间、动画效果类型和延迟时间等。例如：

.box {
  transition: all 0.3s ease-in-out;
}

animation

animation属性可以指定元素的动画效果，并可控制动画播放次数、延迟时间和开始时间等。例如：

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.box {
  animation: fadeIn 0.5s ease-in-out 1s forwards;
}

以上就是这份CSS备忘单的全部内容，希望可以帮助大家在日常工作中快速查阅CSS知识点。