总结css的知识点和css3的新特性

CSS常见知识点：

盒子模型及其相关属性

盒子模型是CSS布局中的一个基础概念，由内容区域、内边距、边框和外边距组成。常用的盒子模型属性有width、height、padding、margin、border等。

示例代码：

css

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

浮动（float）及清除浮动方法

浮动可以将元素向左或向右移动，使得其他元素围绕其排列。在使用浮动时需要考虑清除浮动的问题。

示例代码：

css

.box {
  float: left;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

定位（position）

定位是指通过CSS属性控制元素的位置，常用的定位属性有position、top、right、bottom、left等。

示例代码：

css

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

选择器

选择器是用来选择HTML元素的一种方式，包括标签选择器、ID选择器、类选择器、伪类和伪元素等。

示例代码：

css

/* 标签选择器 */
h1 {
  color: red;
}

/* ID选择器 */
#box {
  background-color: black;
}

/* 类选择器 */
.list {
  font-size: 16px;
}

/* 伪类 */
a:hover {
  text-decoration: underline;
}

/* 伪元素 */
p::after {
  content: "- The End -";
  font-style: italic;
}

文本样式

文本样式包括字体、颜色、大小、行高等。

示例代码：

css

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

背景样式

背景样式包括背景颜色、背景图片、背景定位等。

示例代码：

css

body {
  background-color: #f5f5f5;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

渐变（linear-gradient和radial-gradient）

渐变可以创建自然的过渡效果，常用的渐变有线性渐变和径向渐变。

示例代码：

css

/* 线性渐变 */
body {
  background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
}

/* 径向渐变 */
.box {
  background: radial-gradient(circle at center, #ffffff 0%, #f5f5f5 100%);
}

动画（animation）、过渡（transition）和变形（transform）

动画、过渡和变形都是用来实现元素的动态效果，常用的属性有animation、transition、transform等。

示例代码：

css

/* 动画 */
.box {
  animation: move 2s ease infinite;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 过渡 */

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

.box:hover {
  transform: scale(1.2);
}

边框半径（Border Radius）：可以使用 border-radius 属性来将元素的边角变为圆角。 示例代码：
div {
  border-radius: 10px;
}
盒阴影（Box Shadow）：使用 box-shadow 属性可以为元素添加阴影效果。 示例代码：
div {
  box-shadow: 5px 5px 5px #888888;
}
渐变（Gradient）：可以使用 linear-gradient 或 radial-gradient 实现渐变效果。 示例代码：
div {
  background: linear-gradient(to right, red, yellow);
}
动画（Animation）：使用 animation 属性可以为元素添加动画效果。 示例代码：
div {
  animation: example 5s infinite;
}

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}
媒体查询（Media Queries）：可以根据屏幕大小、分辨率等参数来修改 CSS 样式，实现响应式网页设计。 示例代码：
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

未完待续-----------

CSS3的新特性：

边框圆角（border-radius）和阴影效果（box-shadow）。

多列布局（multi-column layout）。

盒子大小（box-sizing）控制。

变形（transform）功能，用来对元素进行旋转、倾斜、缩放、平移等操作。

过渡（transition）功能，用来实现动态交互效果。

动画（animation）功能，用来制作更加复杂的动画效果。

文本阴影（text-shadow）功能，用来给文本添加阴影效果。

媒体查询（media query）功能，用于响应式布局。

Web字体（@font-face）功能，可以在网页中使用自定义字体。

渐变（linear-gradient和radial-gradient）功能，用于创建更加自然的渐变效果。