Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局

最新推荐文章于 2021-06-16 02:07:14 发布
最新推荐文章于 2021-06-16 02:07:14 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Css学习总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012562943/article/details/53256487
版权

居中布局

  1. 水平居中

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

  • inline-block + text-align

<div class="parent">

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

</div>

<style>

.child {

display: inline-block;

}

.parent {

text-align: center;

}

</style>

优点

  • 兼容性佳（甚至可以兼容 IE 6 和 IE 7）

  • table + margin

<div class="parent">

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

</div>

<style>

.child {

display: table;

margin: 0 auto;

}

</style>

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

优点

  • 无需设置父元素样式 （支持 IE 8 及其以上版本）

NOTE：兼容 IE 8 一下版本需要调整为 <table> 的结果

  • absolute + transform

<div class="parent">

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

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%;

transform: translateX(-50%);

}

</style>

优点

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

缺点

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

  • flex + justify-content

<div class="parent">

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

</div>

<style>

.parent {

display: flex;

justify-content: center;

}

/* 或者下面的方法，可以达到一样的效果 */

.parent {

display: flex;

}

.child {

margin: 0 auto;

}

</style>

优点

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

缺点

  • 有兼容性问题

垂直居中

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

  • table-cell + vertical-align

<div class="parent">

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

</div>

<style>

.parent {

display: table-cell;

vertical-align: middle;

}

</style>

优点

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

  • absolute + transform

<div class="parent">

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

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

</style>

优点

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

缺点

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

  • flex + align-items

<div class="parent">

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

</div>

<style>

.parent {

display: flex;

align-items: center;

}

</style>

优点

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

缺点

  • 有兼容性问题

水平与垂直居中

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

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

<div class="parent">

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

</div>

<style>

.parent {

text-align: center;

display: table-cell;

vertical-align: middle;

}

.child {

display: inline-block;

}

</style>

优点

  • 兼容性好

  • absolute + transform

<div class="parent">

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

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

</style>

优点

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

缺点

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

  • flex + justify-content + align-items

<div class="parent">

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

</div>

<style>

.parent {

display: flex;

justify-content: center;

align-items: center;

}

</style>

优点

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

缺点

  • 有兼容性问题

多列布局

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

  1. 一列定宽，一列自适应

  • float + margin

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right {

margin-left: 100px

/*间距可再加入 margin-left */

}

</style>

NOTE：IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px。

  • float + margin + (fix) 改造版

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right-fix">

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right-fix {

float: right;

width: 100%;

margin-left: -100px;

}

.right {

margin-left: 100px

/*间距可再加入 margin-left */

}

</style>

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

  • float + overflow

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right {

overflow: hidden;

}

</style>

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

优点

  • 样式简单

缺点

  • 不支持 IE 6

  • table

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.parent {

display: table;

width: 100%;

table-layout: fixed;

}

.left {

display: table-cell;

width: 100px;

}

.right {

display: table-cell;

/*宽度为剩余宽度*/

}

</style>

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

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

flex

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.parent {

display: flex;

}

.left {

width: 100px;

margin-left: 20px;

}

.right {

flex: 1;

/*等价于*/

/*flex: 1 1 0;*/

}

</style>

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

缺点

  • 低版本浏览器兼容问题

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

两列定宽，一列自适应

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="center">

<p>center<p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.left, .center {

float: left;

width: 100px;

margin-right: 20px;

}

.right {

overflow: hidden;

/*等价于*/

/*flex: 1 1 0;*/

}

</style>

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

一列不定宽加一列自适应

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

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

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

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

多列不定宽加一列自适应

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

多列等分布局

每一列的宽度和间距均相等，下面为多列等分布局的布局特定。

父容器宽度为 C，C = W * N + G * N - G => C + G = (W + G) * N。

  • float

<div class="parent">

<div class="column">

<p>1</p>

</div>

<div class="column">

<p>2</p>

</div>

<div class="column">

<p>3</p>

</div>

