CSS-版心和布局

作者: Imkata | 来源:发表于2022-03-06 02:53 被阅读0次

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

确定页面的版心（可视区）。
分析页面中的行模块，以及每个行模块中的列模块。
制作HTML结构。
CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

1. 一列固定宽度型

这种布局很简单，我们只需让盒子水平居中对齐，并且设置每一行的宽度固定，高度不同即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;  /* 清除内外边距*/
    }
    /* 相同的样式，我们会想到并集选择器 */
    .top,
    .banner,
    .main,
    .footer {
      width: 960px;
      text-align: center; /* 文字居中对齐 */
      margin: 0 auto; /* 可以让盒子水平居中对齐  只要保证 左右auto就阔以了 */
      margin-bottom: 10px;
      border: 1px dashed #ccc;
    }
    .top {      
      height: 80px;
      background-color: pink;                                   
    }
    .banner {
      height: 120px;
      background-color: purple;
    }
    .main {
      height: 500px;
      background-color: hotpink;
    }
    .footer {
      height: 150px;
      background-color: black;
    }
  </style>
</head>
<body>
  <div class="top">top</div>
  <div class="banner">banner</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</body>
</html>

2. 两列左窄右宽型

比如：小米官网

这种布局就是在上面那种布局的基础上，其中main的两个子盒子添加左右浮动即可。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .top,  /* 并集选择器给相同样式集体声明 */
    .banner,
    .main,
    .footer {
      width: 960px;
      margin: 0 auto;
      border: 1px dashed #ccc;
      text-align: center;
      background-color: #eee;
      margin-bottom: 8px;
    }
    .top {
      height: 80px;
    }
    .banner {
      height: 150px;
    }
    .main {
      height: 500px;
    } 
    .left {
      width: 360px;
      height: 500px;
      background-color: pink;
      float: left;  /* 添加左浮动 */
    }
    .right {
      width: 592px;
      height: 500px;
      background-color: purple;
      float: right;  /* 添加右浮动，中间自动会有8px的间距 */
    }
    .footer {
      height: 120px;
    }
  </style>
</head>
<body>
  <div class="top">top</div>
  <div class="banner">banner</div>
  <div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</body>
</html>

3. 通栏平均分布型

比如：锤子官网

main里面添加8个小li，main不设置高度，由子元素撑起高度，并且小li都浮动，8个小li宽度都一样，前4个小li高度设置200px，后4个小li高度设置400px，为了不影响后面的布局，父元素main清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;  /* 取消列表的默认小点样式 */
    }
    .top {
      height: 60px;
      background-color: #000;
    }
    .banner {
      width: 960px;
      height: 400px;
      background-color: skyblue;
      margin: 20px auto;
      border-radius: 15px;
    }
    .main {
      width: 960px;
      margin: 0 auto;
      /* 父元素清除浮动 */
      overflow: hidden;
    }
    .main ul li {
      width: 240px;
      background-color: pink;
      float: left;  /* 浮动的目的，是让多个块级li一行显示，而且木有缝隙 */
    }
    .main .noMargin {
      margin-left: 0; /* 再将第一块的左边距去掉 */
    }
    .main ul li:nth-child(even) {  /* even偶数，odd奇数 */
      background-color: purple;
    }
    /* n 从 0 开始计算，当是第 0 个元素或者超出了元素的个数会被忽略, 所以-n+4代表前4个 */
    .main ul li:nth-child(-n+4) {  
      height: 200px;
    }
    /* n+5代表从第5个开始(包括第5个),到最后 */
    .main ul li:nth-child(n+5) {   
      height: 400px;
    }
    .footer {
      height: 100px;
      background-color: #000;
    }
  </style>
</head>
<body>
  <div class="top">top</div>
  <div class="banner">banner</div>
  <div class="main">
    <ul>
      <li class="noMargin">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li class="noMargin">5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>
  <div class="footer">footer</div>
</body>
</html>

4. 圣杯布局和双飞翼布局

圣杯布局和双飞翼布局实现的效果是一样的，都是左右的宽度固定，中间栏宽度要自适应，只不过代码有些不同。

① 圣杯布局

首先写好html结构，注意中间栏（main）要在放在文档流前面以优先渲染。

<body>
  <div id="header">#header</div>
  <div class="container">
    <div class="main">中间栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
  </div>
  <div id="footer">#footer</div>
</body>

写好header和footer样式，使之横向撑满。

#header, #footer {
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: rgba(29, 27, 27, 0.726);
  }

