Day 9心得（*）

最新推荐文章于 2025-12-23 21:31:13 发布

原创最新推荐文章于 2025-12-23 21:31:13 发布 · 1.4k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

flex布局

开启盒子要在父元素上

主轴的对齐方式： justify-content：；

justify-content：flex-start；从起点开始依次排列（默认的）

justify-content：flex-end；从终点开始依次排列

justify-content：center；在主轴的中间开始依次排列

justify-content：space-between；把空白间距平均分配在弹性盒子之间

justify-content：space-around；把剩余空间均分在每一个弹性盒子的两侧

justify-content：space-evenly；弹性盒子之间，以及弹性盒子与容器之间的间距相等

侧轴对齐方式： align-items：；

限制：只有在弹性盒子只有一行时进行使用，并且对容器内所有的弹性盒子设置侧轴对齐方式

align-items：stretch；把弹性盒子沿着侧轴线拉伸至容器填满

align-items：center；沿着侧轴居中

align-items：flex-start；从上开始依次排列

align-items：flex-end；从下开始依次排列

align-self：；单独控制某一个弹性盒子的侧轴对齐方式

例如：.box：nth-child（3）{align-self：center；}

把第三个.box设置为沿着侧轴居中

修改主轴方向： flex-direction：；

flex-direction：row；从左往右（默认的）

flex-direction：row-reverse；从右往左

flex-direction：colum；将水平方向该为垂直方向，从上往下（主轴和侧轴方向调换）

flex-direction：colum-reverse；从下往上

控制弹性盒子主轴方向的尺寸： flex：；

flex：1；表示占用父级元素剩余空间的一份，

当只有一个flex：；时，表示占用全部剩余空间

例如： .box：nth-child（3）{flex：1；}

.box：nth-child（4）{flex：1；}

表示第三个和第四个盒子按1：1的比例占用了剩余空间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.outer{
			/* 开启弹性盒子 */
			display: flex;
			width: 800px;
			height: 400px;
			background-color: pink;
		}
		.box{
			
			width: 100px; 
			height: 100px;
			background-color: green;
			margin-right: 10px;
		}
		/* .box:nth-child(3){ */
			/* background-color: pink; */
			/* align-self  单独控制某一个弹性盒子的侧轴对齐方式的*/

			/* align-self: center; */
		/* } */
		.box:nth-child(1){
			flex: 1;
		}
		.box:nth-child(2){
			flex: 2;
		}

		.box:nth-child(3){
			/* 控制弹性盒子主轴方向的尺寸的 
			占用父级元素剩余空间的份数
			
			*/
			flex: 1;
		}

		.box:nth-child(4){
			flex:1;
		}


	</style>
</head>
<body>
	<!-- 
	flex布局：弹性盒子布局    默认弹性盒子内部的子元素会被放在一行  并且不会像浮动一样脱标
	主轴:默认的方向是从左往右的水平方向
	交叉轴：默认的方向是从上往下的垂直方向
	-->


	<div class="outer">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">4</div>
	</div>
</body>
</html>

弹性盒子的换行：

写法：flex-wrap：；

flex-wrap：nowrap；默认的格式，表示不换行

flex-wrap：wrap；表示换行

多行的侧轴弹性盒子对齐方式： align-content：；

align-content：；和ju

