1.3 Java全栈开发前端+后端（全栈工程师进阶之路）-前置课程CSS，看这一篇就够了

时间：2024-05-02 07:06:57

前面我们已经讲了前端三剑客中的html和JavaScript，那么现在我们来看一下CSS

CSS核心

0、清除默认样式

* {
    /* 清除默认样式 */
    margin: 0;
    padding: 0;
}

1、尺寸操作-内外边距

.box {
    /* 尺寸操作 */
    /* 宽度 */
    width: 500px ;  
    /* 高度 */
    height: 280px;
    /* 边框 */
    /* 值：边框宽度 边框样式 边框颜色*/
    /* dotted点线边框 */
    border: 1px dotted grey;
    /* 圆角 */
    border-radius: 8px;

    /* 内边距 */
    /* 内边距 上下 左右 */
    padding: 15px 20px ;
    /* width: 100%; */
    /* 自适应计算 元素呈现尺寸的更改模式 */
    box-sizing: border-box;
    /* 外边距 */
    margin: 30px;
    /* 底部 */
    margin-bottom: 50px;
    /* 设置左右自动适应 */
    margin-left: auto;
    margin-right: auto;
    /* 上下自动适应 */
    margin: 10 auto;
}

2、背景处理

    /* 2、背景处理 */
    /* 背景颜色 */
    background-color: #fff;
    /* 不能同时使用 */
    /* 背景图片 */
    background-image: url(/bj.jpg);
    /* 元素阴影效果 */
    /* 5px:水平方向偏移量 5px：上下偏移量 5px： 渲染的宽度 */
    box-shadow: 5px 5px 5px gray ;

3、文本处理

    /* 3、文本处理 */
    .box p {
        /* 字体颜色 */
        color: #666;
        /* 文本缩进 em代表当前标签的字号 */
        text-indent: 2em;
    }
    .box h1 {
        /* 字号 */
        font-size: 50px ;
        /* 字体 和电脑里的字体有关 */
        font-family: '黑体';
        /* 字体粗细 */
        font-weight: normal;
        /* 文字垂直居中 */
        text-align: center;
        /* 文字水平居中 */
        height: 80px;
        line-height: 80px;
        /* 文本阴影 */
        /* 2px:水平方向偏移量 2px：上下偏移量 2px： 晕染的宽度 */
        text-shadow: 2px 2px 2px black;
        /* 文本装饰 */
        text-decoration: dashed underline skyblue;

    }

    .box span {
        /* 颜色 */
        color: orange;
        /* 垂直显示 */
        writing-mode: vertical-lr;
        /* 对字母进行垂直显示设置 */
        text-orientation: upright;

    }

4、位置处理

/* 位置处理 */
.box {
    /* 相对定位 */
    position: relative;
}

.box span {
    /* 绝对定位 */
    position: absolute;
    /* 基于可视区域进行定位 */
    position: fixed;
    /* 顶部 */
    top: 50px;
    /* 左侧 */
    left: 5px;

}

CSS布局技术

1、flex布局

/* flex布局 */
.flex-container {
    /* 宽度 */
    width: 100%;
    /* 最大宽度 */
    max-width: 800px;
    /* 最小宽度 */
    min-width: 500px;
    /* 上下自动适应 */
    margin: 0 auto;
    /* 背景颜色 */
    background-color: red;

    /* 高度 */
    height: 800px;
    /* 容器布局 */
    display: flex;
    /* 垂直方向位置 */
    /* 顶部 */
    align-items: flex-start;
    /* 垂直居中 */
    align-items: center;
    /* 尾部 */
    align-items: flex-end;
    /* 水平方向位置 */
    /* 左侧 */
    justify-content: flex-start;
    /* 中部 */
    justify-content: center;
    /* 右侧 */
    justify-content: flex-end;

}

