HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局

一.三栏式布局

顾名思义，即是将主页分成三部分（左，中，右），给左边和右边的块定宽，中间的块占据余下部分。以下是几种常用的实现方法

1.巧用浮动
优点；兼容性好，实现简单
缺点：必须先写浮动元素，再写中间的这个元素，否则右边块会掉到下一行
左右浮动脱离文档流，可能会导致父元素高度崩塌，需要及时清除浮动

 <div class="left"></div><div class="right"></div><div class="center"></div>
<style>.left{width:100px;height:100px;background-color:rgb(88, 139, 122);float: left;}.right{width:100px;height:100px;background-color:rgb(25, 173, 124);float:right;}.center{margin:0 100px;/*这个加不加效果是一样的*/height:100px;background-color:rgb(15, 53, 40);}</style>

2.巧用定位，为左右的块加上定位，中间的块用margin挤到中间
特点：脱离文档流，
与html顺序无关

 <div class="left"></div><div class="center"></div><div class="right"></div>
<style>*{margin:0;padding:0;}.left{width:100px;height:100px;background-color:rgb(88, 139, 122);position: absolute;left:0;top:0;}.right{width:100px;height:100px;background-color:rgb(25, 173, 124);position:absolute;right:0;top:0;}.center{height:100px;background-color:rgb(15, 53, 40);margin:0 100;}

3.flex布局
缺点：不能兼容IE8以下的浏览器

 <div class="it"><div class="left"></div><div class="center"></div><div class="right"></div>  </div><style>*{margin:0;padding:0;}.it{display:flex;}.left{width:100px;height:100px;background-color:rgb(88, 139, 122);}.right{width:100px;height:100px;background-color:rgb(25, 173, 124);}.center{height:100px;background-color:rgb(15, 53, 40);flex:1;}

4.table法（不做仔细学习）
5.Grid法（不做仔细学习）
二、圣杯布局，圣杯也是三栏式布局的一种
特点：将左中右元素绝对定位，左浮动，中间元素：100%
父元素利用padding给左右元素留出距离
左元素margin-left：-100%；(挤到同一行)left：-100px；(挤出父元素)

  *{margin:0;padding:0;}.it{padding:0 100px 0 100px;overflow: hidden;}.left{width:100px;height:100px;background-color:rgb(88, 139, 122);float: left;position: relative;margin-left:-100%;left:-100px;}.right{width:100px;height:100px;background-color:rgb(25, 173, 124);float: left;position: relative;margin-left:-100px;right:-100px; }.center{float: left;position: relative;height:100px;background-color:rgb(15, 53, 40);width:100%;}

三、双飞翼布局
特点：利用将父元素的内容放到合适的位置
三个元素全部左浮动，中间元素加上一个块元素写内容，利用margin固定到合适的位置，
左右元素照样加上margin-left：-100%；

<div class="it">
<div class="center"><div class="in"></div></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>*{margin:0;padding:0;}.it{overflow: hidden;}.left{width:100px;height:100px;background-color:rgb(88, 139, 122);float: left;margin-left:-100%;}.right{width:100px;height:100px;background-color:rgb(25, 173, 124);float: left;margin-left:-100px;}.center{float: left;height:100px;background-color:rgb(15, 53, 40);width:100%;}.in{margin:0 100px 0 100px;}

HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局相关推荐

三个经典布局：三栏式布局、双飞翼布局、圣杯布局
1.三栏式布局三栏式布局就是左栏定宽左浮动,右栏定宽右浮动. <div class="wrap"><div class="left"> ...
左中右三栏式布局
一.中间自适应,左右两边宽度固定方法1:box容器 Flex布局,center设置为 flex:1 <!DOCTYPE html> <html lang="en&qu ...
经典布局（flex和传统两种实现）—左中右三栏式
1.浮动法父级宽度:80% 左右: 定宽高, 分别浮动向左,浮动向右中: margin: 0 200px; 定高注意,中间的块元素必须放在后面左右定宽,中间自适应 <!DOCTYPE h ...
HCJ2：页面两栏式或三栏式布局
2.1 简介大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示: 两栏式例子: 三栏式 2.2 方法 2.2.1 两栏式 .left-pane{width: 14%;heigh ...
【三栏式布局、双飞翼布局、圣杯布局】09
三栏式布局文章目录三栏式布局 1. 用calc函数实现三栏式布局 2. 双飞翼布局 3. 圣杯布局两边盒子固定宽度,中间盒子自适应的布局. 1. 用calc函数实现三栏式布局 <div c ...
圣杯布局-三种实现方式，css经典布局
圣杯布局:经典三栏布局,左右两边宽度固定,中间自适应圣杯布局在前端构建页面是最常见的一种布局方式,也是前端面试中最常被问到的一问题,下面通过三种方式去实现圣杯布局!附代码!可以一对比一下哪种方式最便 ...
【前端布局篇】浮动、定位、弹性布局，固比固、双飞翼、圣杯布局
一.布局方式介绍布局模型是基于盒模型基础上进行的拓展,关于布局有流式布局(标准的布局),浮动布局.定位布局.flex布局等. HTML5+CSS3系列课程携程网首页-移动端响应式布局实战之微加建 ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
基础//页面布局——三栏布局1
文章目录一.题目二.我的代码详情三.总结一.题目根据题目给出你的答案. 二.我的代码详情 https://codepen.io/janmie-cjm/pen/gOrvBEw?editors= ...

HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局

HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局相关推荐

最新文章

热门文章

HTML(十二)三种常见布局：三栏式布局 双飞翼布局 圣杯布局

HTML(十二)三种常见布局：三栏式布局 双飞翼布局 圣杯布局相关推荐

最新文章

热门文章

HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局

HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局相关推荐