CSS布局(圣杯/双飞翼)

简介: CSS布局(圣杯/双飞翼)

布局特点:


内容区分为左中右三部分,其中左右两部分的宽度固定,中间部分的宽度随视口变化


优缺点


  • 圣杯布局用定位+位移,代码较复杂,但是dom结构清晰
  • 双飞翼布局,不使用定位,换来dom结构的不友好


圣杯:


  • 多个div标签
  • 中间宽度center设置为100%,外面的content设置padding,给两端留出位置,留的宽度刚好为左右固定的宽度;
  • center,left,right设置浮动,floor设置clear:both清除浮动;
  • left设置margin-left:-100%此时left位于center内的左端,;再设置定位position:relative;left:-100px
  • right设置margin-right:-100px
<body>
  <div class="top">top</div>
  <div class="content">
    <div class="center float">center</div>
    <div class="left float">left</div>
    <div class="right float">right</div>
  </div>
  <div class="floor">floor</div>
</body>
.body{margin:0;padding:0}
.float{float:left}
.top{background:#ff2}
.floor{background:#1121d1;clear:both}
.top,.floor{height:50px;width:100%}
.content{padding:0 100px}
.center{width:100%;background:rgb(129,55,55)}
.left{position:relative;background:rgb(1,55,55);width:100px;margin-left:calc(-100%);right:100px}
.right{background:rgb(1,155,155);width:100px;margin-right:-100px}

双飞翼


多个div标签;

container设置width:100%,center设置width100%;margin:0 100px;

container,left,right设置浮动,footer清除浮动

left设置margin-left:100%

right设置margin-left:-100px


<body>
  <div class="header">header</div>
  <div class="container float">
    <div class="center">center</div>
  </div>
  <div class="left float">left </div>
  <div class="right float">column</div>
  <div class="footer">footer</div>
</body>
.header{height:50px;background:#ff9;width:100%}
.footer{height:50px;background:rgb(24,24,1);clear:both;width:100%}
.left{width:100px;background:rgb(60,51,189);margin-left:-100%}
.right{width:100px;background:rgb(23,160,160);margin-left:-100px}
.footer{height:50px;background:rgb(24,24,1);clear:both;width:100%}
.float{float:left;height:50px}
.container{width:100%}
.center{height:100%;margin-left:100px;margin-right:100px;background-color:pink}

flex实现


  • flex-grow 用于设置项目的放大系数。
  • flex-shrink 用于设置项目的缩小系数。
  • flex-basis 用于设置项目在主轴上的空间。
  • flex: flex-grow flex-shrink flex-basis | auto | none。
  • auto 表示:1 1 auto,即等比例扩大或者压缩。

     none 表示:0 0 auto,即不扩大,也不压缩。

     order: 为整数,可以为负数,order 默认值为 0,



     用于是设置项目的排序顺序,从小到大排列

  • content设置display:flex
  • center设置flex:1
  • left设置flex: 0 0 100px,order:-1
  • right设置 flex: 0 0 100px
   <div class="content">
    <div class="center">center</div>
    <div class="left column">left100 </div>
    <div class="right column">column150</div>
  </div>
   .content {
    display: flex;
  }
  .center {
    flex: 1;
    background: #ddd;
  }
  .left {
    flex: 0 0 100px;
    order: -1;
    background: #dd0;
  }
  .right {
    flex: 0 0 100px;
    background: #1d0;
  }
目录
相关文章
|
23天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
16天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
1月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
49 4
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
125 3
|
3月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
56 3
|
3月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
65 1