HTML+CSS多种布局技巧
来源：互联网 发布：星际老男孩淘宝 编辑：程序博客网 时间：2024/05/21 15:41
一、水平居中
水平居中多用于标题以及内容区域的组织形式，以下是五种实现水平居中的方法：
方法一： 使用inline-block和text-align实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（1）</title> <style> .parent{ text-align: center; } .child{ display: inline-block; height: 200px; background: green; color: white; } </style></head> <body> <div class="parent"> <div class="child"> 使用inline-block和text-align实现水平居中 </div> </div> </body></html>优点：兼容性好
缺点：需要同时设置子元素和父元素
方法二： 使用margin：0 auto来实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（2）</title> <style> .child{ margin: 0 auto; width: 300px; height: 200px; background: green; color: white; } </style></head> <body> <div class="child"> 使用margin：0 auto来实现水平居中 </div> </body></html>优点：兼容性好
缺点：需要指定宽度
方法三： 使用table和margin：0 auto实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（3）</title> <style> .child{ display: table; margin: 0 auto; height: 200px; background: green; color: white; } </style></head> <body> <div class="child"> 使用table和margin：0 auto实现水平居中 </div> </body></html>优点：只需对自身进行设置
缺点：IE6、7不兼容需要调整
方法四： 使用绝对定位实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（4）</title> <style> .child{ position: absolute; left: 50%; transform: translate(-50%);/*也可使用margin-left设置盒子的一半,不过此时要设置盒子的宽度*/ height: 200px; background: green; color: white; } </style></head> <body> <div class="child"> 使用绝对定位实现水平居中 </div> </body></html>缺点：兼容性差，需IE9 及以上可用
* 方法五：* 使用flex 布局实现
1、只设置父元素
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（5-1）</title> <style> .parent{ display: flex; justify-content: center; /*设置水平方向位置，还有flex-end、flex-start等值*/ } .child{ height: 200px; background: green; color: white; } </style></head> <body> <div class="parent"> <div class="child"> 使用flex 布局实现水平居中 </div> </div> </body></html>2、父元素和子元素都需要设置
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平居中（5-2）</title> <style> .parent{ display: flex; } .child{ margin: 0 auto; height: 200px; background: green; color: white; } </style></head> <body> <div class="parent"> <div class="child"> 使用flex 布局实现水平居中 </div> </div> </body></html>缺点：兼容性差、如果进行大面积的布局可能会影响效率
二、垂直居中
方法一： 使用vertical-align: middle，由于使用它的时候对齐的基线是用行高的基线作为标记，故需要设置line-height和display：table-cell/inline-block
1、设置<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>垂直居中（1）</title> <style> .parent{ display: table-cell; vertical-align: middle; height: 500px; } .child{ background: green; color: white; } </style></head> <body> <div class="parent"> <div class="child"> 使用vertical-align: middle实现垂直居中 </div> </div> </body></html>* 方法二：* 使用绝对定位
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>垂直居中（2）</title> <style> .child{ position: absolute; top: 50%; transform: translate(0,-50%); background: green; color: white; } </style></head> <body> <div class="child"> 使用vertical-align: middle实现垂直居中 </div> </body></html>方法三： 使用flex实现，用它实现垂直居中的时候需要给父元素一个高度
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>垂直居中（3）</title> <style> html,body,.parent{ height: 100%; //parent的100%高度是根据父元素body>html 的高度设定的，也可以直接设定具体的高度值，不用百分比 } .parent{ display: flex; align-items: center; /*定义body的元素垂直居中*/ } .child{ width: 300px; height: 300px; background: green; color: white; } </style></head> <body> <div class="parent"> <div class="child"> 使用flex实现垂直居中 </div> </div> </body></html>三、水平垂直全部居中
方法一：利用绝对定位实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平垂直居中（1）</title> <style> .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: green; color: white; } </style></head> <body> <div class="child"> 使用flex实现水平垂直居中 </div> </body></html>方法二： 使用flex实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平垂直居中（2）</title> <style> .parent{ display: flex; justify-content: center; align-items: center; height: 800px; } .child{ background: green; color: white; } </style></head> <body> <div class="parent"> <div class="child"> 使用flex实现水平垂直居中 </div> </div> </body></html>四、多列布局
情况一： 左列定宽，右列自适应
1、使用float+margin-left实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左列定宽，右列自适应</title> <style> .left{ float: left; width: 200px; height: 500px; background: red; } .right{ margin-left: 210px; height: 500px; background: green; } </style></head> <body> <div class="left"> 定宽 </div> <div class="right"> 自适应 </div> </body></html>2、使用float+overflow实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左定宽，右自适应（2）</title> <style> .left{ width: 200px; height: 500px; float: left; background: red; } .right{ overflow: hidden; height: 500px; background: green; } </style></head> <body> <div class="left"> 定宽 </div> <div class="right"> 自适应 </div> </body></html>3、使用flex实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左定宽，右自适应（3）</title> <style> .parent{ display: flex; } .left{ width: 200px; height: 500px; background: red; } .right{ flex: 1; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="right"> 自适应 </div> </div> </body></html>4、使用table实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左列自适应，右列定宽</title> <style> .parent{ display: table; table-layout: fixed; width: 100%; } .left{ display: table-cell; width: 200px; height: 500px; background: red; } .right{ display: table-cell; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="right"> 自适应 </div> </div> </body></html>情况二： 右列定宽，左列自适应
1、使用float+margin-right 实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左列自适应，右列定宽</title> <style> .left{ float: left; width: 100%; height: 500px; margin-right: -210px; background: red; } .right{ float: right; width: 200px; height: 500px; background: green; } </style></head> <body> <div class="left"> 自适应 </div> <div class="right"> 定宽 </div> </body></html>2、使用flex实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左列自适应，右列定宽（2）</title> <style> .parent{ display: flex; } .left{ flex: 1; /*margin-right: 20px;*/ height: 500px; background: red; } .right{ width: 200px; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 自适应 </div> <div class="right"> 定宽 </div> </div> </body></html>3、使用table实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左列自适应，右列定宽</title> <style> .parent{ display: table; table-layout: fixed; width: 100%; } .left{ display: table-cell; height: 500px; background: red; } .right{ display: table-cell; width: 200px; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="right"> 自适应 </div> </div> </body></html>情况三： 两列定宽，一列自适应
1、使用float+margin实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左列自适应，右列定宽（1）</title> <style> .left{ width: 200px; float: left; background: red; } .center{ width: 200px; float: left; margin-left: 10px; background: orangered; } .right{ margin-left: 420px; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="center"> 定宽 </div> <div class="right"> 自适应 </div> </div> </body></html>2、使用float+overflow实现
<html><head> <meta charset="UTF-8"> <title>两列定宽，一列自适应（2）</title> <style> .left{ width: 200px; float: left; background: red; } .center{ width: 200px; float: left; margin-left: 10px; background: orangered; } .right{ overflow: hidden; margin-left: 420px; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="center"> 定宽 </div> <div class="right"> 自适应 </div> </div> </body></html>3、使用table实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>两列定宽，一列自适应</title> <style> .parent{ display: table; table-layout: fixed; width: 100%; } .left{ display: table-cell; width: 200px; background: red; } .center{ display: table-cell; width: 200px; margin-left: 10px; background: teal; } .right{ display: table-cell; margin-left: 420px; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="center"> 定宽 </div> <div class="right"> 自适应 </div> </div> </body></html>4、使用flex实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>两列定宽，一列自适应</title> <style> .parent{ display: flex; } .left{ width: 200px; background: red; } .center{ width: 200px; background: teal; } .right{ flex: 1; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="center"> 定宽 </div> <div class="right"> 自适应 </div> </div> </body></html>情况四： 两侧定宽，中间自适应
1、使用float+margin实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>两侧定宽，中间自适应（1）</title> <style> .left{ float: left; width: 200px; background: red; } .center{ float: left; margin-right: -400px; width: 100%; background: teal; } .right{ float: right; width: 200px; background: green; } </style></head> <body> <div class="left"> 定宽 </div> <div class="center"> 自适应 </div> <div class="right"> 定宽 </div> </body></html>2、使用table实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>两侧定宽，中间自适应（2）</title> <style> .parent{ display: table; table-layout: fixed; width: 100%; } .left{ display: table-cell; width: 200px; background: red; } .center{ display: table-cell; flex: 1; background: teal; } .right{ display: table-cell; width: 200px; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="center"> 自适应 </div> <div class="right"> 定宽 </div> </div> </body></html>3、使用flex实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>两侧定宽，中间自适应（3）</title> <style> .parent{ display: flex; } .left{ width: 200px; background: red; } .center{ flex: 1; background: teal; } .right{ width: 200px; background: green; } </style></head> <body> <div class="parent"> <div class="left"> 定宽 </div> <div class="center"> 自适应 </div> <div class="right"> 定宽 </div> </div> </body></html>情况五： 多列等分布局
1、使用float实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>多列等分布局（1）</title> <style> .column{ float: left; width: 20%; margin-left: 10px; text-align: center; background: red; } </style></head><body> <div class="column"> 1 </div> <div class="column"> 2 </div> <div class="column"> 3 </div> <div class="column"> 4 </div> </body></html>2、使用table实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>多列等分布局（2）</title> <style> .parent{ display: table; table-layout: fixed; width: 100%; } .column{ display: table-cell; margin-left: 10px; text-align: center; background: red; } </style></head><body> <div class="parent"> <div class="column"> 1 </div> <div class="column"> 2 </div> <div class="column"> 3 </div> <div class="column"> 4 </div> </div> </body></html>3、使用flex实现
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>多列等分布局（3）</title> <style> .parent{ display: flex; } .column{ flex: 1; background: red; } .column+.column{ margin-left:20px; } </style></head><body> <div class="parent"> <div class="column"> 1 </div> <div class="column"> 2 </div> <div class="column"> 3 </div> <div class="column"> 4 </div> </div> </body></html>情况六： 九宫格布局
1、使用flex实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>左列自适应，右列定宽</title> <style> .parent{ display:flex; flex-direction:column; } .row{ height:100px; display:flex; } .item{ width:100px; background:red; } </style> </head> <body> <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> </body></html>阅读全文
1 0
- HTML+CSS多种布局技巧
- html +css 布局技巧
- Html与CSS布局技巧
- Html与CSS布局技巧
- Html和CSS布局技巧
- html+css网页布局技巧积累
- 史上最全HTML与CSS布局技巧
- 史上最全Html和CSS布局技巧
- HTML与CSS布局技巧总结
- HTML与CSS布局技巧总结
- 史上最全Html与CSS布局技巧
- 史上最全Html和CSS布局技巧
- 史上最全Html与CSS布局技巧
- HTML与CSS布局技巧总结
- 史上最全Html和CSS布局技巧
- 史上最全Html和CSS布局技巧
- 史上最全Html和CSS布局技巧
- 史上最全Html和CSS布局技巧
- 小白学tkinter(事件之（事件绑定）)
- WordPress版微信小程序开发系列(一)：WordPress REST API
- oracle基础知识
- Linux系统中，main函数的执行过程
- IOS JS调起APP
- HTML+CSS多种布局技巧
- POJ.1830 开关问题 (高斯消元)
- 获取checkBox value值，并将其文字放入指定span里
- 信息质量的属性相关知识点
- android webview 加载网页显示不完整解决办法
- win7操作系统下wifi共享
- Eclipse的Servers视图中无法添加Tomcat6/Tomcat7
- python 读取百度天气并显示
- 国外不错的模板素材网站
