第二次分享会-CSDN博客

本文链接：https://blog.csdn.net/qq_52159101/article/details/111136401

第二次分享会

清除浮动

添加子元素

父元素内部最后添加一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 100%;
            height: auto;
            background-color: lightblue;
        }
        .float{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .clearfix{
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="float"></div>
        <div class="clearfix"></div>
    </div>
</body>
</html>

利用伪元素

给父元素添加after伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 100%;
            height: auto;
            background-color: lightblue;
        }
        .float{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .clearfix::after{
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
    <div class="content clearfix">
        <div class="float"></div>
    </div>
</body>
</html>

创建BFC

为父元素创建BFC

overflow属性设置为非visible
添加浮动
设置绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 100%;
            height: auto;
            background-color: lightblue;
            /* 第一种 */
            overflow: hidden;
            /* 第二种 */
            float: left;
            /* 第三种 */
            position: absolute;
        }
        .float{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="float"></div>
    </div>
</body>
</html>

BFC -> 块级格式化上下文

它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局

BFC渲染区域:

这个区域由某个HTML元素创建,以下元素会在其内部创建BFC区域:

根元素: 意味着,<html>元素创建的BFC区域,覆盖了网页中的所有元素
浮动和绝对定位元素
overflow不等于visible的块盒

不同的BFC区域,它们进行渲染时互不干扰

创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部

具体规则:

创建BFC的元素,它的自动高度需要计算浮动元素 (清除浮动)
创建BFC的元素,它的边框盒不会与浮动元素重叠 (BFC避开浮动元素)
创建BFC的元素,不会和它的子元素进行外边距合并

蛇形矩阵

输入n,输出n*n阶回形矩阵

例:

输入:4

输出:
1 2 3 4
12 13 14 5
11 16 15 6
10 9 8 7

#include <malloc.h>  
#include <stdio.h>  
      
int main(void)  
{  
	//用户输入的值，创建n*n的矩阵  
    int n;  
    //蛇形从1开始计数  
    int count = 1;  
    //a[x][y],x是二维数组的第一个下标，y是第二个。  
    //round是蛇形矩阵的第几圈，从0开始。  
    int x,y,round;  
    scanf("%d",&n);   
    int (*a)[n] = calloc(n*n,sizeof(int));  
    //如果n是1，则直接输出。  
    if(n == 1)
    {  
    	a[0][0] = count;  
    }
    else
    {  
        //下面以n=5为例  
        //一共有2(5/2)圈蛇形  
        for(round=0; round<n/2; round++)
        {  
            /* 以下循环执行后输出如下： 
                1 2 3 4 5 
            */  
        	x = round;  
            for(y=round;y<n-round;y++)
            {  
                a[x][y]=count;  
                count++;  
            }  
            /* 以下循环执行后输出如下： 
                1 2 3 4 5 
                        6 
                        7 
                        8 
            */  
            y = n - round - 1;  
            for(x=round+1;x<n-round-1;x++)
            {  
                a[x][y]=count;  
                count++;  
            }  
            /* 以下循环执行后输出如下： 
                1  2  3  4  5 
                            6 
                            7 
                            8 
                13 12 11 10 9    
            */  
            x = n - round - 1;  
            for(y=n-round-1;y>=round;y--)
            {  
                a[x][y]=count;  
                count++;  
            }  
            /* 以下循环执行后输出如下： 
                1  2  3  4  5 
                16          6 
                15          7 
                14          8 
                13 12 11 10 9 
            */  
            y = round;  
            for(x=n-round-1-1;x>round;x--)
            {  
                a[x][y]=count;  
                count++;  
            }  
        }  
        /* 上面的大循环执行后输出如下： 
                1  2  3  4  5 
                16 17 18 19 6 
                15 24    20 7 
                14 23 22 21 8 
                13 12 11 10 9 
            */  
        if(n%2 == 1)
        {  
            //如果n值奇数，将最中间的空填上  
            a[n/2][n/2] = count;  
        }  
	}  
    //打印矩阵  
    for(x=0;x<n;x++)
    {  
    	for(y=0;y<n;y++)
        {  
        	printf("%d ",a[x][y]);  
        }  
        printf("\n");  
    }  
    printf("\n");  
    free(a);  
    return 0;  
}