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属性.它对于那些特殊布局非常不方便 ...
随机推荐
- 2021.07.17 题解 CF1385E Directing Edges（拓扑排序）
2021.07.17 题解 CF1385E Directing Edges(拓扑排序) CF1385E Directing Edges - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) ...
- go语言编译过程概述
go语言编译过程概述 总结自<go语言设计与实现> 名词解释: 中间代码 中间代码是编译器或者虚拟机使用的语言,它可以来帮助我们分析计算机程序.在编译过程中,编译器会在将源代码转换到机器码 ...
- 深度优先搜索 DFS 学习笔记
深度优先搜索 学习笔记 引入 深度优先搜索 DFS 是图论中最基础,最重要的算法之一.DFS 是一种盲目搜寻法,也就是在每个点 \(u\) 上,任选一条边 DFS,直到回溯到 \(u\) 时才选择别的 ...
- Java 15 新特性：文本块
大家好,我是DD,今天继续来学点Java的新特性! 假设有这样一个场景,我们需要做一个工具.用来自动生成项目文档,文档可以通过浏览器查看,所以最后产出物肯定是一堆html文件.为了让这些html文件更 ...
- 【转】WinForm窗体刻度尺
`using System; using System.Drawing; using System.Windows.Forms; using System.Drawing.Drawing2D; nam ...
- 面试官问：浏览器输入 URL 回车之后发生了什么？
一个执着于技术的公众号 前言 这个问题已经是老生常谈了,更是经常被作为面试的压轴题出现,网上也有很多文章,但最近闲的无聊,然后就自己做了一篇笔记,感觉比之前理解更透彻了. 注意:本文的步骤是建立在,请 ...
- 3D离线地图开发
3D离线地图介绍(3D离线采用矢量数据作为地图基础,可保持地图数据最新) 一.开发中引用3D离线地图(可独立部署通过内外IP+端口进行访问,也可拷贝js库文件到项目中通过绝对路径访问) 1).离线AP ...
- 用简单的 Node.js 后台程序浅析 HTTP 请求与响应
用简单的 Node.js 后台程序浅析 HTTP 请求与响应 本文写于 2020 年 1 月 18 日 我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...
- 关于win10安装wsl子系统Ubuntu图形界面的错误解决
解决了https://blog.csdn.net/weixin_30834783/article/details/102144314Xserver个人使用的是VcXsrv. 在WSL中配置环境变量DI ...
- ELK 1.3之kibana
1.安装kibana,直接压缩包安装就可以,kibana默认端口5601 2.配置kibana配置文件 [root@kibana config]# vim /opt/kibana/config/kib ...