面试中有个有趣的题目~
HTML code:
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
CSS:
.box1, .box2, .box3 {
width: 200px;
height:40px;
}
.box1, .box3{
margin: 20px;
}
.box2 {
margin:40px 20px;
}
要求,基于这三个Div,添加CSS,做出一列有5个Div的效果,并且背景色依次为蓝色,黄色,红色,黄色,蓝色。
提示:利用css maring塌陷效果
我是用:before, :after添加Div做的。但是,感觉好像不是正确答案,虽然效果一样。
demo:http://jsfiddle.net/etianqq/ocdv1xrh/
不知道是否有更优的解法???尤其是提示,“利用css maring塌陷效果”。虽然明白塌陷的概念,但是如何利用,就不得而知了。
用border-top
border-bottom
.box1, .box2, .box3 {
width: 200px;
}
.box1 {
background: green;
height: 200px;
margin-bottom: -160px;
}
.box2 {
background: yellow;
height: 120px;
margin-bottom: -80px;
}
.box3 {
background: red;
height: 40px;
}
看了评论好多人写了嘛···我用的margin-top而已
.box1{margin-bottom: 0px;height: 200px;}
.box2{margin-top:-160px;margin-bottom: 0px;height: 120px;}
.box3{margin-top:-80px;}
一个div就够,用CSS3径向渐变。
div{
width: 200px;
height: 100px;
background: -webkit-radial-gradient(50% 100%,blue 0px, blue 20px, red 20px, red 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px,#fff 100px);
border-radius: 100% 100% 0 0;
}
css3 的多重边框。
border-width:6px;
border-style:solid;
border-top-colors:#000 #fff #999 #aaa #ccc #eee;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;
其实我觉得如果是楼主那种效果,一个margin-bottom的负值都可以解决了,如果要搞出个弯弯的彩虹那得用border-radius,几个DIV一重叠就行了,不过看上面有用radius-gradient的这个还真没想到,是个简单方法,不过不合题意,哈哈哈
body{
background-color:yellow;
}
.box1,.box3{
background-color:blue;
}
.box2{
background-color:red;
}
垂直方向的div,相邻margin会塌陷,取最大值,所以中间两个间距是40px,不是60px
三个DIV,每个俩伪类:before、:after,加起来六个,最后一个用投影做了;
其实使用box-shadow,一个DIV就可以实现7色咯~
<!-- 方法一 -->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
div{
width: 200px;
}
.div1{
height: 250px;
background: blue;
}
.div2{
height: 150px;
margin-top: -200px;
background: yellow;
}
.div3{
height: 50px;
margin-top: -100px;
background: red;
}
<!-- 方法二 -->
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
div{
width: 200px;
overflow: hidden;
}
.div1{
height: 250px;
background: blue;
}
.div2{
height: 150px;
margin-top: 50px;
background: yellow;
}
.div3{
height: 50px;
margin-top: 50px;
background: red;
}
.box1, .box2, .box3 {
width: 200px;
height:40px;
}
.box1, .box3{
margin: 20px;
}
.box2 {
margin:40px 20px;
}
.box1{
padding:80px 0px;
background:blue;
}
.box2{
position:absolute;
top:20px;
padding:40px 0px;
background:yellow;
}
.box3{
position:absolute;
top:80px;
background:red;
}
不知道塌陷怎么搞
.box1, .box2, .box3 {
width: 200px;
}
.box1{
background-color: blue;
height: 200px;
}
.box2 {
height: 120px;
background-color: red;
margin-top: -160px;
}
.box3{
height: 40px;
background-color: yellow;
margin-top: -80px;
}
这个题目确实是考察BFC相关知识的
大家使用各种方式实现这个代码,其实也主要是因为题目的不严谨
三个div,不用伪元素,不定高,兼容各浏览器
.blue{overflow:hidden;background: blue}
.yellow{overflow:hidden;margin:30px 0;background: yellow;}
.red{margin:30px 0;min-height:30px;background: red;}
<div class="blue">
<div class="yellow">
<div class="red"></div>
</div>
</div>
跟楼上一样的,只不过我写的margin-bottom,这就是题目说的margin塌陷
.box1, .box2, .box3 {
width: 200px;
}
.box1 {
background: green;
height: 200px;
margin-bottom: -160px;
}
.box2 {
background: yellow;
height: 120px;
margin-bottom: -80px;
}
.box3 {
background: red;
height: 40px;
}
你们都太牛了,真是高山仰止啊!
大家就不考虑一下“彩虹”是弯的么?
.box1 {
width: 400px;
height: 200px;
overflow: hidden;
}
.box1::before {
float: left;
display: block;
width: 400px;
height: 400px;
border-radius: 100%;
box-sizing: border-box;
border: solid 10px blue;
content: " ";
}
.box1::after {
margin-top: 10px;
margin-left: 10px;
display: block;
width: 380px;
height: 380px;
border-radius: 100%;
box-sizing: border-box;
border: solid 10px yellow;
content: " ";
}
.box2 {
float: left;
margin-top: -180px;
margin-left: 20px;
width: 360px;
height: 180px;
overflow: hidden;
}
.box2::before {
float: left;
margin: 0;
display: block;
width: 360px;
height: 360px;
border-radius: 100%;
box-sizing: border-box;
border: solid 10px red;
content: " ";
}
.box2::after {
margin-top: 10px;
margin-left: 10px;
display: block;
width: 340px;
height: 340px;
border-radius: 100%;
box-sizing: border-box;
border: solid 10px yellow;
content: " ";
}
.box3 {
float: left;
margin-top: -160px;
margin-left: 40px;
width: 320px;
height: 160px;
overflow: hidden;
}
.box3::before {
float: left;
margin: 0;
display: block;
width: 320px;
height: 320px;
border-radius: 100%;
box-sizing: border-box;
border: solid 10px blue;
content: " ";
}
BTW: 因为问题里说到用margin做效果,我个人更喜欢用position..
.box1,.box2,.box3{
width: 100%;
}
.box1 {
height: 200px;
background-color: blue;
}
.box2 {
height: 120px;
margin-top: -160px;
background-color: yellow;
}
.box3 {
height: 40px;
margin-top: -80px;
background-color: red;
}
如果只是考虑某一段彩虹,我喜欢用border
.box1, .box2, .box3 {
width: 200px;
height:40px;
}
.box1{
border-top: solid 40px red;
background-color: orange;
border-bottom: solid 40px yellow;
}
.box2{
border-top: solid 40px green;
background-color: blue;
border-bottom: solid 40px #000088;
}
.box3{
background-color: violet;
}
我觉得一个div就够了。。你可以用box-shadow啊
.box1 {
box-shadow: 0 20px 0 red,0 40px 0 yellow,0 60px 0 green,0 80px 0 blue;
width: 200px;
height:40px;
}
当然如果只支持firefox的话,我觉得multi-border-colors也是可以用的
.box1, .box2, .box3 {
width: 200px;
height: 40px;
border: 1px solid purple;
}
.box1, .box3{
margin: 20px;
}
.box1 {
height: 200px;
margin-bottom: -200px;
background: blue;
}
.box2 {
margin: 40px 20px;
background: yellow;
height: 120px;
margin-bottom: -100px;
}
.box3 {
background: red;
}
ssssss