CSS常用代码大全
1. 基本样式
1.1 样式重置
在编写CSS样式时，为了避免因不同浏览器对默认样式的差异导致页面显示不一致，可以使用以下代码重置样式：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
这段代码使用了通配符选择器，将所有元素的外边距和内边距设置为0，并且将盒模型设置为边框盒模型。这样可以确保页面在不同浏览器中的显示效果一致。
1.2 字体和颜色
CSS可以控制网页中的字体和颜色，以下是常用的样式：
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
这段代码将整个网页的字体设置为Arial字体，如果没有Arial字体，则使用默认的sans-serif字体。字体大小为16像素，颜色为#333333。可以根据实际需要进行调整。
2. 盒模型和布局
2.1 盒模型
盒模型是CSS中一个非常重要的概念，它定义了网页元素在页面上的布局和大小。以下是常用的样式：
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid #333333;
margin: 10px;
}
这段代码将一个具有200px宽度和200px高度的盒子定义为.box类。设置了20像素的内边距和1像素的实线边框，并在盒子周围添加了10像素的外边距。
2.2 布局
使用CSS可以实现不同的页面布局，以下是常用的样式：
.container {
display: flex;
justify-content: center;
align-items: center;
}
这段代码将一个容器定义为.container类，并设置其为弹性布局。justify-content属性可以控制弹性项目在主轴上的对齐方式，这里设置为居中对齐。align-items属性可以控制弹性项目在交叉轴上的对齐方式，这里也设置为居中对齐。
3. 渐变和动画
3.1 渐变
使用CSS可以实现渐变效果，以下是常用的样式：
.box {
background: linear-gradient(to right, #ff0000, #0000ff);
}
这段代码将一个盒子的背景定义为从红色渐变到蓝色的线性渐变。可以根据需要调整渐变方向和渐变的颜色。
3.2 动画
使用CSS可以实现动画效果，以下是常用的样式：
.box {
animation: myanimation 1s infinite;
}
@keyframes myanimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
这段代码定义了一个名为myanimation的动画，它会使一个盒子在1秒内不断缩放。使用@keyframes规则来定义动画的关键帧，这里定义了动画从初始状态（0%）到中间状态（50%）再到结束状态（100%）的变化，通过transform属性实现缩放效果。
这篇文章介绍了CSS常用代码的基本样式、盒模型和布局、渐变和动画等方面。通过使用这些代码，我们可以方便地控制页面的样式和布局，实现丰富多样的效果。希望这些代码对你编写HTML和CSS有所帮助。