第二次分享會
阿新 • • 發佈：2020-12-14
第二次分享會
清除浮動
- 新增子元素
父元素內部最後新增一個子元素
<!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> - 利用偽元素
給父元素新增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;
}