.flex-item {
    /* 内边距 */
    padding: 10px;
    /* solid线边框 */
    border: 1px solid #ccc;
    /* 圆角 */
    border-radius: 5px;
    /* 背景色 */
    background-color: #f9f9f9;
    /* 最大高度 */
    max-height: 500px;
    /* 最大宽度 */
    max-width: 200;
    /* flex比例 */
    flex: 1;
}
/* 使用nth-child选取flex-item中的第2个 */
.flex-item:nth-child(2) {
    /* 现在比例为1:2:1 */
    flex: 2;
    /* 最小宽度 */
    min-width: 251px;
}

/* 两边固定 中间自适应  */
.flex-item:nth-child(2n+1) {
    /* 这里是最大呈现宽度 */
    width: 200px;
}

2、grid

/* grid 
二维布局
*/
.grid-container {
    /* 容器 */
    display: grid;
    /* 指定宽度 第一列200px 第二列300px 第三列200px */
    grid-template-columns: 200px 300px 200px;
    /* 指定宽度 第一列20% 第二列50% 第三列30% */
    grid-template-columns: 20% 50% 30%;
    /* 比例 使用fr可以实现比例 */
    grid-template-columns: 1fr 1fr 1fr;
    /* 简写 repeat重复*/
    grid-template-columns: repeat(3, 1fr);
    /* 自动填充 */
    grid-template-columns: repeat(auto-fill, 200px);
    /* 两侧固定值 中间自适应 */
    grid-template-columns: 300px auto 200px;
    /* 容器高 */
    height: 600px;
    /* 行操作 */
    grid-template-rows: 1fr 2fr;

}
.gird-item {
    /* 内边距 */
    padding: 10px;
    /* solid线边框 */
    border: 1px solid #ccc;
    /* 圆角 */
    border-radius: 5px;
    /* 背景色 */
    background-color: #f9f9f9;
}

CSS过渡-变换-动画

1、过渡

/* 过渡 */
.transition-box {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* 过渡运动时间 */
    transition: width 1s, height 2s background-color 2s;
    /* 统一运动时间 linear 运动模式*/
    transition: all 1s linear;
    transition: all 1s ease-in;
    transition: all 1s ease-in-out;
    position: absolute;
    left: 0;
}
.transition-box:hover {
    width: 200px;
    height: 200px;
    background-color: tomato;
    left: 200px;
}

2、变换

/* 变换 */
.container {
    width: 200px;
    /* 居中 */
    margin: 0 auto;
    /* 3d显示 */
    transform-style: preserve-3d;
    perspective: 500px;
    position: relative;
    transition: all 1s;
}
.container:hover {
    transform: rotate3d(0, 1, 0, 180deg);
}
.tarnsform-box {
    width: 200px;
    height: 200px;
    background-color: orange;
    transition: all 1s;
    position: absolute;
    left: 100px;
    top: 100px;
    transform-origin: right bottom; /* 旋转中心应该放在这 */
}

/* hover属于交互 */
.tarnsform-box:hover {
    transform: translate(100px, 20px);
    transform: translateX(100px) translateY(20px);

    /* 旋转 */
    transform: rotate(30deg);
    /* 旋转中心 */
    transform-origin: right bottom; /* 旋转中心不应该放在这 */
    /* 缩放 */
    transform: scale(.5, 2);
    /* deg是度 */
    /* skew变形操作 */
    transform:  skew(0, 20deg);
    /* X Y Z轴 */
    transform: translate3d(100px, 100px, 100px);
    /* 3d旋转 */
    /* 沿着xyz轴旋转 deg是角度 */
    transform: rotate3d(0, 0, 0, 180deg);
}

.test-box {
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    position: absolute;
    /* 沿着z轴运动 */
    transform: translateZ(-100px);
}

3、动画

/* 动画
关键帧动画
*/
。.tarnsform-box {
    /* 无限动 */
    animation: changeColor 1s linear infinite;
}

@keyframes changeColor {
    0% {
        background-color: tomato;
    }

    50% {
        background-color: yellow;
    }

    100% {
        background-color: tomato;
    }
}

那么到这里我们的前端三剑客基础就学完了，这边学长建议结合之前的文章写一个小网站巩固一下，下一章我们讲JAVA的基础语法与面向对象编程

相关文章