页面布局解决方案

XiNGRZ 发布于2019-08-29 13:03 / 2573人阅读

摘要：页面布局解决方案居中布局水平居中子元素相对于父元素居中且子元素宽度可变。优点兼容性好支持，以下版本需要调整页面结构至优点绝对定位脱离文档流，不会对后续元素的布局造成影响。下面列出了两种布局方案，草案并不稳定，浏览器支持也并不理想。

页面布局解决方案 居中布局 水平居中

子元素相对于父元素居中且子元素宽度可变。

除了另外声明，HTML结构为以下内容：


    Demo

inline-block + text-align

.parent {
    text-align: center;
}

.child {
    display: inline-block;
    width: 300px; /*宽度可变*/
    background: #ffff00;
}

优点

兼容性好（甚至可以兼容 IE6 和 IE7）

table + margin


    Demo


.parent {
    text-align: center;
}

.child {
    display: table;
    margin: 0 auto;
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

NOTE: display: table 在表现上类似 block 元素，但是宽度为内容宽度。

优点

不需要设置父元素样式（支持 IE8 及其以上版本）

NOTE：兼容 IE8 以下版本需要调整为

的结果。

absolute + transform

.parent {
    position: relative;
    text-align: center;
}

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

优点

绝对定位脱离文档流，不会对后续元素的布局造成影响。

子元素设置绝对定位 position: absolute;，父元素设置相对定位 position: relative; 是典型的定位方法，多用于为子元素设置定位的参考点。

缺点

transform 为 CSS3 属性，有兼容性问题。

NOTE：transform属性的translateX和translateY对元素进行旋转、缩放、移动或倾斜，其中移动功能可以用于定位。

flex + justify-content

.parent {
    display: flex;
    justify-content: center;
    text-align: center;
}

.child {
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

/* 下面的方法，可以达到一样的效果 */
.parent {
    display: flex;
    text-align: center;
}

.child {
    margin: 0 auto;
    width: 200px; /*宽度可变*/
    background: #ffff00;
}

优点

只需设置父元素属性，无需设置子元素。

优点

flex有兼容性问题。

垂直居中

子元素相对于父元素居中且子元素高度可变。

table-cell + vertical-align

.parent {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    background: #ffff00;
}

优点

兼容性好（支持 IE8，以下版本需要调整页面结构至 table）

absolute + transform

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ffff00;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

优点

绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。

缺点

transform 为 CSS3 属性，有兼容性问题。

flex + align-items

.parent {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    width: 200px;
    height: 200px;
    background: #ffff00;
}

优点

只需设置父节点属性，无需设置子元素

缺点

有兼容性问题

水平与垂直居中

水平与垂直居中的一般性布局在另一篇文章中有过总结，可以作为参考学习。

子元素相对于父元素水平垂直居中且其（子元素与父元素）高度宽度均可变。

inline-block + text-align + table-cell + vertical-align

.parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 300px; /*宽度和高度均可变*/
    height: 300px;
    background: #ffff00;
}

.child {
    display: inline-block;
}

优点

兼容性好

absolute + transform

.parent {
    position: relative;
    width: 300px; /*宽度和高度均可变*/
    height: 300px;
    background: #ffff00;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

优点

绝对定位脱离文档流，不会对后续元素的布局造成影响。

缺点

transform 为 CSS3 属性，有兼容性问题。

flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px; /*宽度和高度均可变*/
    height: 300px;
    background: #ffff00;
}

优点

只需设置父节点属性，无需设置子元素

多列布局

多列布局在网页中很常见（例如两列布局），多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应，还有等分布局等。

一列定宽，一列自适应

除了另外声明，HTML结构为以下内容：


    
        left
    
    
        right
        right

float + margin

p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    margin-left: 100px;
    background: #c7254e;
}

float + margin + (fix) 改造版


    
        left
    
    
        
            right
            right
        
    


p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
    position: relative;
}

.right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
}

.right {
    margin-left: 100px;
    background: #c7254e;
}

NOTE：此方法不会存在 IE6 中3像素的 BUG，但 .left 不可选择，需要设置 .left {position: relative} 来提高层级。此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。

float + overflow

p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    background: #c7254e;
}

设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式化文本。 BFC 中的内容与外界的元素是隔离的。

overflow: hidden; 除了隐藏溢出内容外，还具有清除浮动的功能，具体实现是触发 BFC 或者 IFC，而这也是很常用的方法。overflow: hidden;对与父元素显示区域重叠部分进行切割，只在 BFC 区域显示，从而实现浮动的清除。

clear: both; 是经典的清除浮动方法，但它与 overflow: hidden;有很大的区别。clear: both;是清除父元素同一侧的浮动元素，即同一侧不允许存在其他浮动内容，子元素需换行显示。如果布局目标是同侧有其他浮动元素，可以选择 overflow: hidden;。这个特性称为浮动元素闭合。如果有对这个特性感兴趣或者研究透彻的朋友请多多指教，这个在解决高度坍塌、触发BFC等方面应用广泛，且非常实用。

table

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.left {
    display: table-cell;
    width: 100px;
    background: #ffff00;
}

.right {
    display: table-cell;
    /*宽度为剩余宽度*/
    background: #c7254e;
}

