day10
目录
前言
第10天学习开始
一、复习
- 高级选择器
属性选择器 结构性伪类选择器(常用) 目标伪类选择器- flex布局
display: flex; 弹性盒子布局 flex-direction 行模式还是列模式,主轴方向 flex-wrap 项目是否换行 justify-content 主轴对齐 align-items 交叉轴对齐 项目属性 order 项目的排序
二、flex弹性布局
1.项目属性值放大属性
在容器的主轴尺寸大于项目主轴方向尺寸之和的时候,项目不放大。也叫放大比例,也叫增长规则。
- 默认flex-grow: 0;不放大
- 放大比例,负值无效,整数
- 一般情况下想要让页面中一个元素可以放大写1
2.项目属性之缩小比例
项目默认在容器主轴尺寸小于,项目主轴尺寸之和的时候,每个项目默认等比例缩小。
- flex-shrink: 1;默认值
- 可以为负值,值越大缩小的比例越大
不缩小值为 0
3.高频面试题
- 如果你想要三个元素横向排列,最左最右不放大也不缩小,中间随着页面宽度放大缩小使用什么方法?
圣杯布局怎么写? 双飞翼布局怎么写? 左右两侧宽度固定,中间宽度不固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.rongqi{
background-color: yellow;
display: flex;
}
.item{
width: 200px;
height: 100px;
font-style: 50px;
color: #fff;
background-color: red;
border: 3px solid black;
}
/* .item:nth-child(2){
background-color: aqua;
/* 项目放大比例 */
/* flex-grow: 1; */
/* } */
/* .item:nth-child(3){
background-color: aqua;
flex-grow: 1;
} */
/* .item:nth-child(1){
background-color: green;
flex-shrink: 3;
} */
.item:nth-child(1){
flex-grow: 0;
flex-shrink: 0;
}
.item:nth-child(3){
flex-grow: 0;
flex-shrink: 0;
}
.item:nth-child(2){
flex-grow: 1;
flex-shrink: 1;
flex-basis:300px ;
}
</style>
</head>
<body>
<div class="rongqi">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<!-- <div class="item">4</div>
<div class="item">5</div> -->
</div>
</body>
</html>
4. 项目的主轴尺寸设定
- 行模式以项目宽度为重要依据,放大缩小
列模式以项目高度为重要依据,放大缩小 如果不确定行模式或者是列模式,重要依据就无法确定是宽度还是高度 flex-basis 项目的属性,指的是项目的主轴尺寸重新设置,优先级高于项目的宽度或高度
5.简写方式
flex:放大比例 缩小比例 主轴尺寸重置
flex:1 可放大
flex:0 1 auto 默认值 flex:0 0; 不放大不缩小
三、CSS3动态效果
1.过渡
通过两种不同的状态切换(伪类)的过渡,一个样式过渡到另一个样式,需要至少两个关键内容:
过渡的样式(伪类的样式中) 过渡的时间语法:
- transition:all 1s 0s ease;
- 只有过渡时间和延迟时间有前后顺序
- all可以省略,代表所有过渡样式
- ease可以省略,常用值匀速linear
过渡属性 :
- transition:过渡时间
- transition:过渡时间 延迟时间 过渡样式 过渡方式;
- transition-property: all;需要过渡的样式,默认all
- transition-duration: 0s;过渡所用的时间默认0s
- transition-delay: 0s;过渡的延迟时间,默认0s,必须写在过渡时间的后面
- transition-timing-function: ease;过渡的方式。默认ease,常用值linear匀速
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 150px;
height: 50px;
background-color: #222;
/* 过渡属性 */
transition: all 1s 0s ease;
}
.d1:hover{
background-color: red;
width: 300px;
}
.d2{
width: 100px;
height: 100px;
background-color: rosybrown;
transition: 1s;
}
.d2:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
2.变换属性
变换是 css3 的新内容,存在一定的兼容问题。变换的四个函数值:
- 位移函数
旋转函数 缩放函数 扭曲函数
2.1特点
- 使用变换属性不影响布局,不影响其他兄弟元素,或者父级元素的排版
- 当因为元素变换发生元素错位,会出现堆叠,但不脱离文档流,原来的位置还存在
- 在变换属性中使用的函数,都是参照元素的中心点而变化的,却不是左上角0,0点
2.2位移函数
- transform: translate(x轴位移,y轴位移);
- transform: translateX(尺寸) x轴单独设定
- transform:translateY(尺寸) y轴单独设定
- 正值和负值都可以使用,没有位置使用0不用加单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.d1{
background-color: red;
margin: 30px;
}
.d2{
background-color: green;
position: absolute;
top: 50px;
left: 20px;
}
.d3{
background-color: yellow;
/* 变换属性之位移函数 */
transform: translate(20px,30px);
}
.show{
width: 240px;
height: 240px;
background-image: url(../day09/img/btn1.jpg);
border: 1px solid black;
overflow: hidden;
}
.mark{
width: 240px;
height: 240px;
background-color: rgba(0,0,0,0.5);
}
.show:hover .mark{
transition: 2s;
transform: translate(0px, 240px);
}
.d4{
background-color: orange;
transform: translateX(50px);
transform: translateY(-50px);
transform: translateZ(20px);
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="show">
<div class="mark"></div>
</div>
</body>
</html>
2.3旋转函数
- transform: rotate(-50deg); 角度值,0deg-360deg,可以写负值
- 正值顺时针旋转元素,负值是逆时针旋转元素
- transform: rotateX(-50deg); 沿着x轴进行转转,正值向后仰,负值向前趴
- transform: rotateY(40deg); 沿着y轴进行旋转,正值向自己的左侧旋转,负值想自己的右侧旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: 100px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
font-style: 50px;
color: white;
margin: 50px auto;
}
.d1{
transform:rotate(-50deg) ;
}
.d2{
transform: rotateX(-50deg);
}
.d3{
transform: rotateY(-50deg);
}
</style>
</head>
<body>
<div class="d1">好</div>
<div class="d2">好</div>
<div class="d3">好</div>
</body>
</html>
2.4缩放函数
- transform: scaleX(0.5); x轴方向的缩放
- transform: scaleY(1.5);y轴方向的缩放
- 函数的参数,默认1。大于1就是放大.小于1,大于0是缩小比例
- transform: scale(x轴的倍数,y轴的倍数);如果写一个值,则代表x轴和y轴使用相同的倍数
- transform: scale(0); 0值代表元素缩小到没有,也起到了消失的所用
使用负值代表镜像翻转 transform: scaleY(-1.5);1.5 还是放大或缩小倍数,负号则代表翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
font-size: 50px;
color: #fff;
}
.d1 {
transform: scaleX(0.5);
transform: scaleY(1.5);
}
.d2 {
transform: scale(1.5,1);
}
.d3 {
transform: scale(0);
}
.d4 {
transform: scaleX(-1);
transform: scaleY(-1.5);
transform: scale(-1);
}
</style>
</head>
<body>
<div class="d1">好</div>
<div class="d2">好</div>
<div class="d3">好</div>
<div class="d4">好</div>
</body>
</html>
2.5扭曲函数【非重点】
- transform: skew(x轴扭曲角度,y轴扭曲角度);
transform: skewX()x 轴扭曲角度 transform: skewY()y 轴扭曲角度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 100px auto;
}
.d1 {
transform: skew(0deg,-20deg);
}
.d2 {
transform: skew(60deg);
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
总结
第10天学习结束