Day13:H5+JS+C3

川长思鸟来 2021-09-29 13:40 297阅读 0赞

## css布局中，什么是BFC ##

BFC是Block formatting context的缩写，表示“块级格式化上下文”。  
设置BFC的元素，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的 Block-level Box如何布局（与该区域外部无关）。

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

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

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

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

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

创建一个BFC:

![image.png][]

![image.png][image.png 1]

![image.png][image.png 2]

![image.png][image.png 3]

![image.png][image.png 4]

## CSS3选择器有哪些？ ##

属性选择器、伪类选择器、伪元素选择器。

![image.png][image.png 5]

![image.png][image.png 6]

css3选择器：  
基本选择器，层次选择器  
伪类选择器，属性选择器  
伪元素，

基本选择器语法

![image.png][image.png 7]

层次选择器语法

![image.png][image.png 8]

![image.png][image.png 9]

## 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;}

![image.png][image.png 10]

<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容器

![image][]

水平的主轴（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：主轴为垂直方向，起点在下沿。

![image.png][image.png 11]

## flex-wrap ##

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

flex-wrap有三个值：

1、nowrap（默认）：不换行

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

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

.dis-flex {
     flex-wrap: wrap-reverse;
     display: flex;
    }
    
    .box {
     width: 400px;
    }

![image.png][image.png 12]

## flex-flow ##

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

![image.png][image.png 13]

.dis-flex {
     display: flex;
     flex-flow: column-reverse wrap;
    }
    .box {
     height: 400px;
     width: 200px;
    }

![image.png][image.png 14]

justify-content有五个值：

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

2、flex-end：右对齐

3、center： 居中

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

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

![image.png][image.png 15]

space-between：两端对齐  
space-around：每个item两侧的间隔相等

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

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

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

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

![image.png][image.png 16]

<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: 项目的第一行文字的基线对齐。  
![image.png][image.png 17]

![image.png][image.png 18]

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

order

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

![image.png][image.png 19]

.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;
    }

![image.png][image.png 20]

![image.png][image.png 21]

flex-shrink

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

![image.png][image.png 22]

![image.png][image.png 23]

flex-basis

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

![image.png][image.png 24]

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

--------------------

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

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[image.png]: /images/20210724/e1105102e6934548872acbac61b56574.png
[image.png 1]: /images/20210724/c09547d690b44f19aed8d8ba82303d5d.png
[image.png 2]: /images/20210724/ec9da2496cdf4df199a3f8af0f594598.png
[image.png 3]: /images/20210724/933054fbdcce4c30aa2c4678f72d7daa.png
[image.png 4]: /images/20210724/b2ac06464ad44cc89148174efad6a11e.png
[image.png 5]: /images/20210724/efe89d517fbc4e2fbd89d0a770121e0c.png
[image.png 6]: /images/20210724/cc0b33b5c4ca46b3a87b5a27c66a909e.png
[image.png 7]: /images/20210724/fe80be76c2a64841a2a954db1933fd65.png
[image.png 8]: /images/20210724/10cc2985e7dd48e1bffaa0cb2df8a0ca.png
[image.png 9]: /images/20210724/aa5269d7d5e248d7955818418cb14a3e.png
[image.png 10]: /images/20210724/4d3a5c09b4004cb8bc6d9be45b8a68a6.png
[image]: /images/20210724/a3673b2a8d3544f3bc1781c2c84d37fa.png
[image.png 11]: /images/20210724/d7d4952fa0bc4819a82bfc4fb5bc873b.png
[image 1]: /images/20210724/f081ae9ef3af4efca5443f5efbc74088.png
[image.png 12]: /images/20210724/8f9e29073164445bbfcf681fabd66483.png
[image.png 13]: /images/20210724/c77f33507711464283ae4e3eea31a7be.png
[image.png 14]: /images/20210724/ac3324e5eef6454daea028d2891acbcf.png
[image.png 15]: /images/20210724/d220715186b9462a875ccad7ec939d63.png
[image.png 16]: /images/20210724/e1e51ad863194456806e81dfd36f41bc.png
[image.png 17]: /images/20210724/cac9f1a9e2094d7a92d59e428cb18db5.png
[image.png 18]: /images/20210724/5b87b3b4ff304e40b135ab4ebf94bd81.png
[image.png 19]: /images/20210724/21e4c509477d4fbcbd006e1728f08b2f.png
[image.png 20]: /images/20210724/8d48a034a9fa4b9aa1ea17a949f62b79.png
[image.png 21]: /images/20210724/b1e61b83482146738502ce59e23be604.png
[image.png 22]: /images/20210724/ac594461212f48e98c4e6bd5bce497b2.png
[image.png 23]: /images/20210724/bf4ae62897604f1ea0bb529b5c874c8e.png
[image.png 24]: /images/20210724/f2f96d1a974b426b9889b9b531c51c3d.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/8fe3c048e040443396443723b42eff5b.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/bedbec5b35204947a5dc0c98259b9337.png