9.CSS2
1. CSS3:
- border-raduis : 边线弧度
<style>
.a1 {
width: 200px;
height: 200px;
border-radius: 100px;
opacity: 0.5;
}
.a1:hover {
transform: scale(1.2);
transition: all 2s;
/* opacity: 1; */
}
</style>
</head>
<body>
<div style="width: 200px; height: 200px;overflow: hidden;">
<img src="/Snipaste_2021-04-27_09-24-30.png" class="a1" />
</div>
2. 伸缩盒子：box flex;
- 伸缩问题， 块的轴布局
- 父标签要display:flex
- flex-direction:轴：横轴row 纵轴column
- justify-content; 位置; 开始start 中间center 结束end 空格环绕space-around 空格间隔space-between
- algin-items: 另一个轴的位置
- 子标签可伸缩：
- flex-grow: 放大比
- flex-shrink: 缩小不动 0代表不懂
场景：块的垂直居中
<style>
.a1 {
margin: 0 auto;
display: flex;
/* 轴的方向： row/cloumn */
flex-direction: column;
/* 居中，start center end space-between */
/* justify-content: left; */
/* 另一个轴居中 flex-start center flex-end */
/* align-items: flex-end; */
/* width: 900px; */
height: 600px;
border: 1px solid black;
}
.a1 > .a2 {
width: 200px;
height: 100px;
}
.a2:nth-child(1) {
/* min-width: 500px; */
/* flex-shrink: 0; */
flex-grow: 5;
flex-shrink: 1;
background-color: red;
}
.a2:nth-child(2) {
flex-grow: 1;
flex-shrink: 0;
background-color: green;
}
.a2:nth-child(3) {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
}
</style>
<div class="a1">
<div class="a2"></div>
<div class="a2"></div>
<div class="a2"></div>
</div>
3. 盒子模型：
margin/border/padding
4. 怪异盒子模型：box-sizing:border-box;
5. outerline: 外轮廓。边框外的边框
6. 媒体检测：@media 响应式原理
<style>
/* 媒体监测 */
@media all and (max-width: 768px) {
div {
border: 1px solid black;width:100px;height:100px;outline: 10px solid green;margin: 101px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px){
div {
border: 1px solid black;width:100px;height:100px;outline: 10px solid purple;margin: 101px;
}
}
@media screen and (min-width: 1024px) {
div {
border: 1px solid black;width:100px;height:100px;outline: 10px solid red;margin: 101px;
}
}
</style>
</head>
