今天早上 在梦中被舍友叫醒起来答题。
《去哪儿????》!!!!!!!!
我起来晚了,在梦中就听见舍友说:天哪!!!3个全是编程题!!!我赶紧起床,都开始了!!!
我打开一看是1简答2编程,还好吧。然后。。。。
眼睛也睁不开就开始了答题。
简答题
第一个就是BFC是什么?然后让写一个左定位,右平铺的布局。
BFC:块级格式化上下文,是用于布局块级盒子的一块渲染域。
触发条件:
(1)position:absolute或fixed
(2)float:不为none
(3)overflow:不为visible
(4)display:为inline-block、table-cell、table-caption
(5)根元素,即HTML元素
作用:
(1)可以阻止元素被浮动元素覆盖
(2)可以包含浮动元素解决塌陷问题。
(3)同属于一个BFC的相邻两个块级元素的上下margin会发生重叠。
我的测试:
啥都没有的样子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
background: red;
}
.div11{
background: green;
}
.div12{
background: blue;
}
</style>
</head>
<body>
<div class="div1">外面的盒子
<div class="div11">里面的盒子1</div>
<div class="div12">里面的盒子2</div>
</div>
</body>
</html>
OK现在开始一点一点加。
给div1加float:left;高度变为字高+div2高。
若div1,div2都float 脱离文档流,则,div塌陷。
div{
opacity: 0.8;
}
.div1{
background: red;
width:250px;
}
.div11{
background: green;
width: 100px;
height: 100px;
overflow: hidden;
word-break: break-all;
float: left;
}
.div12{
background: blue;
width: 100px;
height: 100px;
float: left;
}
塌了。。
解决这个问题:
.div1{
background: red;
width:250px;
position: absolute;
}
2、margin共用
共用了:`div{
opacity: 0.8;
}
.div1{
background: red;
width:250px;
height: 300px;
}
.div11{
margin: 20px;
background: green;
width: 100px;
height: 100px;
overflow: hidden;
word-break: break-all;
}
.div12{
background: blue;
width: 100px;
height: 100px;
margin: 20px;
}`
解决这个问题:
.div12{
background: blue;
width: 100px;
height: 100px;
margin: 20px;
position: absolute;
}
ok了。
恕我直言,那个解决覆盖的问题,没研究出来。
额 。。是这样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
opacity: 0.8;
}
.div1{
background: red;
width:250px;
overflow: hidden;
}
.div11{
background: green;
width: 100px;
height: 100px;
float: left;
}
p{
background: yellow;
overflow: hidden;
}
.div12{
background: blue;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="div1">外面的盒子
<div class="div11">里面的盒子1</div>
<p>风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗</p>
<!-- <div class="div12">里面的盒子2</div> -->
</div>
</body>
</html>
说一下,为什么形成BFC就可以干这么多事了?
因为其他元素脱离了文档流,所以要给他形成自己的BFC中。
还有大家都喜欢的“夹心饼干”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
opacity: 0.4;
}
.div1{
background: red;
width:250px;
overflow: hidden;
}
.div11{
background: green;
width: 100px;
height: 100px;
float: left;
}
.div12{
background: green;
width: 100px;
height: 100px;
float: right;
}
p{
background: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<div class="div11">里面的盒子1</div><div class="div12">里面的盒子2</div>
<p>风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗风吹亮雪花,吹白我们的头发,当初说一起闯天下,你们还记得吗</p>
</body>
</html>