CSS实现经典的三栏布局
实现效果: 左右栏定宽,中间栏自适应 (有时候是固定高度)
1 . 绝对定位布局:position + margin
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
<div class="main">中</div>
</div>
body,html{
height: 100%;
padding:;
margin:;
overflow: hidden;
}
/*左右进行绝对定位*/
.left,.right{
position: absolute;
height:100%;
top:;
}
.left{
left:;
width: 100px;
background: red;
}
.right{
right:;
width: 100px;
background: blue;
}
/*中间用margin空出左右元素所占的空间*/
.main{
height:100%;
margin: 0 100px 100px 0; /* 也可让 position的 left和right分别为100px;*/
background: yellow;
}
缺点: 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况
2 . 浮动布局: float + margin
方法类似 position, 改成 float: left 和 float: right即可
.left {
float: left;
} .right {
float: right;
} .main {
margin: 0 100px; // 如不设置margin, main部分将会占满整个父容器
}
3 . flex布局
.container {
display: flex;
} .main {
flex:;
}
4 . table 布局
原理: 将父容器当作表格,子容器当作表格的单元格。
.container {
display: table;
} .container > div {
display: table-cell;
}
5 . grid网格布局
父容器设置为网格,网格的子元素行高rows为100px; 网格子元素列宽分别为 100px auto 100px;
.container {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px auto 100px;
}
6. 圣杯布局 (想象成圣杯的主体和两只耳朵)
圣杯布局是2006年提出的布局模型概念,在国内由淘宝UED工程师改进并传播, 布局要求:
1 ) 三列布局, 中间宽度自适应,两边定宽
2 ) 中间栏要在浏览器中优先渲染
3 ) 允许任意列的高度最高
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
padding: 0 150px 0 100px;
}
.left, .main, .right {
position: relative;
min-height: 100px;
float: left;
}
.left {
left: -100px;
margin-left: -100%;
background: green;
width: 100px;
}
.right {
right: -150px;
margin-left: -150px;
background-color: red;
width: 100px;
}
.main {
background-color: blue;
width: 100%;
}
思路: 圣杯布局用到了浮动float、负边距、相对定位relative,不添加额外标签
1 . 父容器设置内边距,供两边子容器占位 padding: 0 100px 0 150px;
2 . 所有子容器向左浮动 float: left
3 . 设置左右子容器的负外边距,使所有子容器同一行 .left { margin-left: -100%} .right {margin-left: -150px;} , 此时会有部分重叠
4 . 使用相对定位分别移动左右子容器到父容器的左右内边距留白部分 position: relative; left: -100px; / position: relative; right: -150px;
7. 双飞翼布局(想象成鸟的身体和两只翅膀)
1 ) 双飞翼布局是对圣杯布局基础上进行修改 , 将原本的内边距padding 留白改成在自适应栏内部新增DOM节点, 并设置其外边距margin
2 ) 然后再对左右栏的左外边距设置为负值。比圣杯布局少了position相对定位
3 ) 相比圣杯布局, 中间栏内容不会被“遮挡”, 圣杯布局使用中间栏的padding给左右栏占位,双飞翼布局使用中间栏子元素的margin给左右栏占位
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.left, .main, .right {
float: left;
min-height: 100px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 100px;
} .right {
margin-left: -150px;
background-color: red;
width: 150px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 150px 0 100px;
}
基本思路已经理清楚,可以在实践中看效果。
CSS实现经典的三栏布局的更多相关文章
- html5 css练习,弹性三栏布局
*{ margin: 0; padding: 0;} body,html{ width: 100%; height: 100%; font: bold 24px ...
- CSS布局——三栏布局
说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- ccs之经典布局(二)(两栏,三栏布局)
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
随机推荐
- KM算法小结
最近有一个需求,主要内容如下: APP一般刷新一次,会返回6个Item(6可能会变),每个Item都要展示一个广告,其中每个Item会发送一个请求,返回的结果是一个广告数组,比如[ad1, ad2, ...
- 3.贝叶斯网络表示(The Bayesian Network Representation)
对于一个n随机变量的联合分布,一般需要2**n-1个参数来表示这个分布.但是,我们可以通过随机变量之间的独立性,减少参数的个数. naive Beyes model: Bayesian Network ...
- c++ 异常 discards qualifiers 丢弃
src/feedbackservice.cpp:76: error: passing `const ps::spider::urlreceiver::entry::ConfigManager' as ...
- 深入理解String类详解
1.Stringstr = "eee" 和String str = new String("eee")的区别 先看一小段代码, 1 public static ...
- javascript: 类、方法、原型
// 类.方法.原型 //================================================================================== /* 类 ...
- Centos7 Crontab
Centos7 Crontab # 查看crontab -l # 编辑 crontab -e # 重启 service crond restart ccrontab 编写规则 # 分 时 日 月 周 ...
- MySQL之SQL注入
1.SQL注入? 通过SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 2.防止SQL注入,我们需要注意以下几个要点: ①永远不要信任用户的输入 ...
- c# 正则
Regex reg = new Regex("^do(es)(xy)?$"); var result = reg.Match("doesxy"); foreac ...
- [LeetCode] Group Anagrams 群组错位词
Given an array of strings, group anagrams together. Example: Input: ["eat", "tea" ...
- 使用stylus
1. 首先确保 node + npm 环境一切正常. 2. 全局安装 stylus: 在命令行中: npm i stylus@latest -g 3. 此时可以创建 .s ...