1、默认静态布局(标准流)
块级元素独占一行;
内联元素在同一行显示;
2、浮动布局(float)
‘浮’:加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面;
‘漏’:浮动的盒子不占位置,元素原先的位置会漏给标准流的盒子
‘特’:浮动使元素具有行内块特性;
(1)元素的浮动:
元素的浮动是指设置了浮动属性的元素会脱离标准流的控制,移动到其父元素中指定位置的过程。
左浮动 float: left;
右浮动 floa: right;
(2)浮动的特性:
元素浮动会脱离标准流,不占位置;
浮动跨不过边框和边距;
(3)关于清除浮动
原因:浮动元素不占位置,会影响后面元素的排版;
本质:解决父级元素因为子级元素浮动引起内部高度为0的问题;
3、定位布局(position)
(1)静态定位 position:static;
所有元素的默认定位方式,即标准流布局;
(2)相对定位 position:relative;
相对于自己原来的位置进行定位移动,移动后原先的位置仍然占有- - -自恋型定位;
(3)绝对定位 position:absolute;
父元素没有给position时,子元素以浏览器当前屏幕为基准点进行相对移动;
(4)固定定位 position:fixed;
无论页面怎么滚动,位置都是固定的,不会跟着页面走;
4、弹性布局(flex)
通过在父容器上添加display:flex;属性,实现子元素在父元素中的弹性布局。
5、响应式布局(自适应网页设计)
响应式布局是CSS3增加的新布局方式,指一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
优点:为不同终端的用户提供更加舒适的界面和更好的用户体验,适应PC端和移动端。
实现方案:
(1)媒体查询
(2)百分比布局
(3)rem布局
(4)视口单位(vh)
(5)flex弹性布局