学习笔记--Web基础day06

CSS属性

1.定位布局

1.属性: position
2.取值: 
	static 		默认值,按照文档流布局
	relative 	相对定位
	absolute 	绝对定位
	fixed 		固定定位
注意: 
	只有元素的position属性设置为relative/absolute/fixed,才认为元素是'已经定位的元素'。
3.偏移属性
	-属性: top/right/bottom/left
	-作用: 配合已定位的元素实现位置移动
	-取值: 像素值
		top: 
			-以元素的上边界为基准移动元素,下移为正,上移为负值。
		right: 
			-以元素的右边界为基准移动元素,左移为正,右移为负值。
		bottom: 
			-以元素的下边界为基准移动元素,上移为正,下移为负值。
		left: 
			-以元素的左边界为基准移动元素,右移为正,左移为负值。

2.定位方式

1.相对定位
	position: relative;
		-元素采用相对定位时,会参照他在文档中原本的位置进行偏移。
2.绝对定位(重点)
	position: absolute;
	-特点: 
		1.绝对定位的元素,会脱离文档流,元素在文档中不占位。
		2.绝对定位的元素会参照一个离他最近的并且已经定位的祖先元素进行偏移。
		3.如果元素没有已经定位的祖先元素,元素会参照body(浏览器左上角)的位置进行偏移。
	-注意: 
		1.元素一旦设置绝对定位,就可以设置宽高了。
		2.经常使用“父相子绝”的方式实现页面布局;即: 父元素采用相对定位,子元素采用绝对定位。
		3.浮动和绝对定位都可以实现元素脱流,采用'浮动+外边距'调整元素位置 等价于'绝对定位+偏移属性',浮动更常见于外围结构标签,做网页整体布局时使用,绝对定位更常见于内部元素的调整。
		4.浮动和相对定位是可以共存的,设置的相对定位只是为了辅助内部子元素的定位布局。