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 (值越大,次序越高)
固定定位:依赖浏览器窗口
子绝父相
绝对定位:默认依据浏览器左上角定位,若其父、祖先元素具有相对定位,则依赖其父、祖先元素 定位。
相对定位:相对元素自身当前所处的位置,元素占用标准文档流。(大多数情况下为给绝对定位的 元素做定位基准使用)