理清基础系列-css布局

时间：2023-04-05 14:32:58 HTML5

两列或三列布局使用flexfloat左右position:absolute、middlemargin-left、margin-right圣杯和双飞翼布局，全部实现固定宽度on两侧，中间宽度自适应三列布局。headercenter

left

right

footerheadercenter

leftright垂直horizo??ntalcenterhorizo??ntalcentertext-align:centerandmargin:0auto;块级元素的表格方案，(IE8+)absolute+margin:autoscheme，兼容主流浏览器；但是需要定义父容器的高度，否则子元素绝对定位会导致父元素塌陷.absolute-aligned{位置：相对；最小高度：500px；背景：hsl(200,100%,97%);}.absolute-alignedimg{margin:auto;位置：绝对；顶部：0；左：0；底部：0；right:0;}absolute+translate,(IE9+),还需要设置父元素的高度.center{background:hsl(180,100%,97%);位置：相对；min-height:500px;}.centerimg{position:absolute;顶部：50%；左：50%；转换：翻译（-50%，-50%）；宽度：30%；}Flexboxscheme.center{背景：hsl(240,100%,97%);显示：弹性；证明内容：居中；align-items:center;}calc方案，IE9+，比较适合子元素宽高固定的情况//50%为父元素的中心点，减去图像宽高的一半实现定位效果.calc{background-color:hsl(300,100%,90%);最小高度：350px；位置：相对；}.calcimg{宽度：100px；高度：100px；位置：绝对；左：计算（50%-50px）；顶部：计算（50%-50px）；}

上一篇：JavaScript中三点...的用法

下一篇：VasSonicAndroid源码分析

理清基础系列-css布局相关文章