几种常用的页面布局

前言

  网页布局是前端网页开发的第一步，是最最基础的部分，也是非常重要的部分。布局就是搭建网页的整体结构，好的布局不仅可以增加代码的可读性，提高开发效率，让人心中有丘壑，而且还可以提高代码的可复用性，且便于后期维护，是从事前端开发的小伙伴们需要重视的基本技能。本篇就着重介绍几种常用的页面布局方法。

居中布局

  开头先说明一下，这里的居中方案都是可以适用于父容器和子容器都既不定宽也不定高的条件下的，所以自然也可以适用于定宽和定高的条件下。

一、水平居中布局

1. 水平居中：absolute + transform: translateX(-50%)

  另外：

  • 除了transform: translateX(-50%)这种方式以外，还可以采用给子容器设置负margin值的方法实现居中（其绝对值必须为子容器宽度的一半），但前提是必须要知道子容器的宽度，也就是说子元素要定宽。

HTML:

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

CSS:

.parent {position: relative;  /* 如果不写这句，下面子元素的定位将不会是相对父级的绝对定位 */
}.child {position: absolute;left: 50%;transform: translateX(-50%);  /* 相对自身偏移-50% */
}

2. 水平居中：flex + justify content: center

  另外：

  • 除了给父容器设置justify-content:center这种方式以外，还可以采用在子容器设置margin:0 auto的方法实现居中，因为flex元素是支持margin: 0 auto的。

HTML:

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

CSS:

.parent {display: flex;  /* flex布局 */justify-content: center;
}

3. 水平居中：inline-block + text-align: center

  在使用inline-block布局时需要注意的是：

  • vertical-align属性会影响到inline-block元素，你可能会想把它的值设置为top；
  • 设置在父容器的text-align:center会继承到子容器，如果要改变子容器的text-align属性，则需要重新设置进行覆盖；
  • 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。

HTML:

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

CSS:

.parent {text-align: center;  /* text-align设置在块级元素的时候可以对里面的inline元素起作用 */
}.child {display: inline-block;
}

4. 水平居中：table + margin: 0 auto

  给子元素设置display:table属性，并且不设置宽度时，可以使其宽度由内容撑开，适合需要宽度自适应的水平居中布局。

HTML:

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

CSS:

.child {display: table;  /* table在没有对它进行宽度100%的设置的时候，它的宽度就是和内容一样宽 */margin: 0 auto;
}

5. 水平居中：table-cell + text-align: center + inline-block

  display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。td单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的。需要注意的是：

  • 与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float， position:absolute，所以，在使用display:table-cell时，与float:left或是position:absolute属性尽量要同时使用；
  • 设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

HTML:

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

CSS:

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

二、垂直居中布局

1. 垂直居中：absolute + transform: translateY(-50%)

HTML:

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

CSS:

.parent {position: relative;  /* 如果不写这句，下面子元素的定位将不会是相对父级的绝对定位 */
}.child {position: absolute;top: 50%;transform: translateY(-50%);  /* 相对自身偏移-50% */
}

2. 垂直居中：flex + align-items

  注意：如果不设置align-items:center，那么其默认值则是stretch，这时子容器将撑满父容器的高度；

HTML:

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

CSS:

.parent {display: flex;align-items: center;  /* 默认值是stretch, 即拉伸, 改为center即可居中 */
}

3. table-cell + vertical-align

  display:table-cell的属性上面的水平居中已经大致交代过了，这里再提醒一下需要注意：

  • 与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float， position:absolute，所以，在使用display:table-cell时，与float:left或是position:absolute属性尽量不要同时使用；
  • 设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

HTML:

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

CSS:

.parent {display: table-cell;vertical-align: middle;
}

三、水平方向和垂直方向同时居中布局

1. 同时居中：absolute + transform: translate(-50%, -50%)

  另外：

  • 除了transform: translate(-50%, -50%)这种方式以外，还可以采用给子容器设置负margin值的方法实现居中（其绝对值必须为子容器宽度和高度的一半），但前提是必须要知道子容器的宽度和高度，也就是子元素要定宽定高。

HTML:

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

CSS:

.parent {position: relative;  /* 如果不写这句，下面子元素的定位将不会是相对父级的绝对定位 */
}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  /* 相对自身偏移-50% */
}

2. 同时居中：inline-block + text-align: center + table-cell + vertical-align

HTML:

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

CSS:

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

3. 同时居中：flex + justify-content + align-items

HTML:

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

CSS:

