PythonWeb第四天

PythonWeb# 前端简单介绍

-day04

一、布局方式

1.静态流/文档流布局

	根据元素类型和代码的书写顺序，从上到下，从左至右依次显示。

2.浮动布局

	属性：float
	取值：left/right
	特点：
		1）浮动元素会从它在文档中的原始位置脱离文档流，“悬浮”在父元素的上方，按照浮动方向依次停靠在前一个元素的边缘。
		2）元素脱流之后，在文档中不占位，可以手动设置宽高
		3）“文字”环绕效果：浮动元素会遮挡正常元素的位置，但是不影响内容显示，正常内容会围绕在浮动元素周围显示
	问题及解决：
		1）浮动元素不占位，后面正常的元素会向前占位
			解决：清除浮动
			属性：clear
			取值：left/right/both
			使用：添加在正常元素上，使其不受前面浮动元素的影响。

		2）子元素全部浮动，造成父元素高度为0，影响父元素自身背景或边框样式的显示，影响整体布局
			解决方式一：
				给父元素固定高度（适用于内容确定的元素。例如：导航栏）
			解决方式二：
				给父元素设置overflow:hidden;（适用于内容不确定，需要动态加载的元素。例如：页面主体）
			解决方式三：
				父元素末尾添加空的块元素，设置clear:both;

3.定位布局

	1）定位用于实现元素显示位置的调整
	2）属性：position
		取值：relative/absolute/fixed
		使用:元素设置position属性之后，才能称为已定位的元素，已定位的元素可以结合偏移属性调整显示位置
	3）偏移属性：
		top 设置距离参照物顶部的偏移量
		left
		bottom
		right
	4）分类
		1.相对定位（relative）
			设置相对定位的元素会参照它在文档中的原始位置偏移,不会脱离文档流。
		2.绝对定位（absolute）
			设置绝对定位的元素会参照离它最近的已定位的祖先元素进行偏移，没有的话最终参照窗口的(0,0)点偏移；会脱离文档流（不占位，可以手动调宽高）
			使用：父元素设置相对定位，子元素设置绝对定位。
		3.固定定位
			设置固定定位的元素会参照浏览器窗口进行偏移，不会跟随页面滚动而滚动，会脱离文档流。常见于聊天窗口，博客的目录或广告
	5）堆叠次序调整
		1.已定位的元素与文档中正常元素发生堆叠，已定位元素在上方显示
		2.同为已定位元素发生堆叠，看标签的书写顺序，后来者居上
		3.可以使用z-index属性调整已定位元素的堆叠次序，取无单位的数值，值越大，越靠上

二、背景属性

1.设置背景颜色

	background-color

2.背景图片相关

	1）background-image:url("");
		设置背景图片
	2）background-repeat
		设置背景图片的重复方式。
		默认：元素尺寸>背景图的尺寸时，浏览器会自动重复平铺，直至铺满元素；元素尺寸<背景图尺寸，背景图默认从元素的左上角显示，超出部分不可见。
		调整背景图的重复方式：
			repeat默认值，沿水平和垂直两方向重复平铺
			repeat-x
			repeat-y
			no-repeat不重复
	3）background-position:x y;
		设置背景图片的显示位置
		取值方式：
			1.取像素值，在元素坐标系中设置背景图片的起始坐标
			2.取方位值
				水平：left/center/right
				垂直：top/center/bottom
				默认缺省方向的值为center
			3.百分比
				x% y%计算背景图片的起始坐标：
				(元素尺寸-图片尺寸)*x%
				特殊值：
					0% 0% -> left top
					50% 50% -> center
					100% 100% -> right bottom
	4）background-size:width height;
		设置背景图片的尺寸
		取像素值，百分比或关键字：
		1.像素值，直接指定宽高，只给一个值表示设置宽，高度会等比例缩放
		2.百分比，根据元素尺寸计算背景图的尺寸
		3.关键字：
			cover覆盖，背景图片等比拉伸至足够大完全覆盖元素，超出部分不可见
			contain包含，等比拉伸至刚好被元素容纳
	5）简写属性
		background:color url() repeat position;
		背景图片的尺寸，background-size需要单独设置