table 的显示特性为每列的单元格宽度和一定等于表格宽度。 table-layout: fixed; 可加速渲染，也是设定布局优先。

NOTE：table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。

flex

.parent {
    display: flex;
}

.left {
    width: 100px;
    background: #ffff00;
}

.right {
    flex: 1;
    background: #c7254e;
}

NOTE：flex-item 默认为内容宽度。

缺点

低版本浏览器兼容问题。

性能问题，只适合小范围布局。

两列定宽，一列自适应

除了另外声明，HTML结构为以下内容：


    
        left
    
    
        center
    
    
        right
        right

p {
    margin: 0; /*清掉 p 标签的默认margin*/
}

.left, .center {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    /*等价于*/
    /*flex: 1 1 0;*/
    background: #c7254e;
}

多列定宽的实现可以根据单列定宽的例子进行修改与实现。

一列不定宽 + 一列自适应

不定宽的宽度为内容决定，下面为可以实现此效果的方法：

float + overflow，此方法在 IE6 中有兼容性问题

table，此方法在 IE6 中有兼容性问题

flex，此方法在 IE9及其以下版本中有兼容性问题

多列不定宽 + 一列自适应

其解决方案同一列不定宽加一列自适应相仿。

多列等分布局

除了另外声明，HTML结构为以下内容：

float

.parent {
    /*margin-left: -20px;*/
}

.column {
    float: left;
    width: 25%;
    box-sizing: border-box;
    /*padding-left: 20px;*/
    background: #c7254e;
}

NOTE：此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法结构和样式具有耦合性。

table


    
        
            1
        
        
            2
        
        
            3
        
        
            4
        
    


.parent-fix {
    /*margin-left: -20px;*/
}

.parent {
    display: table;
    width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
}

.column {
    display: table-cell;
    /*padding-left: 20px;*/
    background: #c7254e;
}

NOTE：缺点是多了文本结果

flex

.parent {
    display: flex;
}

.column {
    flex: 1;
    background: #c7254e;
}

NOTE：flex 的特性为分配剩余空间。 NOTE+：兼容性有问题。

两列等高布局

除了另外声明，HTML结构为以下内容：


    
        left
    
    
        right
        right

table

table 的特性为每列等宽，每行等高可以用于解决此需求。

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.left {
    display: table-cell;
    background: #ffff00;
}

.right {
    display: table-cell;
    background: #c7254e;
}

flex

两列布局，一列定宽，一列自适应

.parent {
    display: flex;
}

.left {
    width: 100px;
    background: #ffff00;
}

.right {
    flex: 1;
    background: #c7254e;
}

float

.parent {
    overflow: hidden;
}

.left, .right {
    padding-bottom: 99px; 
    /*此处设置 9999px 很大的值，实际满足一定大小即可*/
    margin-bottom: -99px;
}

.left {
    float: left;
    width: 100px;
    background: #ffff00;
}

.right {
    overflow: hidden;
    background: #c7254e;
}

NOTE：此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 NOTE+：此方法兼容性较好。

全屏布局

除了另外声明，HTML结构为以下内容：

定宽需求

实现方案

position 常规方案

flex CSS3 新实现

position


    
    
    
    


html, body, .parent {
    height: 100%;
    /*用于隐藏滚动条*/
    overflow: hidden;
}

.top {
    /*相对于 body 定位*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #ffff00;
}

.left {
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 50px;
    width: 200px;
    background: #c7254e;
}

.right {
    position: absolute;
    left: 200px;
    top: 100px;
    right: 0;
    bottom: 50px;
    overflow: auto;
    background: #5cb85c;
}

.bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background: #2a6496;
}

Flex

html, body, .parent {
    height: 100%;
    /*用于隐藏滚动条*/
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.parent {
    display: flex;
    flex-direction: column;
}

.top {
    height: 100px;
    background: #ffff00;
}

.bottom {
    height: 50px;
    background: #2a6496;
}

.middle {
    /*居中自适应*/
    display: flex;
    flex: 1;
    /*flex-direction: row 为默认值*/
}

.left {
    width: 200px;
    background: #c7254e;
}

.right {
    flex: 1;
    overflow: auto;
    background: #5cb85c;
}

百分比宽度需求

只需把定宽高（px 为单位的值）的实现改成百分比（%）既可。

内容自适应

只有右侧栏占据剩余位置，其余空间均需根据内容改变。所以 postion 的定位方法不适合实现此方案。下面列出了两种布局方案：

flex

grid，W3C 草案并不稳定，浏览器支持也并不理想。

flex

只有不给宽和高进行限制，即可对其中的内容做出自适应的布局。把定宽实现方案中设置了宽度和高度的部分去掉。

云服务器 GPU云服务器页面布局 html页面布局 aspx页面布局 php开发页面布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112335.html

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
微信小程序新单位rpx与自适应布局

摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...

LeviDing 2019-08-29 11:27 评论0 收藏0
微信小程序新单位rpx与自适应布局

摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...

thursday 2019-08-20 11:42 评论0 收藏0
微信小程序新单位rpx与自适应布局

摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...

Java_oldboy 2019-08-01 15:50 评论0 收藏0