.parent {display: flex;justify-content: center;align-items: center;  /* 默认值是stretch, 即拉伸, 改为center即可居中 */
}

多列布局

一、定宽 + 自适应

  left和center容器定宽，right容器自适应。

1. float + margin

HTML:

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>

CSS:

.left {float: left;width: 100px;
}.right {margin-left: 120px;  /* 多出的20px作为left容器与right容器之间的边距 */
}

2. float + overflow

HTML:

<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>

CSS:

.left, .center {float: left;width: 100px;margin-right: 20px;  /* 边距 */
}.right {overflow: hidden;  /* BFC原理 */
}

3. table

HTML:

<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>

CSS:

.parent {display: table;width: 100%;  /* 如果不设置，宽度将由内容决定 */table-layout: fixed;  /* 如果不设置，table内部子容器的宽度可能会被内容影响，即使设置了子容器的宽度也是如此 */
}.left, .center, .right {display: table-cell;
}.left, .center {width: 100px;padding-right: 20px;  /* table-cell相当于td元素，是不能设置margin的，所以用padding代替 */
}

4. flex

HTML:

<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>

CSS:

.parent {display: flex;
}.left, .center {width: 100px;margin-right: 20px;  /* 边距 */
}.right {flex: 1;  /* flex: 1 1 0%; */
}

二、不定宽 + 自适应

  left和center容器不定宽（即宽度由内容撑开），right容器自适应。

1. float + overflow

HTML:

<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>

CSS:

.left, .center {float: left;margin-right: 20px;  /* 边距 */
}.right {overflow: hidden;
}

2. table

HTML:

<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>

CSS:

.parent {display: table;width: 100%;  /* 如果不设置，宽度将由内容决定 *//* 这里不设置table-layout: fixed，因为我们需要table内部子容器的宽度由内容决定 */
}.left, .center, .right {display: table-cell;
}.left, .center {width: 0.1%;  /* table-cell的特性，内容优先 */padding-right: 20px;  /* table-cell相当于td元素，是不能设置margin的，所以用padding代替 */
}

3. flex

HTML:

<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>

CSS:

.parent {display: flex;
}.left, .center {margin-right: 20px;  /* 边距 */
}.right {flex: 1;  /* flex: 1 1 0%; */
}

三、等宽

  当父容器中有N个列时，它们的列宽相等，并且当父容器变宽（或变窄）时，这些列也要相应的变宽（或变窄）。

1. float

HTML:

<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>

CSS:

.parent {margin-left: -20px;  /* 将父容器撑开20px，但名义宽度不变，这20px是内部列与列之间的边距 */
}.column {float: left;width: 25%;  /* 由列数决定 */padding-left: 20px;  /* 列与列之间的边距 */box-sizing: border-box;  /* 意味着padding-left值被包含在25%的宽度中 */
}

2. table

HTML:

<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>

CSS:

.parent-fix {margin-left: -20px;  /* 将父容器撑开20px，但名义宽度不变，这20px是内部列与列之间的边距，但是table不能设置margin值，所以在parent外面再加一个修正用的容器 */
}.parent {display: table;width: 100%;table-layout: fixed;  /* 设置为fixed时，列宽会相等 */
}.column {display: table-cell;padding-left: 20px;  /* 列与列之间的边距 */
}

3. flex

HTML:

<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>

CSS:

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

四、等高

1. table

HTML:

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>

CSS:

.parent {display: table;width: 100%;table-layout: fixed;
}.left, .right {display: table-cell;
}.left {width: 100px;  /* 不设置也没关系 */border-right: 20px solid transparent;  /* 通过border来设置间距 */background-clip: padding-box;  /* 背景颜色默认会显示到border部分，也就是border-box，所以这里设置到padding-box */
}

2. flex

HTML:

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>

CSS:

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

3. float

  伪等高方案，只是背景颜色一样高，不推荐。

HTML:

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>

CSS:

.parent {overflow: hidden;  /* 必须 */
}.left {float: left;width: 100px;margin-right: 20px;
}.right {overflow: hidden;
}.left, .right {padding-bottom: 9999px;margin-bottom: -9999px;
}  /* 一升一降 */

转载于:https://www.cnblogs.com/hexiaobang/p/9590356.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/465064.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

物联网是互联网发展的必然趋势吗？

物联网是互联网发展的必然趋势吗？