stify-content：；的取值是一样的


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.outer{
			display: flex;
			/* 弹性盒子的换行 */
			flex-wrap: wrap;
			justify-content: space-between;
			/* 多行的测轴弹性盒子对齐方式 */
			align-content: space-between;
			width: 500px;
			height: 300px;
			background-color: pink;
		}
		.box{
			width: 120px;
			height: 130px;
			background-color: green;
			/* margin-right: 10px; */
		}

		.box:nth-child(4n){
			margin-right: 0;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="box">第1个盒子</div>
		<div class="box">第2个盒子</div>
		<div class="box">第3个盒子</div>
		<div class="box">第4个盒子</div>
		<div class="box">第5个盒子</div>
		<div class="box">第6个盒子</div>
		<div class="box">第7个盒子</div>
		<div class="box">第8个盒子</div>
	</div>
</body>
</html>

grid布局：

想要绘制m行n列的网格，需要使用m+1条横向，n+1条纵向的网格线组成

触发grid布局：div{

display：grid；

grid-template-rows：；

grid-template-columns：；

}

划分行：grid-template-rows：；参数有几个表示有几行

例如： grid-template-rows：100px 200px 300px；

表示划分了三行，第一行100px，第二行200px，第三行300px

划分列：grid-template-columns：；参数有几个表示有几列

例如：grid-template-columns：100px 200px 300px；

表示划分了三列，第一列100px，第二列200px，第三列300px

通过百分比取值（占父元素的百分比）：

例如： grid-template-rows：10% 20% 30%；

表示划分了三行，第一行占父元素的10%，第二行占父元素的20%，第三行占父元素的30%

grid-template-columns：10% 20% 30%；

表示划分了三列，第一列占父元素的10%，第二列占父元素的20%，第三列占父元素的30%

repeat函数： repeat（num1 ，num2）

num1表示重复的次数，num2表示重复的数值

例如：grid-template-columns：repeat（3，100px）；

表示重复三次，每次占用100px

grid-template-columns：repeat（2，100px） 300px；

表示前两列是100px，第三列是300px

自动填充：写在repeat函数中，若取值是auto-fill：那么会根据填充的数值进行自动填充

auto-fill：根据需要重复的数值，进行自动填充重复的数量

例如：盒子的宽为500px

若写grid-template-columns：repeat（auto-fill，150px）；

则会生成3列，每行150px

auto：表示单独的取值，占用剩余宽度或者高度的全部

例如：盒子的宽为500px

若写grid-template-columns：repeat（100px 100px auto）；

则会生产三列，前两列100px，第三列300px

若写grid-template-columns：repeat（auto 100px 100px）；

则会生产三列，第一列300px，后两列100px

fr：方便展示比例关系的

例如grid-template-columns：1fr 2fr 3fr；

表示比例为1：2：3

网格之间的间距调整：

写法：row-gap：；行间距，单位是px

column-gap：；列间距，单位是px

row-gap：；和column-gap：；要写在grid-template-rows：；和grid-template-columns：；下方

例如div{

display：grid；

grid-template-rows：；

grid-template-columns：；

row-gap：；

column-gap：；

}

复合写法：gap：；

例如：gap：10px 20px；

表示行与行间距10px，列与列间距20px

容器中项目的显示顺序：

写法： grid-auto-flow：；

grid-auto-flow：row；默认的，表示横向

grid-auto-flow：column；表示纵向

项目在网格中的对齐方式：

justify-items：center；表示项目相对于网格水平居中

align-items：center；表示项目相对于网格垂直居中

网格对于容器的对齐方式：

justify-content：center；表示网格对于容器水平居中

align-content：center；表示网格对于容器垂直居中

单元格的合并：

grid-row：；表示行的网格线

grid-column：；表示列的网格线

例如：grid-row：2/5；表示行的网格线从2到5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			/* 触发grid布局 */
			display: grid;
			/* 划分行 */
			/* 取值方式1 */
			/* grid-template-rows: 100px 200px 200px; */
			/* grid-template-columns: 100px 100px 100px; */
			/* 百分比取值：占用父元素的百分比 */
			/* grid-template-rows: 10% 30% 40% 10%;
			grid-template-columns: 100px 100px 100px; */
			/* 第三种方式repeat(num1,num2) num1表示重复的次数 num2重复的数值 */
			/* grid-template-rows: repeat(3,100px);
			grid-template-columns: repeat(2,100px) 300px; */

			/* 第四种：自动填充
			repeat函数中，auto-fill：根据需要重复的数值，进行自动填充重复的数量
			
			*/
			/* grid-template-rows: repeat(auto-fill,100px); */
 
			/* grid-template-columns: 100px 100px 100px ; */
			/* auto：单独的取值，占用剩余宽度或者高度的全部 */
			/* grid-template-rows: 100px 100px auto;
			grid-template-columns: auto 100px 100px; */
			/* fr  ：方便展示比例关系的  1fr 2fr */
			/* 网格之间的间距调整 */
		
			grid-template-rows: 1fr 2fr 1fr;
			grid-template-columns: 100px 100px 100px ;
			/* grid-row-gap: 20px;
			grid-column-gap:20px; */
			/* row-gap: ;
			column-gap: ; */
			/* gap: 30px 10px; */

			/* 容器中项目的显示顺序 */
			/* grid-auto-flow: column; */


			/* 项目在网格中的对齐方式 */
			justify-items: center;
			align-items: center;


			/* 网格对于容器的对齐方式 */
			justify-content: space-between;
			align-content: space-between;


			width: 500px;
			height: 500px;
			border: 1px solid black;

		}
		.son{
			/* width: 100px;
			height: 100px; */
			border: 1px solid rgb(0, 0, 0);
		}
		.son1{
			grid-row: 2/3;
			grid-column: 1/3;
		}
	</style>
