css布局中，什么是BFC

BFC是Block formatting context的缩写，表示“块级格式化上下文”。

设置BFC的元素，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的 Block-level Box如何布局（与该区域外部无关）。

在HTML当中，每个元素都可以看做一个盒子BOX，而不同盒子的“展示”类型有所不同。

Formatting context 是页面中的一块渲染区域，并且有一套渲染规则。它用来决定：其子元素将如何定位，以及和其他元素的关系和相互作用，BFC是其中的一种规则。

可以通过触发BFC布局，来清除浮动，防止纵向margin重叠等。

BFC提供了一个独立布局的环境

每个BFC都遵守同一套布局规则

创建一个BFC:

  1. float：left|right
  2. position：absolute|fixed
  3. display: table-cell|table-caption|inline-block
  4. 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布局

  1. .box{display:flex;}

行内元素也可以使用Flex布局

  1. .box{display:inline-flex;}

  1. <body>
  2.  <div class="box">
  3.   <div class="w-100"></div>
  4.   <div class="flex1"></div>
  5.   </div>
  6. </body>
  8. <style>
  9. .box {
  10.  display: flex;
  11.  height: 200px;
  12.  width: 400rpx;
  13.  }
  14.  .w-100 {
  15.   width: 100px;
  16.   background: red;
  17.  }
  18.  .flex1{
  19.   flex: 1;
  20.   background: blue;
  21.  }
  22. </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：主轴为垂直方向，起点在下沿。

  1. <style>
  2. .dis-flex {
  3.  dispaly: flex;
  4.  flex-direction: column;
  5.  }
  6.  .box {
  7.   height: 200px;
  8.   width: 400px;
  9.   }
  10.   .w-100 {
  11.    height: 50px;
  12.    background: red;
  13.   }
  14. .flex1 {
  15.  flex: 1;
  16.  background: blue;
  17. }
  18. </style>
  20. <body>
  21. <div class="box dis-flex">
  22.  <div class="w-100"></div>
  23.  <div class="flex1"></div>
  24. </div>
  25. </body>

flex-wrap



lex-wrap属性定义了，如果一条轴线排不下，item的换行方式。

flex-wrap有三个值：

1、nowrap（默认）：不换行

2、wrap：换行，第一行在上方。

3、wrap-reverse：换行，第一行在下方。

  1. .dis-flex {
  2.  flex-wrap: wrap-reverse;
  3.  display: flex;
  4. }
  6. .box {
  7.  width: 400px;
  8. }

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  1. .dis-flex {
  2.  display: flex;
  3.  flex-flow: column-reverse wrap;
  4. }
  5. .box {
  6.  height: 400px;
  7.  width: 200px;
  8. }

justify-content有五个值：

1、flex-start（默认值）：左对齐

2、flex-end：右对齐

3、center： 居中

4、space-between：两端对齐，项目之间的间隔都相等。

5、space-around：每个item两侧的间隔相等。

space-between：两端对齐

space-around：每个item两侧的间隔相等

  1. <style>
  2. .dis-flex{
  3.  display: flex;
  4.  flex-flow: wrap;
  5.  justify-content: space-between;
  6.  }
  7. .box {
  8. width: 400px;
  9. border: 2px solid blue;
  10. }
  11. .box2 {
  12. width: 400px;
  13. border: 2px solid blue;
  14. margin-top: 20px;
  15. justify-content: space-around;
  16. }

align-items：Item在交叉轴上如何对齐

1、flex-start：交叉轴的起点对齐。

2、flex-end：交叉轴的终点对齐。

3、center：交叉轴的中点对齐。

  1. <body>
  2. <div class="box">
  3. <div class="item1">1</div>
  4. <div class="item2">2</div>
  5. <div class="item3">3</div>
  6. </div>
  7. </body>
  9. <style>
  10. .box{
  11. width: 400px;
  12. display: flex;
  13. border: 2px solid green;
  14. align-item: center;
  15. }
  16. .box>div{
  17. width:80px;
  18. color: #fff;
  19. text-align:center;
  20. }
  21. .item1{
  22. background:blue;
  23. height:200px;
  24. line-height:200px;
  25. }
  26. .item2{
  27. background: gray;
  28. height: 100px;
  29. line-height: 100px;
  30. }
  31. .item3{
  32. background: red;
  33. height: 120px;
  34. line-height: 120px;
  35. }
  36. </style>

baseline: 项目的第一行文字的基线对齐。

align-content：多根轴线的对齐方式

order

Item的排列顺序。数值越小，排列越靠前，默认为0。

  1. .dis-flex{
  2. display: flex;
  3. flex-flow: wrap;
  4. justify-content: space-between;
  5. }

