css两栏布局、圣杯布局、双飞翼布局

王岩威发布于2019-08-01 17:03 / 2507人阅读

摘要：两栏布局浮动两列自适应定位圣杯布局和双飞翼布局目的是我们希望先加载的是中间的部分，然后再开始加载和两个相对来说不是很重要的东西。

最近几个月一直用vue在写手机端的项目，主要写业务逻辑，在js方面投入的时间和精力也比较多。这两天写页面明显感觉css布局方面的知识有不足，所以复习一下布局方法。

两栏布局

1、浮动

 .box1 .left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .box1 .right {
    margin-left: 100px;
    height: 100px;
    background-color: green;
  }


  
  两列自适应

2、定位

.box1{
    position: relative;
    width: 100%;
    height: 100px;
  }
  .box1 .left{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: red;
  }
  
  .box1 .right{
    margin-left: 100px;
    width: 100%;
    height: 100%;
    background-color: green;
  }

3、flex

  .box1{
    display: flex;
    height: 100px;
  }
  .box1 .left{
    width: 100px;
    height: 100%;
    background-color: red;
  }
  
  .box1 .right{
    flex:1;
    height: 100%;
    background-color: green;
  }

圣杯布局和双飞翼布局目的是我们希望先加载的是中间的部分，然后再开始加载 left 和 right 两个相对来说不是很重要的东西。

圣杯布局

圣杯布局给最外面加padding, 让 padding-left 和 padding-right 的数值等于left 和 right 的宽度，然后利用相对定位把他们再移动在两旁。

.box{
    padding:  0 100px;/* 留出左右的距离*/
    height: 100px;
  }
  .box .middle {
    float: left;
    width: 100%;
    height: 100%;
    background-color: yellow;
  }
  .box .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: red;
    position: relative;
    left: -100px;/*往左拉*/
    height: 100%;
  }
  .box .right {
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: green;
    position: relative;
    right: -100px;
    height:100%;
  }


  
  middle
  left
  right

双飞翼布局

.box {
    position: relative;
    height: 100px;
  }
  .middle-wrap {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
  .middle-wrap .middle {
    height: 100%;
    margin: 0 100px; /*留出距离*/
    background-color: yellow;
  }
  .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    height: 100%;
    background-color: red;
  }
  .right {
    float: left;
    width: 100px;
    height: 100%;
    margin-left: -100px;
    background-color: green;
  }

GPU云服务器云服务器圣杯布局双飞翼布局 css布局 css布局教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50916.html

css两栏布局、圣杯布局、双飞翼布局

摘要：两栏布局浮动两列自适应定位圣杯布局和双飞翼布局目的是我们希望先加载的是中间的部分，然后再开始加载和两个相对来说不是很重要的东西。最近几个月一直用vue在写手机端的项目，主要写业务逻辑，在js方面投入的时间和精力也比较多。这两天写页面明显感觉css布局方面的知识有不足，所以复习一下布局方法。两栏布局 1、浮动 .box1 .left { float: left; w...

winterdawn 2019-08-29 12:50 评论0 收藏0
css常见布局

摘要：圣杯布局对于三栏布局来说，左右两栏一般放置目录等简要信息，中间一栏是主要信息。无论是三栏布局还是两栏布局，以上方法都适用。纯浮动布局左右两栏分别向左右浮动，中间设置值，宽度自适应。圣杯布局对于三栏布局来说，左右两栏一般放置目录等简要信息，中间一栏是主要信息。页面加载时，用户最希望第一时间看到的是中间一栏内容，所以根据文档流加载顺序（从上到下），中间一栏必须放在左右两栏的前面。而实际...

douzifly 2019-08-30 13:18 评论0 收藏0
圣杯布局和双飞翼布局

摘要：解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局圣杯布局dom结构：圣杯布局 ...

yankeys 2019-08-29 13:54 评论0 收藏0
圣杯布局和双飞翼布局

摘要：参考文章同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局实现的效果主要在中，和固定宽度，首先渲染，且自适应宽度。 ps: 参考文章 DotHide同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 评论0 收藏0
前端整理——css部分

摘要：圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部浮动，但左右两栏加上负让其跟中间栏并排，以形成三栏布局。双飞翼布局，为了中间内容不被遮挡，直接在中间内部创建子用于放置内容，在该子里用和为左右两栏留出位置。（1）盒模型（普通盒模型、怪异盒模型） 1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型 2、IE...

chaosx110 2019-04-23 11:56 评论0 收藏0