float:浮动的

143 阅读1分钟

float:浮动; none 不浮动 left 左浮动 right 右浮动

	目的: 让竖着排列的元素横着排列

添加浮动后的元素将脱离文档流
文档流: 元素默认从上至下,从左至右的排列顺序

继承: 子元素未设置,但是父元素有设置的css属性作用到了子元素身上

盒模型: 任何一个元素都可以看成是盒模型
	组成部分:
		内容区域:  width height
		内边距区域:  padding
		边框区域: border
		外边距区域: margin

	使用方法:
		padding-left:左内边距;
		padidng-top:上内边距;
		padding-right:右内边距;
		padding-bottom:下内边距;
		padding:四个方向;
		padding:上下  左右;
		padding:上  左右  下;
		padding:上  右   下  左;
		【注】
			会撑大元素的大小
			没有负数,没有auto

		margin-left:左外边距;
		margin-top:上外边距;
		margin-right:右外边距;
		margin-bottom:下外边距;
		margin:四个方向;
		margin:上下  左右;
		margin:上  左右  下;
		margin:上  右   下  左;
		【注】
			不会撑大元素的大小
			有负数,有auto
		
			margin常见问题:外边距相遇会重合
				解决法办法:
					兄弟关系: 给一个方向足够的值

					嵌套关系: 
						给父元素添加边框或者内边距

		border:边框大小  形态  颜色;
		border-color:边框颜色;
		border-style:边框形态;
		border-color:边框颜色;
		border-left-color:左边框颜色;
		border-left-style:左边框形态;
		border-left-width:左边框大小;
		三角形:
			border:30px solid transparent; 先设置透明的边框
			border-left-color:red;给左边框设置红

		盒模型大小计算:
			W = width + 左右padding + 左右边框 + 左右外边距
			H = height + 上下padding + 上下边框 + 上下外边距