前端路线--H5篇（day04）
2024-04-04 01:04:03
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 若没有父元素，则等同于stretchflex-startflex-endcenterbaselinestretchalign-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;
}
前端路线--H5篇（day04）相关推荐
- 前端路线--H5篇 获取路径
console.log(window.location.origin);//页面的来源console.log(window.location.hostname);//获取主机名console.log( ...
- 前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
- ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇（二）JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 前端工具--less篇
前端工具–less篇 less 中文网http://www.bootcss.com/p/lesscss/ 常见错误及解决: sublime text 3 安装less2css保存less出现错误 未安 ...
- 科大迅飞语音听写（流式版）WebAPI，Web前端、H5调用 语音识别，语音搜索，语音听写
前言 由于公司有个Web项目需要用到语音搜索功能,找了一些第三方库都不太理想,要么语音识别速度很慢,要么不能精确识别等等,最后选择了迅飞语音(迅飞语音听写(流式版)WebAPI).迅飞语音相对来说做得 ...
- 前端MUI+H5+HBuilderX开发APP（IOS，android），后台Springboot,java学习与实践文章，更新中（二）
前端MUI+H5+HBuilderX开发APP(IOS,android),后台Springboot,项目搭建,图标设置等,更新中(二) 新建我的第一个APP manifest.json: 图标设置: ...
- web前端研发工具篇
web前端研发工具篇 一.常见前端开发IDE 1.Visual Studio Code 2.hbuilder 3.sublime text3 4.WebStorm 5.Atom 6.Dreamweav ...
- 前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册 前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
最新文章
- Vim 相关插件整理
- Android Studio 1.01 + BlueStacks 开发调
- 洛谷 P2888 [USACO07NOV]牛栏Cow Hurdles
- 均分纸牌pascal程序
- input type=file 实现上传、预览、删除等功能
- 前端学习（2164）：runtimeonly和runtimecompiler
- 记录一下2019年-2020年期间的学习、工作经历
- epoll模型与select模型的区别(宿管大妈的例子)
- C#中对 API函数的调用
- 百度，在模仿和创新中成长
- version GLIBC_2.28 not found
- c语言课程设计报告万年历,c语言课程设计报告-万年历系统.doc
- 埃特巴什码(Atbash Cipher)
- java开源项目jeecgboot全解析
- 免费做流程图软件推荐ProcessOn
- TweenMax特效
- 如何解决织梦后台上传一篇文章前端展示两篇完全一样的
- UDIMM、RDIMM和LRDIMM
- 【python ++ opencv + pytorch 】车牌提取、分割、识别
- iOS UITextView问题一网打尽（占位文字、汉字输入字数计算、自动高度改变）