浅谈CSS三栏布局的N种实现
网站建设 2023-01-28 21:38www.1681989.com免费网站
三栏布局页面分为左中右三部分。左右固定,中间部分自适应。
1. 绝对定位法
这里的绝对定位是指对左右部分进行绝对定位。
HTML结构。
<div class="left">Left</div> <div class="ma">Ma</div> <div class="right">Right</div>
代码。
//简单的进行CSS reset body,html{ height:100%; paddg: 0px; marg:0px; } //左右绝对定位 .left,.right{ position: absolute; :0px; background: red; height:100%; } .left{ left:0; width:100px; } .right{ right:0; width:200px; } //中间使用marg空出左右元素所占据的空间 .ma{ marg:0px 200px 0px 100px; height:100%; background: blue; } // 上述的高度可以不必进行设置,用内容撑开元素高度即可。
height:100%
高度由内容撑开
这种方法有一个弊端,就是如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
中间栏内嵌一个宽度为200的span元素,发生重叠
2. 圣杯布局
3. 双飞翼布局
4. 自身浮动法
左栏左浮动,右栏右浮动,中间栏放
DOM结构
<body> <div class="left"></div> <div class="right"></div> <div class="ma"></div> </body>
样式
.left { background: red; float: left; width: 150px; } .right { background: red; float: right; width: 200px; } .ma { background: pk; marg: 0 200px 0 150px; }
效果
这种方式需要注意三个div的顺序,左右两栏的顺序不分先后,中间一栏必须放在。
优点是代码足够简洁与高效,缺点是中间主体存在克星,即clear:both属性。如果要使用此方法,需避免明显的clear样式,且主要内容无法最先加载,当页面内容较多时会影响用户体验。
5. flex布局
DOM结构
<div class="contaer"> <div class="left">Left</div> <div class="ma">Ma</div> <div class="right">Right</div> </div>
样式
.contaer { display: flex; } .ma { flex-grow: 1; height: 300px; background-color: red; } .left { order: -1; flex: 0 1 200px; marg-right: 20px; height: 300px; background-color: blue; } .right { flex: 0 1 100px; marg-left: 20px; height: 300px; background-color: green; }
效果
6. table布局
DOM结构
<div class="contaer"> <div class="left"></div> <div class="ma"></div> <div class="right"></div> </div>
样式
.contaer { display: table; width: 100%; } .left, .ma, .right { display: table-cell; } .left { width: 200px; height: 300px; background-color: red; } .ma { background-color: blue; } .right { width: 100px; height: 300px; background-color: green; }
缺点无法设置栏间距
End
差不多了网上的几种主流方法,有的太小众的方法就没有整理。
CSS3的flex教程还是得好好看一看。
然后还有浮动啊定位啊负边距啊什么的,要深入研究的话估计也是很长的学习笔记。
CSS真是一门玄学。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
网站设计
- 德昌优化关键词排名推广 提升在线曝光率的有效
- 2021上海高端网站设计哪家好
- 所谓的域名估价是怎么做的 有什么方法
- 怎么维护seo关键词排名 元宝分享一些技巧
- 肃宁SEO 提升您网站可见性的最佳策略
- 国际域名注册会有什么要求 新手有什么需要掌握
- 域名更换注意什么 新手如何更换域名
- 网站防护可以采用高防CDN吗
- 凡科模板建站的优势有哪些
- 注册域名的意义 域名注册为什么那么火爆
- 南丹百度关键词SEO 全面提升网站可见性的指南
- 新手如何买网址域名 买网址域名有哪些必备知识
- 企业如何选择网络推广公司
- 美图跨界投资HBN颜究所 精品双拼域名meitu.com更亮
- iplc机场专线网络是什么 有什么优势特点
- black域名怎么样 如何申请black域名