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

前面我们已经讲了前端三剑客中的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的基础语法与面向对象编程