李彦宏说&#xff0c;移动互联网的时代结束了。周鸿祎说&#xff0c;互联网下半场就要开启。那么互联网下一个超级风口&#xff0c;在物联网吗&#xff1f;所谓物联网&#xff0c;其实就是借助互联网的力量&#xff0c;实现万物互联。实际上物联网已不知不觉融入我们的生活中&a…
阅读更多...
个人收集一些程序员面试题目（一） 一起分享

个人收集一些程序员面试题目（一） 一起分享

2019独角兽企业重金招聘Python工程师标准>>> 阿里巴巴公司DBA笔试题 http://searchdatabase.techtarget.com.cn/tips/2/2535002.shtml 注:以下题目&#xff0c;可根据自己情况挑选题目作答&#xff0c;不必全部作答.您也可以就相关问题直接找负责面试人员面述而不…
阅读更多...
计算机一级考试教学设计,《全国计算机一级考试》教学设计说明.doc

计算机一级考试教学设计,《全国计算机一级考试》教学设计说明.doc

. . . . .学习参考《全国计算机一级考试》教学设计一、摘要&#xff1a;现在计算机普及程度是越来越广泛&#xff0c;社会上对计算机的应用掌握程度也越来越重视&#xff0c;本论文主要针对职业高中学生对《全国计算机一级考试》的教学&#xff0c;让职业高中学生更容易掌握知识…
阅读更多...
自适应Web主页

自适应Web主页

HTML 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>自适应主页</title>6 <link rel"stylesheet" href"test.css">7 </head>8 <body&…
阅读更多...
Linux驱动程序的数据封装

Linux驱动程序的数据封装

引言0基于ARM内核的SoC在引入设备树技术之后&#xff0c;通过设备树文件来描述不同的设备并匹配不同的驱动代码&#xff0c;使得一个kernel镜像文件可以支持多种设备。这种代码可重用的思想不仅体现在设备树文件中&#xff0c;在驱动代码中同样也有所体现。其中之一就是驱动代码…
阅读更多...
Exchange+2010实验手册

Exchange+2010实验手册

Exchange2010实验手册转载于:https://blog.51cto.com/5qqqqq/522386
阅读更多...
计算机沟通方式,雅思阅读练习：计算机改变沟通方式

计算机沟通方式,雅思阅读练习：计算机改变沟通方式

雅思考试中&#xff0c;我们可以运用一些解题方法和技巧&#xff0c;来帮助我们提高答题的准确率&#xff0c;拿到一个更高的分数。今天小编为大家分享雅思阅读练习&#xff1a;计算机改变沟通方式&#xff0c;一起来学习一下。Almost everyone with or without a computer is …
阅读更多...
解决 IE8下 vs2008 无法调试

解决 IE8下 vs2008 无法调试

最近新安装了Ie8&#xff0c;当打开vs2008 项目时发现无法调试 老是说找不到元素&#xff0c;无奈&#xff0c;&#xff0c;&#xff0c;在网上搜索了n久&#xff0c;最终搞定了&#xff0c;解决方法如下&#xff1a; 一、&#xff08;开始---运行&#xff09;热键r 打开注册表…
阅读更多...
在大公司天天调参数，感觉快废了~

在大公司天天调参数，感觉快废了~

大家好&#xff0c;我是写代码的篮球球痴最近有个同学跟我聊到&#xff0c;他自己现在从事FAE的工作&#xff0c;然后FAE也就是调调参数&#xff0c;写写寄存器&#xff0c;没有特别大的挑战&#xff0c;特别是熟悉之后&#xff0c;工作更加觉得没有意思了。做程序员的很多人&a…
阅读更多...
小小突击队为什么服务器正在维护中,4399小小突击队3月20日5:30更新维护公告！...

小小突击队为什么服务器正在维护中,4399小小突击队3月20日5:30更新维护公告！...

亲爱的各位玩家&#xff1a;《小小突击队》将于3月20日5:30-7:30进行维护更新&#xff0c;更新内容如下&#xff1a;一.英雄1.新增&#xff1a;海牙战士为了寻找幼年时走失妹妹&#xff0c;加入了小小突击队2.调整&#xff1a;龙骑士去国外旅游,水深火热&#xff0c;技能效果提…
阅读更多...
阿里云搭建wordpress生产级CMS网站实践

阿里云搭建wordpress生产级CMS网站实践

搭建cms内容站点时&#xff0c;wordpress是一个很好的选择&#xff0c;不用做任何开发就可以通过配置、插件获得丰富的功能。用docker容器技术部署运维都非常简单&#xff0c;特别是对于wordpress这种我们无需做任何开发的组件。而出于低成本考虑&#xff0c;公有云都是一个最佳…
阅读更多...
消息驱动 微服务器,消息驱动的微服务-Spring Cloud Stream整合RocketMQ

