HTML\Flex tips
相关文档
HTML：https://www.w3school.com.cn/html/index.asp
bootstrap-css: https://v3.bootcss.com/css/#forms
HTML总体介绍
<!DOCTYPE html>
<html>
<head>
<!-- 编码 -->
<meta charset="UTF-8">
<!-- 引入相关的css和js-->
<link href="" rel="stylesheet">
<script src="" ></script>
<!-- 标题 -->
<title>Tile</title>
</head>
<!-- 页面主体 -->
<body>
<!-- 利用div将功能分区 -->
<div>
</div>
</body>
<script>
// 可将特有的js写在这，但一般在另一个文件，在head中引用
</script>
<style>
/* 页面样式、和js相同 */
</style>
</html>
一些技巧
- 在将页面分区的时候可以通过设置
borderbackground属性来确认大小 - width和height可以用百分之多少去规范大小
常用布局: Flex布局
flex 布局又称之为 弹性布局,使用了 display: flex 属性的标签，我们称之为 容器，它的所有子元素自动成为容器成员，我们称之为 项目 。
示例代码如下:
<nav class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</nav>
<style>
.box{
display: flex;
width: 500px;
height: 300px;
border: 1px solid #ccc;
}
div{
width: 50px;
height: 50px;
border: 1px solid red;
}
</style>
结果如下:
容器常用属性
flex-direction // 控制主轴方向
justify-content // 设置主轴方向对齐方式
align-items // 控制侧轴方向对齐方式
align-content // 当侧轴内容多行时，设置侧轴对齐方式
flex-wrap // 控制项目是否允许换行
flex-flow // 是flex-direction 和 flex-wrap 的简写
HTML\Flex tips的更多相关文章
- 第2章 微信小程序的基础组件学习
小程序也可以用div+css进行排版. flex-direction排列方向,可以控制内部的成员的顺序,比如从左到右.从右到左.上下,纵向和横向. flex-wrap可以控制换行是如何去换行的,控制它 ...
- Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子
原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...
- Flex移动应用程序开发的技巧和窍门(五)
范例文件 flex-mobile-development-tips-tricks-pt5.zip This is Part 5 of a multipart series of articles th ...
- Tips and Examples Using FNDLOAD (DOC ID 735338.1)
In this Document Goal Solution Some Tips About FNDLOAD Some sample examples Diagnostics & Utilit ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
- display:box和display:flex属性介绍
1.display:box 父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines box-orient:用来确定父容器里面 ...
- OpenCASCADE Expression Interpreter by Flex & Bison
OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...
- Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips （转）
忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...
- Flex 布局教程：语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
随机推荐
- java第十二周作业
1.定义一个点类Point, 包含2个成员变量x.y分别表示x和y坐标,2个构造器Point()和Point( intx0,y0),以及一个movePoint (int dx,intdy)方法实现点的 ...
- VMware虚拟机无法安装Win11解决方法 （暂时全网最全方案）
目录 1.现象 1.蓝屏重启 2.如下图示,无法启动 2.解决方案 2.1 Hyper-V方案 2.2 禁用 Device Guard(系统:win11) 2.3 升级虚拟机VMware pro的版本 ...
- Redis 内存满了怎么办？这样设置才正确！
上回在<Redis 数据过期了会被立马删除么?>说到如果过期的数据太多,定时删除无法删除完全(每次删除完过期的 key 还是超过 25%),同时这些 key 再也不会被客户端请求,就无法走 ...
- XCTF练习题---MISC---wireshark1
XCTF练习题---MISC---wireshark1 flag:flag{ffb7567a1d4f4abdffdb54e022f8facd} 解题步骤: 1.观察题目,下载附件 2.得到一个wire ...
- XCTF练习题---MISC---坚持60S
XCTF练习题---MISC---坚持60S flag:flag{DajiDali_JinwanChiji} 解题步骤: 1.观察题目,下载附件,是一个java文件 2.打开玩了一会,真鸡儿难,试着反 ...
- IDEA新建项目时的默认配置与模版配置
今天一大早,群里(点击加群)有小伙伴问了这样的一个问题: 在我们使用IDEA开发项目的时候,通常都会有很多配置项需要去设置,比如对于Java项目来说,一般就包含:JDK配置.Maven配置等.那么如果 ...
- UniApp文件上传（SpringBoot+Minio）
UniApp文件上传(SpringBoot+Minio) 一.Uni文件上传 (1).文件上传的问题 UniApp文件上传文档 uni.uploadFile({ url: 'https://www.e ...
- 卧槽！华为《Linux中文手册》火了，完整版 PDF 开放下载！
这是华为工程师基于最新的Linux编写,循序渐进地对Linux进行讲解.对于零基础可以作为Linux的快速入门教材.我希望能为大家提供切实的帮助. 资料介绍 涵盖基础.系统管理.应用.开发.服务器配置 ...
- dubbo发送过程编码失败，会唤醒发送线程吗？
dubbo发送过程编码失败,会唤醒发送(客户端业务)线程吗?如何实现的? 在上篇文章 dubbo坑- No provider available for the service xxx 中,如果dub ...
- linux下虚拟环境venv的创建与使用以及virtualenvwrapper
1.linux安装学习python虚拟环境 linux提供的虚拟环境工具 有virtualenv pipenv 2.我们需求是在linux上可以运行 一个django2 运行一个django1 3.安 ...