<div class="column">

<p>4</p>

</div>

</div>

<style media="screen">

.parent {

margin-left: -20px;

}

.column {

float: left;

width: 25%;

padding-left: 20px;

box-sizing: border-box;

}

</style>

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

  • table

<div class='parent-fix'>

<div class="parent">

<div class="column">

<p>1</p>

</div>

<div class="column">

<p>2</p>

</div>

<div class="column">

<p>3</p>

</div>

<div class="column">

<p>4</p>

</div>

</div>

</div>

<style media="screen">

.parent-fix {

margin-left: -20px;

}

.parent {

display: table;

width: 100%;

/*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/

table-layout: fixed;

}

.column {

display: table-cell;

padding-left: 20px;

}

</style>

NOTE：缺点是多了文本结果

  • flex

<div class="parent">

<div class="column">

<p>1</p>

</div>

<div class="column">

<p>2</p>

</div>

<div class="column">

<p>3</p>

</div>

<div class="column">

<p>4</p>

</div>

</div>

<style media="screen">

.parent {

display: flex;

}

.column {

/*等价于 flex: 1 1 0;*/

flex: 1;

}

.column+.column {

margin-left: 20px;

}

</style>

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

  • table

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

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.parent {

display: table;

width: 100%;

table-layout: fixed;

}

.left {

display: table-cell;

width: 100px;

}

.right {

display: table-cell;

/*宽度为剩余宽度*/

}

</style>

  • flex

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.parent {

display: flex;

}

.left {

width: 100px;

margin-left: 20px;

}

.right {

flex: 1;

/*等价于*/

/*flex: 1 1 0;*/

}

</style>

NOTE：flex 默认的 align-items 的值为 stretch。

  • float

<div class="parent">

<div class="left">

<p>left</p>

</div>

<div class="right">

<p>right</p>

<p>right</p>

</div>

</div>

<style>

.parent {

overflow: hidden;

}

.left,

.right {

padding-bottom: 9999px;

margin-bottom: -9999px;

}

.left {

float: left;

width: 100px;

margin-right: 20px;

}

.right {

overflow: hidden;

}

</style>

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

全屏布局

例如管理系统，监控与统计平台均广泛的使用全屏布局。

定宽需求

实现方案

  • Position 常规方案

  • Flex CSS3 新实现

Position

<div class="parent">

<div class="top"></div>

<div class="left"></div>

<div class="right">

/*辅助结构用于滚动*/

<div class="inner"></div>

</div>

<div class="bottom"></div>

</div>

<style>

html,

body,

.parent {

height: 100%;

/*用于隐藏滚动条*/

overflo: hidden;

}

.top {

/*相对于 body 定位*/

position: absolute;

top: 0;

left: 0;

right: 0;

height: 100px;

}

.left {

position: absolute;

left: 0;

top: 100px;

bottom: 50px;

width: 200px;

}

.right {

position: absolute;

left: 200px;

right: 0;

top: 100px;

bottom: 50px;

overflow: auto;

}

.right .inner {

/*此样式为演示所有*/

min-height: 1000px;

}

.bottom {

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 50px;

}

</style>

Position 兼容

此方法不支持 IE6 可以使用下面的方法解决兼容问题。

<div class="g-hd"></div>

<div class="g-sd"></div>

<div class="g-mn"></div>

<div class="g-ft"></div>

<style>

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

}

html {

_height: auto;

_padding: 100px 0 50px;

}

.g-hd,

.g-sd,

.g-mn,

.g-ft {

position: absolute;

left: 0;

}

.g-hd,

.g-ft {

width: 100%;

}

.g-sd,

.g-mn {

top: 100px;

bottom: 50px;

_height: 100%;

overflow: auto;

}

.g-hd {

top: 0;

height: 100px;

}

.g-sd {

width: 300px;

}

.g-mn {

_position: relative;

left: 300px;

right: 0;

_top: 0;

_left: 0;

_margin-left: 300px;

}

