编程笔记 html5&css&js 045 网页布局

一、网页布局
二、头部区域
三、菜单导航区域
三、内容区域
四、不相等的列
五、底部区域
六、box-sizing
- [box-sizing 属性可以被用来调整这些表现：](#box-sizing 属性可以被用来调整这些表现：)
- 属性值
- - content-box
  - border-box
六、响应式网页布局
小结

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

一、网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

二、头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

三、菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

三、内容区域

内容区域一般有三种形式:

1 列：一般用于移动端

2 列：一般用于平板设备

3 列：一般用于 PC 桌面设备

创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：

/* 创建三个相等的列 */
.column {
  float: left;
  width: 33.33%;
}
 /* 列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 /* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。

四、不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

.column {
  float: left;
}
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

五、底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

六、box-sizing

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现：

content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

译者注： border-box不包含margin

备注：对于新的 web 站点，你可能希望首先将 box-sizing 设置为 border-box，如下所示：

* {
  box-sizing: border-box;
}

这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如：你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。

box-sizing 属性被指定为下面列表中的关键字。

属性值

content-box

默认值，标准盒子模型。width 与 height 只包括内容的宽和高，不包括边框border），内边距（padding），外边距（margin）。注意：内边距、边框和外边距都在这个盒子的外部。比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

尺寸计算公式：

width = 内容的宽度

height = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

border-box

width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks 模式时 Internet Explorer 使用的盒模型。注意，填充和边框将在盒子内 , 例如， .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负，并且被分配到 0，使得不可能使用 border-box 使元素消失。

尺寸计算公式：

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

六、响应式网页布局

响应式页面，页面的布局会根据屏幕的大小来调整。

<!DOCTYPE html>
<html lang="zh-cn">
   <head>
      <title>网页布局 编程笔记 html5&css&js</title>
      <meta charset="utf-8" />
      <style>
         * {
            box-sizing: border-box;
         }
         body {
            font-family: Arial;
            padding: 10px;
            background: #f1f1f1;
         }
         /* 头部标题 */
         .header {
            padding: 30px;
            text-align: center;
            background: white;
         }
         .header h1 {
            font-size: 50px;
         }
         /* 导航条 */
         .topnav {
            overflow: hidden;
            background-color: #333;
         }
         /* 导航条链接 */
         .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
         }
         /* 链接颜色修改 */
         .topnav a:hover {
            background-color: #ddd;
            color: black;
         }
         /* 创建两列 */
         /* Left column */
         .leftcolumn {
            float: left;
            width: 75%;
         }
         /* 右侧栏 */
         .rightcolumn {
            float: left;
            width: 25%;
            background-color: #f1f1f1;
            padding-left: 20px;
         }
         /* 图像部分 */
         .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
         }
         /* 文章卡片效果 */
         .card {
            background-color: white;
            padding: 20px;
            margin-top: 20px;
         }
         /* 列后面清除浮动 */
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         /* 底部 */
         .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
            margin-top: 20px;
         }
         /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
         @media screen and (max-width: 800px) {
            .leftcolumn,
            .rightcolumn {
               width: 100%;
               padding: 0;
            }
         }
         /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
         @media screen and (max-width: 400px) {
            .topnav a {
               float: none;
               width: 100%;
            }
         }
      </style>
   </head>
   <body>
      <div class="header">
         <h1>明月看潮生的网页</h1>
         <p>重置浏览器大小查看效果。</p>
      </div>
      <div class="topnav">
         <a href="#">链接1</a>
         <a href="#">链接2</a>
         <a href="#">链接3</a>
         <a href="#" style="float: right">链接4</a>
      </div>
      <div class="row">
         <div class="leftcolumn">
            <div class="card">
               <h2>文章标题</h2>
               <h5>2019 年 4 月 17日</h5>
               <div class="fakeimg" style="height: 200px">图片</div>
               <p>一些文本...</p>
               <p>少年软件工程师。不再是一个启蒙用过程，直接向着目标前进！</p>
            </div>
            <div class="card">
               <h2>文章标题</h2>
               <h5>2019 年 4 月 17日</h5>
               <div class="fakeimg" style="height: 200px">图片</div>
               <p>一些文本...</p>
               <p>少年软件工程师。不再是一个启蒙用过程，直接向着目标前进！</p>
            </div>
         </div>
         <div class="rightcolumn">
            <div class="card">
               <h2>关于我</h2>
               <div class="fakeimg" style="height: 100px">图片</div>
               <p>关于我的一些信息..</p>
            </div>
            <div class="card">
               <h3>热门文章</h3>
               <div class="fakeimg"><p>图片</p></div>
               <div class="fakeimg"><p>图片</p></div>
               <div class="fakeimg"><p>图片</p></div>
            </div>
            <div class="card">
               <h3>关注我</h3>
               <p>一些文本...</p>
            </div>
         </div>
      </div>
      <div class="footer">
         <h2>底部区域</h2>
      </div>
   </body>
</html>

小结

网页布局是设计网页必做之事，需要熟练掌握。