flex-grow

定义Item的放大比例，默认为0，即如果存在剩余空间，也不放大。

  1. .dis-flex{
  2. display: fle;
  3. }
  4. .box{
  5. width: 400px;
  6. border: 2px solid green;
  7. }
  8. .box>div{
  9. height: 80px;
  10. line-height: 80px;
  11. color: #fff;
  12. text-align: center;
  13. }

flex-shrink

定义了Item的缩小比例，默认为1，即如果空间不足，该Item将缩小

flex-basis

flex-basis属性定义了在分配多余空间之前，Item占据的主轴空间（main size）。

align-self属性允许单个Item有与其他Item不一样的对齐方式，可覆盖align-items属性。

  1. <style>
  2. .box{
  3. width: 400px;
  4. height: 400px;
  5. display: flex;
  6. border: 2px solid green;
  7. align-items: center;
  8. }
  9. .box>div{
  10. width: 80px;
  11. color: #fff;
  12. text-align: center;
  13. }
  14. .item1{
  15. background: blue;
  16. height: 200px;
  17. line-height: 200px;
  18. align-self: flex-end;
  19. }
  20. .item2{
  21. background: gray;
  22. height: 100px;
  23. line-height: 100px;
  24. }
  25. .item3{
  26. background: red;
  27. height: 120px;
  28. line-height:120px;
  29. }
  30. </style>

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774

Day13:H5+JS+C3的更多相关文章

  1. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  2. iOS原生APP与H5+JS交互////////////////////zzzz

    原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...

  3. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 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. 减少距 ...

  5. python开发学习-day13（js、jQuery）

    s12-20160409-day13 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  6. H5、C3、ES6的新特性

    H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...

  7. h5+js随机拖动鼠标产生动画效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 11 (H5*) js第1天 基本数据类型、变量

    目录 1:  js的介绍 2:写js代码注意的地方 3:变量 4:变量的命名和作用 5:变量的类型 6:Number类型 7:string类型 8:类型转换 9:操作符号 复习 <script& ...

  9. mui H5 js动态添加不同类型的数据

    html页面需要添加的页面的数据格式 <ul class="mui-table-view" id="OA_task_1"> <li class ...

随机推荐

  1. 记录：拷贝gitblit里的项目使用git命令clone、pull、push等，出现一直在加载，卡住没反应的问题

    俺想克隆别人gitblit里的其中一个版本库(俺在别人gitblit有权限) 懂得git的道友们,都应该知道克隆一个公共项目,随便找到,打开git终端,输入git clone 项目地址就行了 到了俺这 ...

  2. NIO(2):Channel

    Channel可以理解为铁轨,Buffer是铁轨上的火车.铁轨的两端连接这文件描述符或者说文件的缓冲区和程序运行时的内存.借助NIO是一种更加符合OS底层文件系统的调用方式,使用NIO可以用更小的开销 ...

  3. ADO,net 实体数据模型增、删、改，浅谈

    第一步:建立ADO.net数据模型,一步步操作就行 第二步:画个简单的测试界面 第三步铺代码 using DevComponents.DotNetBar.SuperGrid; using DevCom ...

  4. C#只读属性

    using System; using System.Collections.Generic; using System.Text; namespace 面向对象 { class Person { / ...

  5. 2 Match、Filter、排序、分页、全文检索、短语匹配、关键词高亮

    查索引内所有文档记录 GET  /beauties/my/_search   GET  /beauties/my/_search {     "query":{         & ...

  6. git便携版 添加git-bash到右键菜单

    注册表路径 HKEY_CLASSES_ROOT\Directory\Background\shell 新建项取名open in git 默认设置为右键显示的名称 Git Bash Here 新建字符串 ...

  7. semaphore demo 并行 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    import 'dart:async'; import 'package:semaphore/semaphore.dart'; import 'dart:io'; import 'dart:conve ...

  8. JAVA相关知识

    1.CopyOnWrite (1).在写操作的线程,会将数组复制出来一份进行操作.而原本的数组不会做改变. (2)读线程则不会受到影响,但是可能读到的是一个过期的数据. 在juc(java.util. ...

  9. VMware下载及安装(含破解码）永久使用

    VMware(纽约证交所代码:VMW)在虚拟化和云计算基础架构领域处于全球领先地位,所提供的经客户验证的解决方案可通过降低复杂性以及更灵活.敏捷地交付服务来提高IT效率.VMware使企业可以采用能够 ...

  10. Python多版本环境搭建（Linux系统）

    python Linux 环境 (版本隔离工具)   首先新建用户,养成良好习惯   useradd python   1.安装pyenv   GitHub官网:   https://github.c ...