消息驱动 微服务器,消息驱动的微服务-Spring Cloud Stream整合RocketMQ

系列文章导航: Spring Cloud Alibaba微服务解决方案常用MQ产品的选择目前主流的MQ产品有kafka、RabbitMQ、ActiveMQ、RocketMQ等。在MQ选型时可以参照这篇文章选择合适的MQ产品。RocketMQ及控制台搭建RocketMQ的搭建可以参考这篇文章。RocketMQ控制台的搭建可以参考这篇文章。R…
阅读更多...
低并发编程

低并发编程

大家好&#xff0c;我是闪客&#xff0c;感谢 写代码的篮球球痴 提供的平台让我在这里给大家介绍自己&#xff0c;这是我的公众号卡片。为了防止大家看到这里就点击了返回按钮&#xff0c;我先放一张图勾引一下您。这是我公众号做的第一张动图&#xff0c;好多读者当时说被这张…
阅读更多...
Redhat的Linux产品版本AS/ES/WS的联系与区别

Redhat的Linux产品版本AS/ES/WS的联系与区别

Redhat有两大Linux产品系列&#xff0c;其一是免费的Fedora Core系列主要用于桌面版本&#xff0c;提供了较多新特性的支持。另外一个产品系列是收费的Enterprise系列&#xff0c;这个系列分成&#xff1a;AS/ES/WS等分支&#xff0c;他们都是redhat企业级Linux&#xff0c;简称…
阅读更多...
day34进程相关

day34进程相关

进程1 什么是进程 进程指的是一个正在进行/运行的程序,进程是用来描述程序执行过程的虚拟概念 进程vs程序 程序:一堆代码 进程:程序的执行的过程 进程的概念起源于操作系统,进程是操作系统最核心的概念,操作系统其它所有的概念都是围绕进程来 操作系统理论: …
阅读更多...
总结一些调试的心得，ES7243

总结一些调试的心得，ES7243

这两天在调试一个与语音ADC芯片&#xff0c;也遇到了一些问题&#xff0c;到目前位置也解决了问题&#xff0c;所以想说一下嵌入式调试的一些心得&#xff0c;如果大家在调试设备的时候遇到问题&#xff0c;可以回头来看看这篇文章&#xff0c;可能会得到一些启发。我调试的系统…
阅读更多...
电信无线网服务器是什么,怎样使用路由器共享电信天翼无线网络

电信无线网服务器是什么,怎样使用路由器共享电信天翼无线网络

准备工作&#xff1a;1.我们是四台笔记本共享&#xff1a;型号分别是联想thinkpad&#xff0c;联想非thinkpad&#xff0c;宏基&#xff0c;还有一台老爷dell(奔三 700MHZ 够老爷了吧?装的还是windows2000的系统)2. 路由器一台&#xff1a;腾达路由器&#xff0c;4孔的(TP-lin…
阅读更多...
nls_lang.sh: 114: [[: not found

nls_lang.sh: 114: [[: not found

在ubuntu 10.10桌面版上安装oracle官网下载的oracle-xe-universal_10.2.0.1-1.0_i386.deb。 安装时需要加大swap分区的大小到1G以上&#xff0c;可以用这些命令增加dd if/dev/zero of/tmpswap bs1M count200 mkswap /tmpswap swapon /tmpswap 然后配置&#xff0c;在运行/etc/…
阅读更多...
web存储机制localStorage和sessionStorage

web存储机制localStorage和sessionStorage

https://www.cnblogs.com/yaoyuqian/p/7901052.html web存储包括两种&#xff1a;sessionStorage 和 localStorage&#xff08;都是限定在文档源级别&#xff0c;非同源文档间无法共享&#xff09; 1.sessionStorage 数据放在服务器上&#xff08;IE不支持&#xff09;严格用于…
阅读更多...
“元宇宙” 是什么东西？

“元宇宙” 是什么东西？

最近元宇宙的概念很火&#xff0c;所以转发一篇文章给大家看看。每当一个新东西出来的时候&#xff0c;有的人觉得这个是个好东西&#xff0c;也有人嗤之以鼻&#xff0c;觉得这个就是用来割韭菜的。就拿比特币来说&#xff0c;比特币有什么价值&#xff1f;他的价值无非就是操…
阅读更多...
最新文章

Copyright @ 2022~2023