前端路线--H5篇（day04）

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量108 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/123327330
版权

flex-direction弹性盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* display: flex;使用弹性布局
			flex-direction:主轴的方向(设置在父盒子里)
			flex-direction: row;//默认行排列
			row-reverse  //行倒置
			column//按列排列
			column-reverse  //列倒置
			
			//盒子1:2的关系
			flex:1;
			flex:2;
			
		 */
			.box{
				width: 100%;
				height: 200px;
				background-color: aqua;
				display: flex;
				flex-direction: row;
			}
			.b_left{
				flex: 1;
				background-color: blue;
			}
			.b_right{
				flex: 2;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<!-- 移动端布局，任何容器（包括行内）都可以用flex进行布局 -->
		<!-- 使用flex后，子元素的float clear verticle-align失效 -->
		<div class="box">
			<div class="b_left">1</div>
			<div class="b_right">2</div>
		</div>
	</body>
</html>

弹性布局换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 如何换行*/
		/* flex-wrap: nowrap; //默认不换行，平均分空间  不给父级设置高度*/
		/* 			   wrap     		  //默认换行（平均分空间）  */
		/*             wrap-reverse       //第一行在下方           */
		
		/* flex-flow:direction wrap;    	//上两个的简写 */
			.box{
				width:600px;
				display: flex;
				background-color: #FFC0CB;
				flex-wrap: wrap-reverse;		/* 配合使用*/
				flex-direction: row-reverse;    /* 配合使用*/
				
			}
			.box div{
				width: 100px;
				height: 100px;
				font-size: 30px;
				color: white;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
		</div>
	</body>
</html>

主轴和副轴的对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 主轴上的对齐方式:
			justify-content: center; 居中
							flex-start  左对齐
							flex-end    右对齐
							space-between  两端对齐
							space-around   围绕对齐（相当于margin）
		 */
		/* 副轴上的对齐方式:
				  align-items: center; 	居中对齐
							flex-start  上对齐
							flex-end    下对齐
							baseline     从第一行字的基线对齐(以最大字的基线对齐)
							stretch 	 没有高或者高为auto时，会拉伸撑满
		 */
			.box{
				width: 800px;
				height: 600px;
				background-color: aqua;
				display: flex;
				/* justify-content: space-around; */
				align-items: stretch;
			}
			.son1{
				width: 100px;
				/* height: 100px; */
				background-color: #FFC0CB;
			}
			.son2{
				width: 200px;
				/* height: 200px; */
				background-color: #0000FF;
				font-size: 50px;
			}
			.son3{
				width: 300px;
				/* height: 300px; */
				background-color: blueviolet;
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="son1">1</div>
			<div class="son2">2</div>
			<div class="son3">3</div>
		</div>
	</body>
</html>

多根轴线对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*只有一根轴该属性不起作用  */
			/*align-content: flex-start; 		与交叉轴的起点对齐。
 							 flex-end			与交叉轴的终点对齐。
							 center				与交叉轴的中点对齐。
							 space-between;		与交叉轴两端对齐，轴线之间的间隔平均分布。
							 space-around;		每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
							 stretch（默认值）	轴线占满整个交叉轴。
							
			 */
			.box{
				width:1000px;
				height: 800px;
				border: solid 1px orange;
				display: flex;
				flex-wrap: wrap;
				align-content:stretch;
				
				
			}
			.box div{
				width: 200px;
				height: 200px;
				font-size: 30px;
				color: white;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
		</div>
	</body>
</html>

弹性子元素属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width:1000px;
				height: 800px;
				border: solid 1px orange;
				display: flex;
				flex-wrap: wrap;	
			}
			.box div{
				width: 200px;
				height: 200px;
				font-size: 30px;
				color: white;
				background-color: #00FFFF;
			}
			/* 项目的排列顺序
				order:数字;
				数字越大，值越靠后,其余不设置的默认为0
			 
			 
			 */
			.box1{
				order: 5;
			}
			.box5{
				order: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div class="box5">5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
		</div>
	</body>
</html>

放大和缩小比例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width:1000px;
				border: solid 1px orange;
				display: flex;	
			}
			.box div{
				width: 600px;
				height: 200px;
				font-size: 30px;
				color: white;
				background-color: #00FFFF;
			}
			/*  flex-grow: 数字;
				按照比例关系扩容项目
				flex-shrink: 数字;
				按照比例关系缩小项目
			*/
			.box1{
				/* flex-grow: 1; */
				flex-shrink: 2;
			}
			.box5{
				/* flex-grow: 5; */
				flex-shrink:4;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div>2</div>
			<!-- <div>3</div>
			<div>4</div> -->
			<div class="box5">5</div>
			<!-- <div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div> -->
		</div>
	</body>
</html>

项目占据的主轴空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width:1000px;
				border: solid 1px orange;
				display: flex;	
			}
			.box div{
				width: 600px;
				height: 200px;
				font-size: 30px;
				color: white;
				border: solid 1px #FFA500;
			}
			
			.box1{
				flex-basis:800px;
			}
		</style>
	</head>
	<body>
		<!-- 
		flex-basis:数值;
		项目占据主轴的空间，等同于width ,数值方向等同于高度。
		
		简写：
		flex:grow shrink basis;
			auto 		//根据宽度自动扩容和缩小
			none 		//几部扩容也不缩小
			1  			(即 (1,1,0%))
			initial 	(默认 即:(0,1,auto))
		 -->
		<div class="box">
			<div class="box1">1</div>
			<div>2</div>
			<!-- <div>3</div>
			<div>4</div> -->
			<div class="box5">5</div>
			<!-- <div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div> -->
		</div>
	</body>
</html>

不一样的对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width:1000px;
				height: 800px;
				border: solid 1px orange;
				display: flex;	
			}
			.box div{
				width: 600px;
				height: 200px;
				font-size: 30px;
				color: white;
				background-color: #00FFFF;
				border: solid 1px orange;
			}
			.box1{
				/* height: auto !important; */
				align-self: stretch;
				font-size: 30px !important;
			}
		</style>
	</head>
	<body>
		<!-- 
			align-self: auto; //默认继承父元素的align-items 若没有父元素，则等同于stretch
						flex-start
						flex-end
						 center
						baseline
						stretch
						
					align-self属性允许单个项目有与其他项目不一样的对齐方式，
					可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，
					如果没有父元素，则等同于stretch。
					该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
					-->
		<div class="box">
			<div class="box1">1</div>
			<div>2</div>
			<!-- <div>3</div>
			<div>4</div> -->
			<div class="box5">5</div>
			<!-- <div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div> -->
		</div>
	</body>
</html>

媒体查询

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./CSS/one.css" media="(max-width:768px)">
	</head>
	<body>
		<!-- 格式: 
			@media 设备  and (设备特性){
				//CSS
			}
			在外部写完CSS用<link>引入对应的CSS
			<link href='css文件'  media='(max-width:768px)'>
			
			
			- 超小屏幕（手机，小于 768px）：设置宽度为 100%
			- 小屏幕（平板，大于等于 768px）：设置宽度为 750px
			- 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
			- 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 
			
			
		-->
		
		<div class="box">
			我是768px下的box
		</div>
	</body>
</html>

媒体查询CSS

.box{
	width: 500px;
	height: 500px;
	background-color: #8A2BE2;
}
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
12个前端必会 H5 问题及解决方法
qianduan666a的博客
08-14 861
前言 作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟
10.flex------02.弹性容器的样式（除了align-self外关于弹性容器的样式，均是在弹性容器中设置）
weixin_52551539的博客
11-30 164
1、flex-wrap：设置元素在容器中是否会自动换行。 可选值：wrap----元素在容器中沿着辅线自动换行 nowrap----元素不会自动换行（默认值） wrap-reverse-------元素沿着辅线反方向自动换行 2、justify-content：设置主轴中空白空间的分配（即设置元素在主轴中如...
23-lao-弹性盒子布局介绍与主轴的方向设置
huantingyizhan的博客
07-15 869
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrap{ width: 960px; border: 1...
FlexBox布局初识 - 主轴和侧轴
08-09 8501
CSS布局有“盒子模型”，依赖 display属性 ， position属性， float属性。但对于那些特殊布局非常不方便，比如，垂直居中。一种全新的针对web和移动开发布局应运而生：Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。FlexBox布局大部分情况下是处理图中FlexItem在FlexContainer
html的几种布局
weixin_44953124的博客
07-04 1935
优点： 　　　　　1 适应性强，在做不同屏幕分辨率的界面时非常实用 　　　　　2 可以随意按照宽度、比例划分元素的宽高 　　　　　3 可以轻松改变元素的显示顺序 　　　　 4 弹性布局实现快捷，易维护 　　display:box;将一个元素的子元素以弹性布局进行布局 　　box-orient:horizontal || vertical || inherit 子元素排列方式 　　box-direction:normal || reverse || inherit 子元素的排列顺序
HTML弹性布局基础讲解(二)
liuzhe的博客
07-30 360
弹性布局样式属性 2.项目换行 属性 值 注释 flex-wrap nowrap 默认值，主轴方向不够也不换行 wrap 主轴方向空间不够时，自动换行 wrap-reverse 交叉轴终点对齐，主轴方向空间不够时，反方向换行 3.主轴方向和换行可以缩写 flex-flow:direction wrap; //先写主轴方向，再写如何换行 4.定义项目在主轴上的对齐方式 属性 值 注释 justify-content flex-start 默认值，主轴起点对齐
day032-前端三剑客-H5快速入门+VScode.zip
09-05
【标题】"前端三剑客-H5快速入门+VScode" 涵盖了现代Web开发中的基础元素：HTML、CSS和JavaScript，以及强大的代码编辑器Visual Studio Code（VScode）。这一系列教程旨在帮助初学者迅速掌握网页开发的核心技能。 ...
h5简单计算器
03-21
标题 "h5简单计算器" 暗示我们讨论的是一个基于HTML5技术构建的轻...通过学习和实践这个“h5简单计算器”，开发者可以深入了解HTML5、CSS3和JavaScript的基础应用，同时也能锻炼到前端开发中的交互设计和问题解决能力。
学子影城项目DAY04（微信小程序）
07-18
【学子影城项目DAY04（微信小程序）】是一个关于微信小程序开发的实践教程，主要聚焦于实现“城市信息”这一功能模块。在微信小程序中，开发者可以利用其丰富的API和组件来创建交互性强、用户体验良好的轻量级应用。...
陶国荣H5培训课件
03-15
陶国荣老师的课件中，"day1.pptx"和"day2.pptx"可能分别涵盖了H5基础和进阶内容，以及AngularJS的基本概念和实战应用。通过这两个部分的学习，学员将能够理解并运用H5和AngularJS构建高效、动态的Web应用。同时，...
h5简单淘宝轮播图
03-21
总之，“h5简单淘宝轮播图”是一个实用的H5实践案例，它涵盖了前端开发中的DOM操作、CSS动画、事件处理等多个重要知识点。通过对这个项目的理解与实践，开发者可以提升在网页交互设计方面的技能，更好地满足用户对于...
HTML基础第六课（冲浪笔记6）
申小兮和林小兮的博客宝
07-11 402
Flex、方向排列、换行、Flex多轴、order、Flex的放大缩小
31.2弹性容器上的样式_主轴——H5C3
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
08-11 94
<!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> *{ mar
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 641
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1353
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 887
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 257
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 212
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 354
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
uni-app前端H5页面底部内容被tabbar文字不显示
07-28
对于uni-app前端H5页面底部内容被tabbar文字不显示的问题，通常有以下几种可能的原因和解决方法： 1. 样式冲突：请检查你的底部内容和tabbar的样式是否有冲突。可以尝试修改底部内容的z-index属性值，确保其处于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值