2018.11.10 网页中使用Css+Html的圆形布局

2018.11.10 网页中使用Css+Html的圆形布局

在大多数的日常网页中，会选择垂直布局或者水平布局，因为网页中的块级元素提供了浮动（float）属性，但是有时候圆形布局会更具美感和设计感。
几种实现网页中圆形布局的简单方法。

1. 使用上边距（top）属性和左边距（left）属性组合的方式实现网页中的圆形布局

Html代码：

<div class="main">												<--父级元素-->
			<div id="main_inner"></div> 						<--参照元素-->
			<div id="main_1" class="main_inner_base"></div>		<--子元素-->
			<div id="main_2" class="main_inner_base"></div>
			<div id="main_3" class="main_inner_base"></div>
			<div id="main_4" class="main_inner_base"></div>
			<div id="main_5" class="main_inner_base"></div>
			<div id="main_6" class="main_inner_base"></div>
</div>

.main父级元素，在父级元素中N个.main_inner_base子元素实现圆形布局;
为了观看效果明显，在.main父级元素中加了一个#main_inner子元素作为参照元素。

Css代码：

.main {width: 500px;height: 500px;border-radius: 50%;border-style: solid;border-width: 0px;background-color: gray;position: relative;
    }
    
#main_inner {width: 60%;height: 60%;border-radius: 50%;border-style: solid;border-width: 0px;	background-color: white;	position: absolute;	left: 20%;top: 20%;
    }
    
.main_inner_base {width: 18%;height: 18%;border-radius: 50%;border-style: solid;	border-width: 0px;background-color: white;position: absolute;box-sizing: border-box;
    }  

.main父级元素设置为相对定位（position：relative；）便于子元素相对其绝对定位；
.main_inner_base子元素设置为绝对定位（position：absolute；）使其脱离文档流定位；
所有子元素的距离参数全部使用百分数，继承父级元素的统一长度，便于修改。

原理：

通过比较简单的数学几何知识可知，确定平面内一圆形需要半径（R）和圆心位置(X,Y)两个参数。
但是在使用绝对定位的网页中，我们需要获取的是圆上每一个点到其父元素左上角定位点的水平距离（left）和垂直距离（top）。

在具体计算中还需要考虑Sin和Cos的值在不同取值区间正负不同；
为了方便使用，我还用C语言编写了生成Css代码的小程序，方便读者使用。

C语言代码：

#include <stdio.h>
#include <math.h>
#define PI 3.1415926535
int main(){
	double angle = 0;
	double R = 0;
	int n = 0;
	double top = 0;
	double left = 0;
	
	printf("请输入半径：");
	scanf("%lf",&R);		
	printf("请输入子元素数目：");
	scanf("%d",&n);
	angle = 360/n;
	
	for(int i=0;i<n;i++){
		double ang = i*angle*PI/180;
		if(ang>=0&&ang<PI/2)
		{
			top = R - R*cos(ang);
			left = R + R*sin(ang); 	
		}
		if(ang>=PI/2&&ang<PI)
		{
			top = R + R*cos(ang);
			left = R - R*sin(ang); 	
		}
		if(ang>=PI&&ang<=PI*3/2)
		{
			top = R - R*cos(ang);
			left = R + R*sin(ang); 	
		}
		if(ang>=PI*3/2&&ang<=PI*2)
		{
			top = R + R*cos(ang);
			left = R - R*sin(ang); 	
		}
		printf("#main_%d{top:%2.2f%%;left:%2.2f%%;}\n",i+1,top,left);
	}
	return 0;
} 

直接将生成的Css片段放到Css文件中便可以布局完成。

最终样式：