</head>
<body>
	
	<div class="box">
		<div class="son son1">第1个</div>
		<div class="son">第2个</div>
		<div class="son">第3个</div>
		<div class="son">第4个</div>
		<div class="son">第5个</div>
		<div class="son">第6个</div>
		<div class="son">第7个</div>
		<div class="son">第8个</div>
	</div>
</body>
</html>

JS的引入方式

内部形式：

js代码

alert("你好，javascript")

</script>

外部js文件的引入：

alert("123") 一个script标签如果已经通过src引入ljs文件，那么其中间的代码就失效

</script>

注释符和结束符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

	<script>
		// js中的单行注释
		/*
		我是
		多行
		注释
		
		*/

		// 结束符  ;
		alert("12345")
		alert("123232")
			</script>
	
</body>
</html>

输入输出

输出：

1、警示框

alert("这是一个警示框")

2、控制台打印

console.log("这是一个控制台打印的语句")

3、可以识别标签，在浏览器的可视区进行打印

document.write("<h1>我是标题标签</h1>")

输入框：

prompt("请输入您的姓名：")

变量

变量：在程序运行时，可以发生改变的量容器，使得计算机变得有记忆了，通俗的理解为：

prompt("请输入用户名：")

prompt("请输入密码：")

变量的声明方式 let 变量名称

let username =

变量的赋值 =：赋值

username=prompt("请输入用户名：")

console.log(num1)

声明的同时直接赋值

let num1 = 12

num1=100

同时声明多个变量

let num2=1,num3=2

let声明的变量不能重复声明

let声明的变量，在生命之前，不能够进行访问，否则会报错

console.log(num2)

var 变量名 = 变量值

console.log(uname）

var uname="zhangsan"

var uname="lisi"

console.log(uname)

var：没有作用域的概念，后期推荐用let

let a

let b

变量的命名规范：

1、只能有字母数字下划线、$ 并且数字不能作为开头

2、使用有寓意的名称

3、字母严格区分大小写

4、不能使用js的关键字和保留字

</script>

常量

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>


	<script>

		// prompt("")
		// 常量：程序运行时，不能发生变化的量  const 常量名 = 值   常量名一般是纯大写的
		// const PI = 3.14
		// PI = 2.323
		// console.log(PI)
		// 用户输入用户名
		// 用户输入密码
		// 控制台分别打印用户名和密码


		let uname=prompt("username：")
		let pwd = prompt("password:")
		console.log("用户的用户名是:"+uname)

	</script>
	
</body>
</html>