左右两栏设置200x200px宽高，中间栏设置宽度100%，高度设置200px。

.left,.right{
  width: 200px;
  height: 200px;
  background: red;
}
.main{
  width:100%;
  height: 200px;
  background: blue;
}

left、right、main全部设置左浮动，并且给父元素container设置最小宽度，而且要清除浮动（因为我们的footer也要正常显示）。

.container{
  min-width: 400px; 
  background: #eee;
  overflow: hidden;
}

下面就是最重要的一步了，给left设置margin-left:-100%;（这个100%是整个屏幕的宽度）。
为什么要这么设置？我们可以先给left设置margin-left:10%;然后继续加大，可以发现right会被顶到下一行，同理，如果margin-left一直变小，left也会被顶到上一行，所以我们给left设置margin-left:-100%;就会把left拉到行头。

同理我们给right设置margin-left:-200px;（right的宽度）right就会跑到行尾。

.left{
  margin-left:-100%; 
}
.right{
  margin-left:-200px;
}

效果图如下：

现在的问题就是左右两边的元素覆盖了main元素的内容，我们可以给父容器container加上两边padding。因为浮动的盒子不会与父盒子的边框重叠，也不会超过父盒子的内边距，所以左右元素都被挤了进来。

.container{
  padding: 0px 200px; 
}

我们可以通过定位来解决上面的问题。因为子元素已经浮动了，也就是已经脱标了，如果再设置绝对定位（absolute），绝对定位会使浮动失效，这时就可能产生各种奇葩bug，所以当一个盒子已经进行了浮动，就不要再对其进行绝对定位，所以我们使用相对定位（relative）使left左移一个自身的宽度，使right右移一个自身的宽度。

.left{
  position: relative;
  left: -200px; 
}
.right{
  position: relative;
  right: -200px; 
}

大功告成：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style type="text/css">
    body, div {
      padding:0px;
      margin:0px;
    }
    #header, #footer {
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: rgba(29, 27, 27, 0.726);
    }
    .container {
      min-width: 400px; 
      background: #eee;
      overflow: hidden;
      padding: 0px 200px; 
    }
    .main {
      width:100%;
      height: 200px;
      background: blue;
      float: left; 
    }
    .left,.right {
      width: 200px;
      height: 200px;
      background: red;
      float: left; 
    }
    .left {
      margin-left:-100%; 
      position: relative;
      left: -200px; 
    }
    .right {
      margin-left:-200px;
      position: relative;
      right: -200px; 
    }
  </style>
</head>
<body>
  <div id="header">#header</div>
  <div class="container">
    <div class="main">中间栏</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
  </div>
  <div id="footer">#footer</div>
</body>
</html>

② 双飞翼布局

双飞翼布局的前5步和圣杯布局一样，我们就省略了。

经过圣杯布局的第5步之后，会有左右两边元素覆盖住了main元素内容的问题，圣杯布局通过是给父元素container添加左右padding，然后给left和right设置相对定位的方式来解决。在双飞翼布局中我们换个思路，既然main元素被盖住了，那么我们索性就不用main了，我们可以给main添加一个子元素main_w，并且给其设置左右margin，这样就巧妙的解决了左右两边的元素覆盖main元素内容的问题，这时候我们真正的中间栏其实就是main_w，我们就在main_w里面进行布局。

.main_w {
  margin:0px 200px;
}

<div class="main">
  <div class="main_w">中间栏</div>
</div>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双飞翼布局</title>
  <style type="text/css">
    body, div {
      padding:0px;
      margin:0px;
    }
    #header, #footer {
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: rgba(29, 27, 27, 0.726);
    }
    .container {
      min-width: 400px; 
      background: #eee;
      overflow: hidden;
    }
    .main {
      width:100%;
      height: 200px;
      background: blue;
      float: left; 
    }
    .left,.right {
      width: 200px;
      height: 200px;
      background: red;
      float: left; 
    }
    .left {
      margin-left:-100%; 
    }
    .right {
      margin-left:-200px;
    }
    .main_w {
      margin:0px 200px;
    }
  </style>
</head>
<body>
  <div id="header">#header</div>
  <div class="container">
    <div class="main">
      <div class="main_w">中间栏</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
  </div>
  <div id="footer">#footer</div>
</body>
</html>

CSS-版心和布局

1. 一列固定宽度型

2. 两列左窄右宽型

3. 通栏平均分布型

4. 圣杯布局和双飞翼布局

① 圣杯布局

② 双飞翼布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读