CSS基础与进阶技巧分享
在前端开发领域，CSS是不可或缺的一部分，它不仅影响着网页的外观，还关系到用户体验的好坏。本文将从CSS的基础知识讲起，逐步深入到一些高级技巧的应用，帮助大家更好地掌握CSS。
1. CSS Reset
不同的浏览器厂商对HTML元素有着不同的默认样式设置，这可能导致同一个页面在不同浏览器上显示效果不一。为了确保我们的页面在所有浏览器上都能展现出一致的效果，通常需要在页面样式的开头进行一个样式重置（CSS Reset）。这一过程就是通过设置一些通用的CSS规则，使浏览器的默认样式归零或统一，从而达到“让任何浏览器访问，我们的页面样式都是一张白纸”的目的。
示例代码：
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
虽然使用通配符选择器 * 进行全局样式重置非常方便，但由于性能原因，我们推荐列出所有需要重置样式的标签来代替通配符。
2. 元素居中技术
实现元素居中有多种方法，这里介绍三种常见的方法：
- 定位方式：通过设置元素的
position: absolute;，并结合top,left,right, 和bottom属性以及transform: translate(-50%, -50%);来实现居中。 - Flexbox：利用现代布局方式 Flexbox 中的
justify-content: center;和align-items: center;属性轻松实现水平和垂直居中，但前提是先要把容器设置为Flex。 - 背景大法：对于某些特殊情况，可以通过设置背景图片的方式间接实现元素的居中，这种方法适用于不需要实际占据页面空间的元素。
3. CSS 动画
CSS3 引入了强大的动画功能，允许开发者创建复杂的视觉效果而无需JavaScript。主要涉及到的关键概念包括：
- @keyframes：定义动画的关键帧，即动画过程中各个阶段的状态。
- animation 属性：控制动画的行为，如持续时间、延迟时间、播放次数等。
- transform 函数：用于改变元素的位置、大小、形状等，如
translate(),scale(),rotate()等。
示例代码：创建一个简单的飞船飞行动画
@keyframes fly {
0% { transform: translateX(0) translateY(0); }
50% { transform: translateX(100px) translateY(-50px); }
100% { transform: translateX(200px) translateY(0); }
}
// 这里将动画应用到ship(飞船)类上
.ship {
width: 50px;
height: 50px;
background-color: red;
position: relative;
animation: fly 2s infinite;
transform-style: preserve-3d; /* 启用3D变换 */
perspective: 800px; /* 设置视距 */
}
在这个示例中，飞船使用了animation动画样式，然后通过 @keyframes fly定义动画帧，使得飞船2s内完成一次飞行，并且无限循环。transfrom-style：preserve-3d 是使用3D效果使得动画更加逼真，perspective：800px 则是设置视点，眼睛到屏幕的距离。
4. Inline 元素（行内元素）的 transform 属性支持
需要注意的是，inline 类型的元素默认情况下并不支持 transform 属性。
行内元素不支持 transform 属性的原因
行内元素的(不独占行、宽度和高度不可设置、垂直对齐方式)这些特性使得它们不适合进行复杂的几何变换。transform 属性需要元素具有明确的尺寸和位置信息，以便计算变换后的结果。由于行内元素的尺寸和位置是由其内容动态决定的，因此它们不支持 transform 属性。
如果希望对 inline 元素应用变换效果，可以将其 display 属性更改为 inline-block，这样就可以正常使用 transform 了。
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星球大战</title>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<div class="starwars">
<img src="./images/star.svg" class="star" alt="">
<img src="./images/wars.svg" class="wars" alt="">
<h2 class="byline">
<span>T</span>
<span>h</span>
<span>e</span>
<span>F</span>
<span>o</span>
<span>r</span>
<span>c</span>
<span>e</span>
<span>A</span>
<span>w</span>
<span>a</span>
<span>k</span>
<span>e</span>
<span>n</span>
<span>s</span>
</h2>
</div>
</body>
</html>
/* 业务样式 */
html,body{
height: 100vh;
}
body {
background: #000 url('./images/bg.jpg');
}
.starwars {
perspective: 800px;
transform-style: preserve-3d;/*子元素3d*/
height: 17em;/*高度*/
width: 34em;
position:absolute;/*绝对定位*/
top: 50%;
left: 50%;
/* 移动 相对自身的大小 */
transform: translate(-50%,-50%);/*居中方式之一*/
}
img{
width: 100%;
}
.star,.wars,.byline{
position: absolute;
}
.satr{
top: -0.75em;
}
.wars{
bottom: -0.5em;
}
.byline{
color: white;
font-size: 2.25em;
left: -2em;
right: -2em;
text-align: center;
text-transform: uppercase;
top: 42%;
}
/* 动作导演 */
.star{
/* 动画名称 + keyframes 定义动作 */
animation: star 10s ease-out infinite;
}
.wars{
animation: wars 10s ease-out infinite;
}
@keyframes star{
0%{
opacity: 0;
transform: scale(1.5) translate(-0.75em);
}
20%{
opacity: 1;
}
89%{
opacity: 1;
transform: scale(1);
}
100%{
opacity: 0;
transform: translateZ(-1000em);
}
}
@keyframes wars{
0%{
opacity: 0;
transform: scale(1.5) translate(0.5em);
}
20%{
opacity: 1;
}
90%{
opacity: 1;
transform: scale(1);
}
100%{
opacity: 0;
transform: translateZ(-1000em);
}
}
.byline{
animation: movie-byline 10s linear infinite;
}
.byline span{
animation: spin-letters 10s linear infinite;
display: inline-block;
}
@keyframes movie-byline{
0%{
transform:translateZ(5em);
}
100%{
transform: translateZ(0em);
}
}
@keyframes spin-letters{
0%, 10%{
opacity: 0;
transform: rotateY(90deg);
}
30%{
opacity: 1;
}
70%, 86%{
transform: rotateY(0);
opacity: 1;
}
95%, 100%{
opacity: 0;
}
}
以上就是关于CSS的一些基础知识和高级技巧的分享，希望能给大家带来帮助。如果你有任何疑问或者想要了解更多内容，请随时留言交流！
