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属性.它对于那些特殊布局非常不方便 ...
随机推荐
- uniapp-scroll-view纵向(竖向)滑动当scrollTop为0时卡顿问题
这个问题目前遇到的人少,所以找到答案不容易,我也是各种细节亲测才发现的解决方案.记录下来 当uniapp用scroll-view竖向滚动时,在scrollTop为0时,下拉会卡顿. 解决方法(只需要在 ...
- Django-----cookie&session
cookie 保存在用户浏览器端的一个键值对(别人给的凭证) 服务端可以向用户浏览器写cookie 客户端每次发请求会携带cookie去(放在请求头里面) 淘宝的cookie 京东的cookie(h ...
- 基于Docker&Kubernetes构建PaaS平台基础知识梳理
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 基于Docker&Kubernetes构建Paa ...
- 【LINT】cpplint修改版：自定义编码风格检查工具lint
github:https://github.com/skullboyer/code-check Code Check 本仓介绍的内容涉及代码静态检查和编码风格检查 但主要放在编码风格检查,lint是基 ...
- 【总结】2022GDOI普及组 没得游记
因为是线上,所以没得游记 Day -3 学校安排去7班上课,好耶! 上午全是主科,有一节生物 被你七班捧上天了 被你七班造谣说我暴踩Everyone,还传到九班,给我玩阴的是吧 下午模拟赛,初一第一 ...
- 【多线程】线程休眠 Thread.sleep()
线程休眠 Thread.sleep() sleep (时间) 指定当前线程阻塞的毫秒数: sleep存在异常InterruptedException: sleep时间达到后线程进入就绪状态: slee ...
- 665. Non-decreasing Array - LeetCode
Question 665. Non-decreasing Array Solution 题目大意: 思路:当前判断2的时候可以将当前元素2变为4,也可以将上一个元素4变为2,再判断两变化后是否满足要求 ...
- 个人冲刺（四阶段）——体温上报app（一阶段）
任务:完成了后台数据库的类模块 MyDBHelper.java package com.example.helloworld; import android.content.Context; impo ...
- 史上最全Spring Cloud Alibaba--Nacos教程（涵盖负载均衡、配置管理、多环境切换、配置共享/刷新、灰度、集群）
能够实现Nacos安装 基于Nacos能实现应用负载均衡 能基于Nacos实现配置管理 配置管理 负载均衡 多环境切换 配置共享 配置刷新 灰度发布 掌握Nacos集群部署 1 Nacos安装 Nac ...
- Jmeter跨线程组获取token(彻底解决因格式token报错)
将token设置为全局变量网上方式方法千千万,但是你就是获取token会失败,不是提示格式错误,就是提示无法获取token,没安装Jmeter的可以查看前两期教程,有详细介绍 在工作当中如果仅仅是一个 ...