浅谈CSS3栏合理布局的N种完成

日期:2021-03-18 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

3栏合理布局:网页页面分成左中右3一部分。上下固定不动,正中间一部分自融入。

1. 肯定精准定位法

这里的肯定精准定位是指对上下一部分开展肯定精准定位。

HTML构造。

<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>

编码。

//简易的开展CSS reset
body,html{
    height:100%;
    padding: 0px;
    margin:0px;
}
//上下肯定精准定位
.left,.right{
    position: absolute;
    top:0px;
    background: red;
    height:100%;
}
.left{
    left:0;
    width:100px;
}
.right{
    right:0;
    width:200px;
}
//正中间应用margin空出上下元素所占有的室内空间
.main{
    margin:0px 200px 0px 100px;
    height:100%;
    background: blue;
}
// 上述的高宽比能够无须开展设定,用內容撑开元素高宽比便可。

height:100%

高宽比由內容撑开

这类方式有1个缺点,便是假如正中间栏含有最少宽度限定,或是含有宽度的內部元素,当访问器宽度小到1定水平,会产生层重合的状况。

正中间栏嵌入1个宽度为200的span元素,产生重合

2. 圣杯合理布局

3. 双飞翼合理布局

浅谈css双飞翼合理布局和圣杯合理布局

4. 本身波动法

左栏左波动,右栏右波动,正中间栏放最终

DOM构造

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body> 

款式

    .left {
        background: red;
        float: left;
        width: 150px;
      }
      .right {
        background: red;
        float: right;
        width: 200px;
      }
      .main {
        background: pink;
        margin: 0 200px 0 150px;
      }

实际效果

这类方法必须留意3个div的次序,上下两栏的次序分不清前后,可是正中间1栏务必放在最终。

优势是编码充足简约与高效率,缺陷是正中间行为主体存在克星,即clear:both特性。假如要应用此方式,需防止显著的clear款式,且关键內容没法最开始载入,当网页页面內容较多时会危害客户体验。

5. flex合理布局

DOM构造

<div class="container">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
</div>

款式

.container {
          display: flex;
      }
      .main {
          flex-grow: 1;
          height: 300px;
          background-color: red;
      }
      .left {
          order: ⑴;
          flex: 0 1 200px;
          margin-right: 20px;
          height: 300px;
          background-color: blue;
      }
      .right {
          flex: 0 1 100px;
          margin-left: 20px;
          height: 300px;
          background-color: green;
      }

实际效果

6. table合理布局

DOM构造

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

款式

.container {
  display: table;
  width: 100%;
}
.left, .main, .right {
  display: table-cell;
}
.left {
  width: 200px;
  height: 300px;
  background-color: red;
}
.main {
  background-color: blue;
}
.right {
  width: 100px;
  height: 300px;
  background-color: green;
}

缺陷:没法设定栏间隔

End

类似总结了在网上的几种流行方式,有的很小众的方式就沒有梳理。

CSS3的flex实例教程還是得好漂亮1看。

随后也有波动啊精准定位啊负边距啊甚么的,要深层次科学研究的话估算也是很长的学习培训笔记。

CSS简直1门玄学。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。