web技术学习

切换模式

本文总阅读量 次

CSS 多种布局方式 ​

多栏布局 ​

两栏布局 ​

两栏自适应:两列布局，左侧固定宽度，右侧盒子自适应

  1. 左右两个盒子，左边固定宽度，右边设置 100%
  2. 给左侧盒子设置 position: absolute
  3. 右侧盒子内部添加一个子盒子，给子盒子设置 padding-left，值为左侧盒子的宽度
html
<div class="left">left</div>
<div class="right">
    <div class="inner">right</div>
</div>
css
.left{
  width:200px;
  height:100px;
  background: pink;
  position: absolute;
}
.right{
  width:100%;
  height: 100px;
  background: greenyellow;
}
.inner{
  padding-left:200px;
  background: red;
}

圣杯布局 ​

  1. 三个盒子都浮动，并且设置一个 position: relative;

  2. 中间盒子的宽度设置 100% 占满

  3. 要把左边盒子拉倒最左边，通过使用 margin-left: -100%;

  4. 左边盒子上去之后会覆盖中间的一部分内容，要把中间的内容拉出来，在外围的 wrap 盒子设置 padding-left，值为左边盒子的宽度

  5. 中间盒子的内容被拉回来，但是左边盒子也回来了，给左边设置定位并且设置偏移量属性 left，值为盒子宽度的负值，还原盒子的位置

  6. 右边同理左边

html
<div class="wrap">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
css
.wrap{
  padding-left:200px;
  padding-right:200px;
}
.left,.right,.center{
  float: left;
  position: relative;
}
.left,.right{
  width:200px;
  height:100px;
}
.left{
  background: greenyellow;
  margin-left:-100%;
  left:-200px;
}
.right{
  background: pink;
  margin-left:-200px;
  right:-200px;
}
.center{
  width:100%;
  height: 100px;
  background: yellow;
}

双飞翼布局 ​

双飞翼布局：左右两栏固定宽度，中间盒子自适应（中间盒子必须放在最前面）

  1. html 结构中，中间的盒子必须放在最前面
  2. 将三个盒子都浮动
  3. 中间盒子 main 占满 100%
  4. 将左边盒子拉倒最左边，margin-left: -100%; 右边盒子放到最右边
  5. 中间盒子的内容被左右盒子覆盖了，在中间盒子内部添加一个子元素，给子元素设置 margin:0px 200px;
html
<div class="main">
    <div class="inner">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
css
.left,.right,.main{
  float: left;
}
.left,.right{
  width:200px;
  height:100px;
  opacity: 0.5;
}
.left{
  background: yellowgreen;
  margin-left: -100%;
}
.right{
  background: pink;
  margin-left:-200px;
}
.main{
  width:100%;
  height:100px;
  background: yellow;
}
.inner{
  background: red;
  margin:0px 200px;
}

等高布局 ​

实现效果：一列变高，其他列的高度都要变化

利用内外边距抵消法 ​

  • 优点：结构简单，兼容所有浏览器，比较容易理解
  • 缺点：伪等高，需要合理的控制 margin 和 padding 的值
html
<div class="box">
  <div class="col col1">第一列；第一列；第一列；第一列；第一列；第一列；第一列；</div>
  <div class="col col2">第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；</div>
  <div class="col col3">等高布局：多列子元素在父元素中实现</div>
</div>
<div class="test"></div>
css
.box{
  width:900px;
  margin: auto;
  overflow: hidden;
}
.box:after{
  content:'';
  clear: both;
  display: block;
}
.box div{
  width:300px;
  float: left;
  padding-bottom: 999px;
  margin-bottom: -999px;
}
.col1{
  background: pink;
}
.col2{
  background: greenyellow;
}
.col3{
  background: yellow;
}

.test{
  height: 100px;
  background: #000;
}

嵌套法 ​

给每一个盒子嵌套一个背景，通过内容撑开父元素的高度的原理

  • 优点：兼容各种浏览器，方便扩展创建任意列数

  • 缺点：结构嵌套复杂

html
<div class="wrap">
  <div class="bg1">
    <div class="bg2">
      <div class="bg3">
        <div class="col1">第一列给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景</div>
        <div class="col2">第二列</div>
        <div class="col3">第三列</div>
      </div>
    </div>
  </div>
</div>
css
.wrap{
  width:900px;
  margin:auto;
  overflow: hidden;
}
.bg1{
  background: pink;

}
.bg2{
  background: yellowgreen;
  position: relative;
  left: 300px;
}
.bg3{
  background: yellow;
  position: relative;
  left:300px;
}
.bg3:after{
  content: '';
  clear: both;
  display: block;
}

.bg3 div{
  width:300px;
  float: left;
  position: relative;
}
.bg3 .col1{
  margin-left:-600px;
}
.bg3 .col2{
  margin-left:-300px;
}

多列布局 ​

类似于报纸的分列

css
column-count: number | auto; /* 被分隔的列数 */
column-width: auto | length; /* 元素的列宽 */
column-gap: length | normal; /* 列宽 */
/* 边框线样式，是一个简写：column-rule-*: color width style; */
column-rule: width color style;

评论