单列布局

第一种

给定宽度，margin:auto 即可实现

html

<div class="header"></div>

<div class="content"></div>

<div class="footer"></div>

css

.header {

  margin: 0 auto;

  max-width: 960px;

  height: 100px;

  background-color: blue;

}

.content {

  margin: 0 auto;

  max-width: 960px;

  height: 400px;

  background-color: yellow;

}

.footer {

  margin: 0 auto;

  max-width: 960px;

  height: 100px;

  background-color: green;

}

第二种

html

<div class="header">

  <div class="nav"></div>

</div>

<div class="content"></div>

<div class="footer"></div>

css

.header {

  margin: 0 auto;

  max-width: 960px;

  height: 100px;

  background-color: blue;

}

.nav {

  margin: 0 auto;

  max-width: 800px;

  background-color: darkgray;

  height: 50px;

}

.content {

  margin: 0 auto;

  max-width: 800px;

  height: 400px;

  background-color: aquamarine;

}

.footer {

  margin: 0 auto;

  max-width: 960px;

  height: 100px;

  background-color: aqua;

}

等高布局

当有内容填充一侧时,另一侧高度跟左侧保持相等

html

<div class="parent">

  <div class="box1">

    <p>content</p>

    <p>content</p>

    <p>content</p>

    <p>content</p>

    <p>content</p>

    <p>content</p>

    <p>content</p>

  </div>

  <div class="box2">

    <p>content</p>

  </div>

</div>

css

通过设定 margin-bottom 和 padding-bottom，然后让父容器溢出隐藏，就能达到等高的效果

.parent {

  border: 4px solid rgb(69, 209, 228);

  overflow: hidden;

}

.box1 {

  float: left;

  width: 100px;

  background-color: rgb(230, 56, 56);

  margin-bottom: -2000px;

  padding-bottom: 2000px;

}

.box2 {

  float: right;

  width: 100px;

  background-color: rgb(67, 67, 221);

  margin-bottom: -2000px;

  padding-bottom: 2000px;

}

实例：

三列布局(双飞翼)

左侧固定，右侧固定，中间自适应的三列布局

实现方式有很多：

    1.BFC

    2.定位

    3.浮动

    4.flex弹性

示例：

html

<div class="container">

  <div class="center">

    <h1>center</h1>

  </div>

  <div class="left">

    <h1>Left</h1>

  </div>

  <div class="right">

    <h1>Right</h1>

  </div>

</div>

css

<div class="container">

  <div class="center">

    <h1>center</h1>

  </div>

  <div class="left">

    <h1>Left</h1>

  </div>

  <div class="right">

    <h1>Right</h1>

  </div>

</div>

实例：

圣杯布局

同样也是两边固定宽度，中间自适应，唯一区别是 dom 结构必须是先写中间列部分，这样实现中间列可以优先加载

html

<article class="container">

  <div class="center">

    <h2>圣杯布局</h2>

  </div>

  <div class="left"></div>

  <div class="right"></div>

</article>

css

.container {

  padding-left: 220px;

  padding-right: 220px;

}

.left {

  float: left;

  width: 200px;

  height: 400px;

  background: red;

  margin-left: -100%;

  position: relative;

  left: -220px;

}

.center {

  float: left;

  width: 100%;

  height: 500px;

  background: yellow;

}

.right {

  float: left;

  width: 200px;

  height: 400px;

  background: blue;

  margin-left: -200px;

  position: relative;

  right: -220px;

}

巴特西

几种常见css布局

单列布局

第一种

html

css

第二种

html

css

等高布局

html

css

实例：

三列布局(双飞翼)

html

css

实例：

圣杯布局

html

css

未完待续...

最新文章

热门文章