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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 田字布局,子元素之间,子元素和父元素之间间距10,自适应相关的知识,希望对你有一定的参考价值。

参考技术A 前几天去猿辅导面试的css面试题,当时太紧张了,就想着怎么按百分比或者是位移搞,但是冷静下来,css复杂的定位就给元素包爸爸,几乎能解决一大票问题。
细致的描述问题:
一个父元素里面有四个子元素,按田字排列,子元素之间间距10px,和父元素之间的间距也是10px,父元素缩放时子元素要自适应。
解决思路就是父元素里面再包一层,来解决父元素和子元素间距10 的问题。
四个子元素分别再包一层b,b就负责宽高占父元素的50%,里面的b-inner,负责子元素之间的间距。用position absolute相对b进行定位,搞出间距,注意平分公共间距一个子元素应该位移的是5px。

以上是关于css 田字布局,子元素之间,子元素和父元素之间间距10,自适应的主要内容,如果未能解决你的问题,请参考以下文章

在jsp页面中,frame之间以及子页面和父页面间参数是如何传递的?

CSS布局技巧大全

float高度塌陷问题解决方案

盒模型

js获取iframe和父级之间元素,方法属,获取iframe的高度自适应iframe高度

css设置时父元素随子元素margin值移动