Day13:H5+JS+C3
css布局中，什么是BFC
BFC是Block formatting context的缩写，表示“块级格式化上下文”。
设置BFC的元素，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的 Block-level Box如何布局（与该区域外部无关）。
在HTML当中，每个元素都可以看做一个盒子BOX，而不同盒子的“展示”类型有所不同。
Formatting context 是页面中的一块渲染区域，并且有一套渲染规则。它用来决定：其子元素将如何定位，以及和其他元素的关系和相互作用，BFC是其中的一种规则。
可以通过触发BFC布局，来清除浮动，防止纵向margin重叠等。
BFC提供了一个独立布局的环境
每个BFC都遵守同一套布局规则
创建一个BFC:
float：left|right
position：absolute|fixed
display: table-cell|table-caption|inline-block
overflow: hidden|scroll|auto
CSS3选择器有哪些？
属性选择器、伪类选择器、伪元素选择器。
css3选择器：
基本选择器，层次选择器
伪类选择器，属性选择器
伪元素，
基本选择器语法
层次选择器语法
CSS3有哪些新特性？
text-shadow
border-radius
box-shadow
box-sizing
gradient
transform
在CSS3中唯一引入的伪元素是 ::selection
媒体查询，多栏布局
border-image
渐变：linear-gradient、radial-gradient
过渡：transition
内联 内嵌 外链 导入
Flex弹性布局
2009年，W3C提出了一种新的方案—-Flex布局
.box{display:flex;}
行内元素也可以使用Flex布局
.box{display:inline-flex;}
<body>
<div class="box">
<div class="w-100"></div>
<div class="flex1"></div>
</div>
</body>
<style>
.box {
display: flex;
height: 200px;
width: 400rpx;
}
.w-100 {
width: 100px;
background: red;
}
.flex1{
flex: 1;
background: blue;
}
</style>
采用Flex布局的元素，称为Flex容器
水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex-direction：决定项目（item）的排列方向
row（默认值）：主轴为水平方向，起点在左端。
column：主轴为垂直方向，起点在上沿。
row-reverse：主轴为水平方向，起点在右端。
column-reverse：主轴为垂直方向，起点在下沿。
<style>
.dis-flex {
dispaly: flex;
flex-direction: column;
}
.box {
height: 200px;
width: 400px;
}
.w-100 {
height: 50px;
background: red;
}
.flex1 {
flex: 1;
background: blue;
}
</style>
<body>
<div class="box dis-flex">
<div class="w-100"></div>
<div class="flex1"></div>
</div>
</body>
flex-wrap
lex-wrap属性定义了，如果一条轴线排不下，item的换行方式。
flex-wrap有三个值：
1、nowrap（默认）：不换行
2、wrap：换行，第一行在上方。
3、wrap-reverse：换行，第一行在下方。
.dis-flex {
flex-wrap: wrap-reverse;
display: flex;
}
.box {
width: 400px;
}
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.dis-flex {
display: flex;
flex-flow: column-reverse wrap;
}
.box {
height: 400px;
width: 200px;
}
justify-content有五个值：
1、flex-start（默认值）：左对齐
2、flex-end：右对齐
3、center： 居中
4、space-between：两端对齐，项目之间的间隔都相等。
5、space-around：每个item两侧的间隔相等。
space-between：两端对齐
space-around：每个item两侧的间隔相等
<style>
.dis-flex{
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
.box {
width: 400px;
border: 2px solid blue;
}
.box2 {
width: 400px;
border: 2px solid blue;
margin-top: 20px;
justify-content: space-around;
}
align-items：Item在交叉轴上如何对齐
1、flex-start：交叉轴的起点对齐。
2、flex-end：交叉轴的终点对齐。
3、center：交叉轴的中点对齐。
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
<style>
.box{
width: 400px;
display: flex;
border: 2px solid green;
align-item: center;
}
.box>div{
width:80px;
color: #fff;
text-align:center;
}
.item1{
background:blue;
height:200px;
line-height:200px;
}
.item2{
background: gray;
height: 100px;
line-height: 100px;
}
.item3{
background: red;
height: 120px;
line-height: 120px;
}
</style>
baseline: 项目的第一行文字的基线对齐。
align-content：多根轴线的对齐方式
order
Item的排列顺序。数值越小，排列越靠前，默认为0。
.dis-flex{
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
flex-grow
定义Item的放大比例，默认为0，即如果存在剩余空间，也不放大。
.dis-flex{
display: fle;
}
.box{
width: 400px;
border: 2px solid green;
}
.box>div{
height: 80px;
line-height: 80px;
color: #fff;
text-align: center;
}
flex-shrink
定义了Item的缩小比例，默认为1，即如果空间不足，该Item将缩小
flex-basis
flex-basis属性定义了在分配多余空间之前，Item占据的主轴空间（main size）。
align-self属性允许单个Item有与其他Item不一样的对齐方式，可覆盖align-items属性。
<style>
.box{
width: 400px;
height: 400px;
display: flex;
border: 2px solid green;
align-items: center;
}
.box>div{
width: 80px;
color: #fff;
text-align: center;
}
.item1{
background: blue;
height: 200px;
line-height: 200px;
align-self: flex-end;
}
.item2{
background: gray;
height: 100px;
line-height: 100px;
}
.item3{
background: red;
height: 120px;
line-height:120px;
}
</style>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
Day13:H5+JS+C3的更多相关文章
- H5+JS+CSS3 综合应用
慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...
- iOS原生APP与H5+JS交互////////////////////zzzz
原生代码中直接加载页面 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net 1. 提升单例有能力的1 2. 减少工作数量2 2.1. 减少距 ...
- python开发学习-day13（js、jQuery）
s12-20160409-day13 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- H5、C3、ES6的新特性
H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...
- h5+js随机拖动鼠标产生动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 11 (H5*) js第1天 基本数据类型、变量
目录 1: js的介绍 2:写js代码注意的地方 3:变量 4:变量的命名和作用 5:变量的类型 6:Number类型 7:string类型 8:类型转换 9:操作符号 复习 <script& ...
- mui H5 js动态添加不同类型的数据
html页面需要添加的页面的数据格式 <ul class="mui-table-view" id="OA_task_1"> <li class ...
随机推荐
- docker 执行 docker system prune 导致Azure Devops build镜像失败
运行docker的centos上, 只分配了16G的空间, 装了个mysql, 还有个rancher, 就只剩下2G的空间了, Azure Devops build镜像就出错了, 显示存储空间不足, ...
- 将ftp目录映射为本地盘符
1.ftpuser 下载安装FTPUSE下载地址:http://www.ferrobackup.com/ftpuse/ 创建 FTPUSE F: www.xx.com pwd /USER:admi ...
- tcp协议close_wait与time_wait状态含义
题目描述 1.什么是三次握手,四次挥手?为什么分别要三次与四次? 2.tcp协议中,close_wait与time_wait状态分别代表什么含义,为什么要设计这两种状态,解决了什么问题? 3.time ...
- 使用vue脚手架搭建项目并将px自动转化为rem
一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...
- mysql 存储过程、视图---创建、调用、删除
之前一直用的是Sql Server数据库,最近偶然机会接触到mysql.这里总结了关于mysql 存储过程.视图的“创建.调用.删除”示例 ============================== ...
- 深入理解React 组件状态（State）
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- ERROR: Cannot uninstall 'chardet'. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.
pip 安装 docker库报错: ERROR: Cannot uninstall 'chardet'. It is a distutils installed project and thus we ...
- sqlserver TOP 问题（转载）
来谈谈SQL数据库中"简单的"SELECT TOP—可能有你从未注意到的细节 首先从博客园的Jerome Wong网友说起 他提出了一个这样的问题 本人写了好几年SQL ...
- Python——字符串增加颜色
给显示字符添加颜色: salary=int(input('\033[31;1m请输入你的工资:\033[0m')) ('\033[;1m请输入你的工资:\033[0m') 3x是给字符串改变颜色 31 ...
- 用js刷剑指offer(从1到n整数中1出现的次数)
题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...