css 田字布局，子元素之间，子元素和父元素之间间距10，自适应

html-css09

css 田字布局，子元素之间，子元素和父元素之间间距10，自适应,第1张

前几天去猿辅导面试的css面试题，当时太紧张了，就想着怎么按百分比或者是位移搞，但是冷静下来，css复杂的定位就给元素包爸爸，几乎能解决一大票问题。

细致的描述问题：

一个父元素里面有四个子元素，按田字排列，子元素之间间距10px,和父元素之间的间距也是10px，父元素缩放时子元素要自适应。

解决思路就是父元素里面再包一层，来解决父元素和子元素间距10 的问题。

四个子元素分别再包一层b,b就负责宽高占父元素的50%，里面的b-inner，负责子元素之间的间距。用position absolute相对b进行定位，搞出间距，注意平分公共间距一个子元素应该位移的是5px。

可以使用 DrawArc 方法来实现有间隔的圆。这个方法需要提供七个参数：左上角 X 坐标、左上角 Y 坐标、右下角 X 坐标、右下角 Y 坐标、开始弧度、结束弧度、是否使用顺时针绘制（true 为顺时针）。

CSS+DIV布局，消除两个div之间的间隙只需要在原代码中加入以下代码即可：

ul{padding:0pxmargin:0px}

表单默认是有间距的，需要手动设置它的间距为0。