.g-ft {

bottom: 0;

height: 50px;

}

</style>

Flex

<div class="parent">

<div class="top"></div>

<div class="middle">

<div class="left"></div>

<div class="right">

<div class="inner"></div>

</div>

</div>

<div class="bottom"></div>

</div>

<style media="screen">

html,

body,

parent {

height: 100%;

overflow: hidden;

}

.parent {

display: flex;

flex-direction: column;

}

.top {

height: 100px;

}

.bottom {

height: 50px;

}

.middle {

// 居中自适应

flex: 1;

display: flex;

/*flex-direction: row 为默认值*/

}

.left {

width: 200px;

}

.right {

flex: 1;

overflow: auto;

}

.right .inner {

min-height: 1000px;

}

</style>

Flex 兼容性

CSS3 中的新概念所有 IE9 及其也行版本都不兼容。

百分比宽度需求

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

内容自适应

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

  • Flex

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

Flex

只有不为宽高做出限制，既可对其中的内容做出自适应的布局。

<div class="parent">

<div class="top"></div>

<div class="middle">

<div class="left"></div>

<div class="right">

<div class="inner"></div>

</div>

</div>

<div class="bottom"></div>

</div>

<style media="screen">

html,

body,

parent {

height: 100%;

overflow: hidden;

}

.parent {

display: flex;

flex-direction: column;

}

.middle {

// 居中自适应

flex: 1;

display: flex;

/*flex-direction: row 为默认值*/

}

.right {

flex: 1;

overflow: auto;

}

.right .inner {

min-height: 1000px;

}

</style>

方案比较

