2.2 俩个作业,俩个bug,float模型

「HTML+CSS」来源:渡一教育

俩个作业

1. 奥运五环居中
2. 俩栏布局

俩个bug

1. margin塌陷
2. margin垂直合并

float模型

1. left/right
2. 浮动元素产生浮动流
3. 消除浮动流

俩个作业

1.奥运五环居中
html					|  	css
div.plat>div.cirles*5		分组{
								width:100px;
								height:100px;
								border:10px solid black;
								border-rading:50%;
								position:absolute;
								}
								1-5相应设置{
								颜色,left,top,index;
											}
								居中
								.plat{
								position:absolute;
								left:50%;
								top:50%;
								margin-left:-190;
								margin-top:-93;
								boder:5px solid black;
								height:186px;
								width:380;
									}

2.俩栏布局
html					|  	css
div.right					*{
dev.left						margin:0;
								padding:0;
					  			}
					  		.right{
					  		position:absolute;
					  		right:0;
					  		width:100px;
					  		height:100px;
					  		background-color:#fcc;
					  		opacity:0.5;
					  		}
					  		.left{
								margin-right:100px;
								height:100px;
								background-color:#123;
								}

俩个bug

俩个bug

专业知识:
bfc(black format context):块级格式化上下文
说明:css把html的每个元素都当成一个盒子
并进一步认为,每个盒子都有自己的渲染规则(会把写的代码渲染出来,每个盒子都有一模一样的语法规则)

我们使用bfc特点的手段,把其中的几个或一个的渲染规则改变,使用另一套渲染规则
例,如果有100条语法,那其实连0.1的修改都不到

margin塌陷(父子垂直top属性重合在一起,取最大值)
html部分:
div.wrapper>div.content

css部分:
*{
margin:0;
passding:0;
}
.wrapper{					.content{
width:100px;				width:50px;
height:100px;				height:100px;					
background-color:black;		background-color:green;
}									}
图:回,里面的口在左上角

margin-left:100px;			margin-left:50px;
margin-top:100px;			margin-top:150px;
说明:此时,只有子元素的margin-top比父级的top大时才会移动
不过是带着父级一起移动
解决:
1.给父级加棚子
border-top:1px solid red;
说明:残暴的做法,不专业,px像素有偏差,羡=项目过不去,

2.使用bfc
如何触发一个盒子的bfc
1.position:absolute;
2.display:inline-block;
3.float:left/right;
4.overflow:hidden;(溢出盒子部分的会隐藏)

margin垂直合并(不解决,可以接受)
我们不能因为改bug,而加结构
1.兄弟平行不共用
2.兄弟垂直共用!!!

解决
1.使用父级包含子级,对父级使用bfc

float模型

1.float模型:(left/right;)(元素站队)
html						|  	css
div.wrapper>div.content*3		.wrapper{
								width:300px;
								height:300px;
								boder:1px solid black;
										}
								.content{
								color:#fff;
								background-color:balck;
								width:100px;
123自上向下排就像p标签一样		height:100px;
										}
123自左向右排					添加float:left;
123倒序自左向右排				添加float:right;

说明.站队边界(范围):px足够就站位,
不够的情况?


2.浮动元素
浮动元素产生了浮动流
1.所有产生了浮动流的元素,块级元素看不到它们,
2.产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素

html						|  	css
div.box							.box{
div.demo						float:left;
								width:100px;
								height:100px;
								background-color:balck;
								opacity:0.5;
									}
								.demo{
								width:150px;
								height:150;
								background-color:green;
									 }

3.清除浮动流
对要更改的兄弟使用clear:both;
p{
clear:both;(必须是块级元素)
}