「HTML+CSS」五环居中,两栏布局,经典bug,BFC
*{
margin: 0px;
padding: 0px;
}
.frame{
position: fixed;
left:50%;
top:50%;
margin-left: -200px;
margin-top: -85px;
width: 400px;
height: 170px;
border: 1px solid black;
}
.cir1,
.cir2,
.cir3,
.cir4,
.cir5{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50%;
}
.cir1{
border-color: black;
top: 0;
left: 0;
}
.cir2{
border-color: blue;
left: 140px;
top: 0;
}
.cir3{
border-color: yellow;
left: 280px;
top: 0;
}
.cir4{
border-color: red;
left: 70px;
top: 50;
}
.cir5{
border-color: #f40;
left: 210px;
top: 50;
}
div{
position: fixed;
width: 50px;
height: 100px;
background-color: red;
left: 0px;
bottom: 100px;
}
两栏布局: 本质就是变成层级结构,使下面的元素浮动到上面去
magin-left:100px即可
magin塌陷和magin合并BFC
垂直向上的magin父子元素取决于最大的值如:
margin-right: 50px;
父子元素,若想要子相对于父往下走,可是没有margin相当于父上面没有棚,边界
不推荐用
BFC-block format content 块级格式化上下文
通过css手段让其渲染规则发生改变
特定的盒子会遵循另一个语法规则
都能弥补margin塌陷
Margin合并
为什么会有空格:文本分隔符,
区域不能共用
margin-right:xxpx;
margin-left:xxpx;
原因,两个垂直方向的元素,margin是样的,你上面要空出bottom100px按理说下面的元素也要空出top100px,而下面的无动于衷,这怎么解决呢?很简单那上面多家像素即可;
如:
