第三次周报-2019.12.14

这个周学习了bfc,因为自己理解能力的原因吧.学姐讲的时候发现没有太听懂,于是分享会结束之后自己了解了bfc的详细情况,以下是bfc的详细

BFC

BFC全称叫做块级格式化上下文，是一个网页的概念

以下是MDN官方的解释

一个块格式化上下文（block formatting context）
是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 一个块格式化上下文由以下之一创建：

根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具有 position 为 absolute
或 fixed) 内联块 (元素具有 display: inline-block) 表格单元格 (元素具有 display:
table-cell，HTML表格单元格默认属性) 表格标题 (元素具有 display: table-caption,
HTML表格标题默认属性) 具有overflow 且值不是 visible 的块元素， display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all
的元素并不被包裹在一个多列容器中。 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear)
很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

看完BFC这个东西就是一个特性,不要去识图理解,使用bfc的特性就可以了

一般我们使用overflow:hidden;去开启bfc
下面看看使用场景和方法

1. 自适应的两栏布局，BFC 可以阻止元素被浮动元素覆盖
原理就是bfc内部元素和外部元素无法相互影响,给中间元素开启浮动,就可以避免浮动覆盖中间元素的问题.

2. 清除内部浮动,这时可以让父元素生成BFC
计算bfc元素的高度时,不会忽视浮动元素

3. 防止margin重叠，在发生margin的元素外包裹一个bfc父元素
也是利用了内外元素无法相互影响的原理来保证margin不合并

其次就是
flex布局

**开启flex后,flex本元素以及的子元素会变成弹性元素(不包括孙子元素)**弹性布局子元素内部渲染和弹性盒子外部的渲染还是正常进行不会受到弹性盒子的影响

1. flex的默认属性(一个小例子)

<style>
        div{
            box-sizing: border-box;
            display: flex;
        }
        .main
        {
            height: 1000px;
            width: 1000px;

        }
        .main .div1
        {
            height: 200px;
            width: 300px;
            background: #000;
        }
        .main .div2{
            height: 200px;
            width: 300px;
            background: #008c8c;
        }
    </style>

可以看到俩个div之间有间隙,这时候把display改为flex空隙就会消失,因为flex弹性盒子之间默认没有空隙

如图

还有的默认例如左对齐什么的就不提了

2. flex-grow 属性

如果希望一个弹性元素占满剩下的空间,指定flex_groe属性值为1;
默认为0,为0表示使用原来的宽度.

3. align-self 属性和 align-items 属性

弹性盒子有个性质,默认不改变宽度,但是会自动改变高度,弹性元素会跟着高度的改变进行拉升

align-self会改变这种行为,使弹性元素的高度不随父元素进行拉升,这个属性有四个值

• flex-start：顶边对齐，高度不拉伸
• flex-end：底边对齐，高度不拉伸
• center：居中，高度不拉伸
• stretch：默认值，高度自动拉伸

align-items
加在弹性元素父元素上,它的属性会被子元素的align-self继承,局部的全局设置

然后我根据c的课程,打出来一个可变数组

这里是头文件

#ifndef _ARRAY_H_
#define _ARRAY_H_

#include "string.h" //后面用到了string.h里的函数所以这里引用了string.h

typedef struct //建立一个数组类型,方便进行处理
{
    int* Array;
    int size;
} Array;

Array Array_crate(int size);//建立一个可变数组
void Array_free(Array* a);//释放可变数组空间
void Array_change(Array* a,int more_size);//核心部分,进行数组大小的改变
int Array_size(const Array *a);//测量数组的大小
int* Array_at(Array *a,int index);//遍历数组使用的函数,直接在[index]位上写入或读出数字

#endif


#ifndef more_size

#define more_size 10

#endif

#include"Array.h"

// typedef struct   
// {
//     int* array;
//     int size;
// } Array;
// more_size默认为10,使用者可以重新定义(这里引入more_size,是因为如果每次扩容都进行一次增长数组,会使程序多次重复,时间变长)

Array Array_crate(int size)
{
    Array a;
    a.array=(int*)malloc(sizeof(int)*size);//这里我默认数组为int型数组
    a.size=size;
    return a;
}


void Array_free(Array* a)
{
    free(a->array);
    a->size=0;//长度重新设为0
    a->array=NULL;//让array的地址指向NULL
}


int Array_size(const Array *a)
{
    return (a->size);//程序封装,养成写代码的好习惯
}


int* Array_at(Array *a,int index)//返回指针,方便进行操作
{
    if (index > a->size)
    {
        Array_change(a,( index - (a->size) / more_size +1)* more_size );//这个算式可以使空间始终刚好大于数组总数
    }
    return &(a->array[index]);
}


void Array_change(Array* a,int more_size)//核心代码
{
    int* p=malloc(sizeof(int)*((a->size)+more_size));//新申请一个空间,放下更多数字
    memcpy(p,&(a->array),a->size);//拷贝数组到新地址上
    free(&(a->array));//释放原数组空间
    &(a->array)=p;//让a->array指向新建立的数组
    (a->size)+=more_size;//增加a->seize
}

然后用

while(  xxxx  )
{
	scanf("%d",arrar_at);
}

的方法来写入值就可以实现可变数组的遍历写入