CSS从入门到精通:打造完美网页布局

706 阅读5分钟

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;,并结合 topleftright, 和 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的一些基础知识和高级技巧的分享,希望能给大家带来帮助。如果你有任何疑问或者想要了解更多内容,请随时留言交流!