您好,欢迎来到小侦探旅游网。
搜索
您的当前位置:首页CSS全屏布局的5种方式-小火柴的蓝色理想

CSS全屏布局的5种方式-小火柴的蓝色理想

来源:小侦探旅游网

×
目录
[1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结

前面的话

  全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路

思路一: float

【1】float + calc

  通过calc()函数计算出.middle元素的高度,并设置子元素高度为100%

top

left

right

bottom

【2】float + absolute + (fix)

  通过增加结构来提高兼容性,.middle元素设置100%的高度,.top和.bottom设置absolute覆盖在.middle上

top

left

right

bottom

思路二: inline-block

【1】inline-block + calc

top

left

right

bottom

【2】inline-block + absolute + (fix)

top

left

right

bottom

思路三: table

  水平方向子元素的间距可以用border实现。所有浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

top

left

right

bottom

思路四: absolute