方案兼容性性能自适应
Position好好部分自适应
Flex较差差可自适应
Grid差较好可自适应
科技D人生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DIV+CSS 全屏垂直居中的一个办法
09-25
全屏垂直居中的一个办法 DIV+CSS , 这个方面有一点不好， 就是不能自动适应，必须把高和宽写死！
Div+CSS - 简单布局
晓宇博客
06-05 6494
页面的布局 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 DIV结构如下： │body {}/这是一个HTML元素，具体我就不说明了/ └#Container {}/页面层容器/ ├#Header {}/页面头部/ ├#PageBody {}/页面主体/ │├#Sidebar {}/侧边栏/ │└#Mai...
CSS:层叠样式表（三）【DIV网页布局和定位】
impact_factor的博客
04-25 515
DIV网页布局和定位一、DIV+CSS进行网页布局1、网页布局的目的：2、如何布局：3、页面元素的定位机制：(1)流式布局：(2)浮动(float)：(3)绝对定位(position:absolute)：(4)相对定位(position:relative):4、布局中的常用属性：(1)浮动属性(float)：(2)清除属性(clear):(3)溢出属性(overflow):二、元素的定位：三、偏移量：四、层叠属性： 一、DIV+CSS进行网页布局 1、网页布局的目的： 页面结构清晰、有条理、易读 2、如何布
回顾div+css几种经典布局
不愿意做鱼的小鲸鱼の博客
02-20 689
三列布局 什么是三列布局 经典的三栏布局：左右量栏固定，中间宽度自适应 可以利用浮动，定位，fiex布局，gird布局等方法来实现 以下是几种可以实现三列布局的方法，各有优缺点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="...
DIV+CSS三种常见布局
小陈同学的博客
09-11 8388
布局一：一列固定宽度且居中 效果图如下： （图片有点小请见谅，因为要截全部） 主要代码如下： <style> .top,.banner,.main,.footer{ margin: 5px auto; background-color: silver; border: 2px dashed black; width: 70%； text-align: center; } .top,.footer{ height: 200px; line-height:
CSS+DIV布局初步
rommel1的专栏
06-07 583
最近在学习CSS+DIV布局，下面就把一个简单的例子写出来网站布局如下： 下面是index.html无标题文档 首页 博客 设计 相册 论坛 关于
全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示
06-12
全屏页面CSS+DIV上中下三行布局,兼容各浏览器中间居中显示
css遮罩全屏居中对齐的实现方式
01-19
具体代码如下所示： <style> #toastLoaderFullScreen { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; background-color: rgba(224, 38, 38, ... margin-
DIV以及图片水平垂直居中兼容多种浏览器
09-22
纯css完美地解决图片以及div垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari具体实现css 如下，感兴趣的朋友可以参考下哈
DIV+CSS布局综述——布局方式
qq_37196494的博客
08-12 298
1.用DIV将页面分块 一般页面布局的框架包括：页面容器、页面头部、页面主体和页脚几个部分，每个部分使用ID来表示 页面头部一般包括Logo及导航菜单等一些信息，页面主体主要是网页所要显示的内容、链接及广告等，页脚一般就是网站的信息、版权等内容。 2.设计各块的位置 3.用CSS将分布的DIV定位 <!DOCTYPE html> <html> <head&...
div+css实现水平/垂直/水平垂直居中超详解
BIGDgreen
11-02 5354
单个元素 水平居中 1.margin:0 auto方法 wrapper相对屏幕居中 <div class="wrapper"></div> body{ width: 100%; } .wrapper{ margin: 0 auto; width: 120px; height: 120px; background-color: purple; } ...
Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局...
weixin_33739646的博客
11-21 131
居中布局 水平居中 子元素于父元素水平居中且其（子元素与父元素）宽度均可变。 inline-block + text-align <div class="parent"> <div class="child">Demo</div> </div> <style> .child { display: in...
CSS+DIV布局
w_t_y_y的博客
10-18 1346
css+div可以实现很多复杂的布局，下面来看其中一个比较经典的布局： 我们可以把整个布局当做一个大的div，里面套着四个div，一个是头部，一个是导航栏，一个是主体（里面再分为两个div，利用浮动排成水平方向），一个是尾部。 代码如下： body{ margin: 0;/*清除浏览器自带的margin,使后面设置container的margi
css布局上下左右居中大全（一）
热门推荐
z422807的博客
04-05 1万+
本人是前端的新人，这是第一次写技术博客，各位大大，有错请指正，手中板砖尽量轻拍，我怕疼~~ 对于水平居中和垂直居中我也用过很多方法，但是有的时候管用有的时候又嗝屁不好使了。涉及到的情况很多，所以想细细的研究一番。隐隐感觉到前端的水好深~~ div class="box-wrap"> div class="box"> 我要居中
DIV+CSS左右等高布局
weixin_34233856的博客
05-04 127
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
weixin_42352842的博客
06-16 1265
制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。上中下结构，中间又分为两列的全屏自适应布局HTML代码：上中下结构，中间又分为两列的全屏自适应布局/* 全屏自适应布局 */html,body{width:100%;height:100%;overflow:hidden;margin:0;}html{_heigh...
CSS布局三种机制之定位
weixin_46575696的博客
04-23 500
定位(position) 目标 理解 能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 —— 就是用 CSS 来摆放...
css+div+position 实现网页的 基本布局 (二)（ 综合应用篇，包含轮播，二级菜单，等html相关知识点 ）
LL__Sunny的博客
12-11 1130
css+div+js+position 实现网页的相关布局与设计 综合应用篇，包含轮播，二级菜单，等html相关知识点
Div+CSS 制作三栏式页面布局（左右高度随中间内容自动调整）
田发江的专栏
05-21 3618
以下为CSS文件内容，文件名为1.css body { font: 100% 宋体, Arial, Helvetica, sans-serif; background: #666666; margin: 0px; padding: 0px; text-align: center; } #container { width: 780px; background:
css背景图片全屏显示，缩放始终水平垂直居中
最新发布
01-28
以下是两种CSS实现背景图片全屏显示并始终水平垂直居中的方法： 1. 使用background-size和background-position属性： ```css body { background-image: url(images/background-photo.jpg); background-repeat: no...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

科技D人生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值