前端学习笔记记录03

CSS布局

1.固定布局

2.流动布局

3.响应式布局

4.浮动布局 （PC端网页）

5.flex布局（移动端）

6.定位布局

7.rem布局 （移动应用）

浮动带来的影响

元素一旦浮动会脱离文档流，不占位

1.浮动的元素会覆盖正常没有浮动的元素

2.子元素会导致父元素（无高度）塌陷

清除浮动

1.增加挡板元素

.clearFix {
    clear:both;
    zoom:1; /*兼容IE*/
}

2.父元素中子元素浮动

.father {
			overflow: hidden;		/*存在溢出隐藏bug*/
			zoom: 1;
}

3.万能清除

.father::after {
		content: ;			/*兼容好，无bug*/
		height: 0;
		display: block;
		clear: both;
		zoom: 1;
}

定位

不能用作主要布局方式，主要用于鼠标移入特效  如：下拉菜单、楼层导航、固定导航条

position:static/fixed/absolute/relative 静态/固定/绝对/相对

定位元素具有堆叠次序

z-index:number  (值越大，次序越高)

固定定位：依赖浏览器窗口

子绝父相

绝对定位：默认依据浏览器左上角定位，若其父、祖先元素具有相对定位，则依赖其父、祖先元素                 定位。

相对定位：相对元素自身当前所处的位置，元素占用标准文档流。（大多数情况下为给绝对定位的                 元素做定位基准使用）