Web前端105天-day10-CSS

smile陌辰

已于 2022-11-16 19:38:14 修改

阅读量127

点赞数

分类专栏： CSS 文章标签： css 前端 html

于 2022-11-12 18:30:00 首次发布

本文链接：https://blog.csdn.net/qq_52810836/article/details/127818067

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>