目录

一、flex布局

1、详细的使用解释

2、简单例子

3、flex布局要认识两个轴

4、版心布局

5、13届蓝桥真题 （1，6）

二、grid布局

1、应用

2、代码例子

三、CSS动画

1、注意区别

2、代码例子

3、13届蓝桥真题 （2）

4、更多transform属性的介绍

四、媒体查询

一、flex布局

1、详细的使用解释，小伙伴们可以看小编的下面这篇文章🧐

HTML基础第六课（冲浪笔记6）_申小兮IU的博客-CSDN博客Flex、方向排列、换行、Flex多轴、order、Flex的放大缩小https://blog.csdn.net/qq_51478745/article/details/125712554

2、这边小编再来个简单例子，推荐一个编写布局小技巧

注意：利用编译器提供的调试工具，直接编辑调整需要的布局，然后直接copy代码

3、flex布局要认识两个轴

（1）主轴：x轴

（2）交叉轴：y轴

4、版心布局

（1）含义：设计师设定的一个区域，比如宽度1260px、1024px，目前主流的设计稿的大小，在针对不同设备，不同屏幕分辨率，进行版心的调整

（2）代码例子

5、13届蓝桥真题 （1，6）

（1）第一题：水果拼盘

/* TODO：待补充代码 */
#pond {display: flex;flex-wrap: wrap;flex-direction: column;
}

 （2）第六题：蓝桥知识网

蓝桥知识网
首页
热门技术
使用手册
知识库
练习题
联系我们
更多
蓝桥云课
随时随地丰富你的技术栈！
加入我们
人工智能
人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
前端开发
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
后端开发
后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
信息安全
ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
© 蓝桥云课 2022
京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号

/*TODO：请补充代码
*/
*{margin: 0;padding: 0;
}
.header{width: 100%;background-color: #a6b1e1;padding-top: 13px;
}
.head{width: 1024px;height: 46px;margin: auto;/* background-color: blanchedalmond; */display: flex;justify-content: space-between;align-items: center;
}
.logo{font-size: 18px;color: white;
}
ul{display: flex;
}
li{font-size: 16px;color: white;margin: auto 16px;list-style: none;
}
.header-content{width: 1024px;height: 427px;margin: auto;padding-top: 30px;box-sizing: border-box;
}
.title{text-align: center;font-size: 45px;color: black;margin-bottom: 62px;
}
.text{font-size: 21px;font-weight: 200;color: white;text-align: center;margin-bottom: 36px;
}
.join{width: 120px;color: #efbfbf;margin: auto;text-align: center;padding: 10px 0px;font-size: 18px;border: 2px solid #efbfbf;border-radius: 2px;box-shadow: inset 0 0 0 2px #efbfbf;
}
.body{width: 100%;
}
.body-content{width: 1024px;height: 302px;margin: auto;/* background-color: #a6b1e1; */margin-top: 74px;display: flex;justify-content: space-between;flex-wrap: wrap;
}
.box{height: 144px;width: calc((1024px - 20px) / 2);
}
.box-title{font-size: 30px;font-weight: 200;color: black;
}
.box-text{font-size: 18px;color: #aaa;line-height: 1.4em;
}
.footer{width: 100%;border-top: 1px solid gray;
}
.foot{width: 1024px;height: 80px;margin: auto;padding-top: 30px;box-sizing: border-box;
}
.foot-text{text-align: center;font-size: 14px;color: #aaa;
}
.foot-text:nth-of-type(2){margin-top: 10px;
}

二、grid布局

1、应用：适用于格子布局，商品列表

2、代码例子

（1）自定义行列数及行列的长度

.grid{width: 500px;height: 500px;background-color: aqua;display: grid;grid-template-columns: 200px 200px 200px;grid-template-rows: 200px 200px 200px;
}

当设置的行列总长大于父级所设置的宽高，会出现溢出 

（2）解决溢出最好的方法就是将所有的行列长度用属性值auto替代，这样就是自动计算每个各自的大小

grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;

（3）通过函数repeat()设置行列

grid-template-columns: repeat(3,1fr);/* 3是列数，1fr是均等分，fr是单位 */
grid-template-rows: repeat(3,1fr);/* 3是行数 */

其效果同（2）

（4）常见的形式：高度由内容撑开，这时候就需要内容与内容间的间距

（5） 内容居中

①法一：父级设置居中

justify-items: center;

更多设置技巧同样可以在调试器上直接设置自己需要的样式，然后直接复制代码

②法二：在子级本身设置居中

justify-self: center;

（6）设置区域模板，快速定位子元素位置

该方法能够特别容易编写出骰子

三、CSS动画

1、注意区别

transform（转换）、transition（过渡）、translate(位移)

2、代码例子

3、13届蓝桥真题 （2）

/*TODO：请补充 CSS 代码*/
#box:hover #item1{transform: rotate(-60deg);
}
#box:hover #item2{transform: rotate(-50deg);
}
#box:hover #item3{transform: rotate(-40deg);
}
#box:hover #item4{transform: rotate(-30deg);
}
#box:hover #item5{transform: rotate(-20deg);
}
#box:hover #item6{transform: rotate(-10deg);
}
#box:hover #item7{transform: rotate(10deg);
}
#box:hover #item8{transform: rotate(20deg);
}
#box:hover #item9{transform: rotate(30deg);
}
#box:hover #item10{transform: rotate(40deg);
}
#box:hover #item11{transform: rotate(50deg);
}
#box:hover #item12{transform: rotate(60deg);
}

4、更多transform属性的介绍

小伙伴们可以参考小编的这篇文章🧐

HTML基础第五课（冲浪笔记5）_color: aqua;_申小兮IU的博客-CSDN博客媒体查询、动画效果、清除浮动、过渡属性、calc函数、透明度、鼠标手势、最大最小宽度、transform属性、https://blog.csdn.net/qq_51478745/article/details/125700227

四、媒体查询

代码例子：