HTML PC端常见布局

网页布局技巧

最新推荐文章于 2023-03-26 23:45:45 发布

转载最新推荐文章于 2023-03-26 23:45:45 发布 · 1w 阅读

文章标签：

#html

web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了多种网页布局技术，包括单列布局、多列布局和九宫格布局等，并详细阐述了如何实现水平居中、垂直居中及混合居中等效果。

PC端常见的布局技术:
1. margin:0 auto ; 自动居中
2. text-align /vertical-align 和line-height
3. float:left/right +overflow:hidden 浮动
4. display:table/table-cell /inline-block 通过转换元素的属性来实现布局
5. 固定定位\相对定位\绝对定位及配合z-index 来实现布局
6. CSS3新特性:flex 弹性布局
7. 响应式布局:viewport +” width=width-device ” +后边的媒体查询技术
8. 框架:bootstrap 的栅栏布局

以下文章摘自：https://segmentfault.com/a/1190000003931851

一、单列布局

1.1 水平居中

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）
① 使用inline-block 和text-align实现

 .parent{text-align:center;}
 .child{display:inline-block;}

② 使用margin:0 auto来实现

 .child {width:200px;margin:0 auto;} 要指定宽度

③使用table实现

.child{display:table;margin:0 auto;}  IE6，7 需要调整结构

④使用绝对定位实现

.parent {position:relative;}
.child {position:absolute;left:50%;transform:translate(-50%);} IE9以上才能用

⑤用flex布局实现

.parent{display:flex;justify-content:center;}
或者
.parent{display:flex;}
.child{margin:0 auto;}

1.2 垂直居中

① vertical-align 通常用于table 的单元格或者inline inline-block元素。

 /*第一种方法*/
 .parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

② 用绝对定位实现

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

③ 用flex 实现

.parent{display:flex;align-items:center;}

1.3 水平垂直全部居中

①用vertical-align text-align inline-block实现

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}

② 用绝对定位实现

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

③ 用flex实现

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

二、多列布局

2.1 左列定宽，右列自适应

该布局方式非常常见，适用于定宽的一侧常为导航，自适应的一侧为内容的布局。(下面例子,左右列默认设置有高度)

① 利用float+margin 实现

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

② 利用float+margin(fix)实现
这方法需先更改标签结构

<div class="parent">
    <div class="left"></div>
    <div class="right-fix">
        <div class="right"></div>
    </div>
</div>

样式:

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

③ 使用float+overflow实现

.left{width:100px;float:left;}
.right{overfloat:hidden;}

④ 使用table实现, 通过表格内单元格自动排列的特性来实现

.parent{display: table;table-layout: fixed;width: 100%;}
.left{width:100px;}
.right,.left{display:table-cell;}

⑤ 用flex实现

.parent{display:flex;}
.left{width:100px;}
.right:{flex:1;}

2.2 右列定宽,左列自适应

 方法略

2.3 三列,其中两列定宽,一列自适应

2.3.1 左中两列定宽,右侧自适应

① 利用float+margin实现

.left,.center{float:left;width:100px;}
.right{margin-left:200px;}

② 用float+overflow实现

.left,.center{float:left;width:100px;}
.right{overflow:hidden;}  /*overflow 可以去除浮动的影响*/

③ 利用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left,.center.right{display:table-cell;}
.left,.right{width:100px;}

④ 用flex 实现

.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}

2.3.2 两侧定宽,中栏自适应

① 用float+margin实现

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

② 用table 实现

.parent{width:100%;display:table;table-layout:fixed;}
.left,.center,.right{display:table-cell;}
.left,.right{width:100px;}

③ 用flex实现

.parent{display:flex;}
.left,right{width:100px;}
.center{flex:1;}

2.4 一列不定宽,一列自适应

① 用float+overflow实现

.left{float:left;}
.right{overflow:hidden;}

② 用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:0.1%;}
.left,.right{display:table-cell;}

③ 用flex 实现

.parent{display:flex;}
.right{flex:1;}

2.5 多列等分布局

假定为4列等分布局,结构如下: 前提条件:.parent 的宽为100%,高假设为100px;第一个div 和最后一个div需要靠边,两个div之间的距离为20px;

 <div class="parent"  width="100%" height="100">
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>

① 用float实现

.parent{margin-left:-20px;} /*处理第一个div靠边的问题*/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

② 用table实现

.parent-fix{margin-left:-20px;} /*处理第一个div靠边的问题*/
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}

③ 用flex实现

.parent{display:flex;}
.column{flex:1;}
.column+.column{margin-left:20px;}

三九宫格布局

例子:
① 用float实现

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
    <div class="child"></div><div class="child"></div><div class="child"></div>
    <div class="child"></div><div class="child"></div><div class="child"></div>
</div>

.child{ float:left;width:33.3%;height:33.3%;box-sizing: border-box;}

② 用table实现

<div class="parent">
        <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
        <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
        <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
    </div>

.parent{display:table;table-layout:fixed;width:100%;}
.row{display:table-row;}
.item{display:table-cell;width:33.3%;height:33.3%;}

③ 用flex 实现

.parent{display:flex;flex-drection:column; width:500px;height:500px;}/*需要知道参考div的宽高*/
.row{height:33.3%;display:flex;}
.item{width:33.3%;background:red;}