27. 常规流练习

demos 3. 常规流练习

27. 常规流练习 - 图1

小结：

  • html和css的书写顺序：如果页面的结构是比较简单的话，那么可以先写好html，然后再写css；但是，如果页面比较复杂，那么建议分模块来写html和css。
  • 文本内容：使用中文假文来生成。
  • 整个网页的背景，通常会设置到body或html元素身上。
  • 在 body 上设置一个最小宽度：min-width: 1000px; 避免整个页面太小了，导致页面的展示效果看起来很奇怪。
  • 由于用户电脑屏幕的宽度可能不是1902px，为了不出现横向滚动条（宽度大于用户电脑屏幕的宽度），不出现多余的空白区域（宽度小于用户电脑屏幕的宽度）。我们一般会使用百分比来实现。（1713/1902 ≈ 90%）父级容器的宽度不设置，让它撑满整个屏幕即可，中间白色的内容区的宽度设置为 width: 90%; 即可。如果在公司中遇到这样类似的情况，需要与设计师沟通。
  • 文章中所有文本内容的行高都是2，可以将css声明 line-height: 2; 设置到body元素上。
  • margin塌陷问题：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>margin塌陷测试</title>
  9.     <style>
  10.         body {
  11.             margin: 0;
  12.             padding: 20px 0;
  13.             background-color: #4d4a40;
  14.         }
  16.         .article {
  17.             width: 90%;
  18.             height: 300px;
  19.             margin: 0 auto;
  20.             background-color: #fff;
  21.         }
  23.         .header {
  24.             height: 100px;
  25.             margin: 30px -34px;
  26.             background-color: #267890;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <!-- 模拟文章区域 -->
  33.     <div class="article">
  34.         <!-- 模拟标题区域 -->
  35.         <div class="header"></div>
  36.     </div>
  37. </body>
  39. </html>

27. 常规流练习 - 图2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px 0;
            background-color: #4d4a40;
        }

        .article {
            width: 90%;
            height: 300px;
            padding-top: 30px;
            margin: 0 auto;
            background-color: #fff;
        }

        .header {
            height: 100px;
            /* 上外边距发生了塌陷，可以给父级设置 padding 来达到同样的显示效果。 */
            /* margin: 30px -34px; */
            margin: 0 -34px 30px;
            background-color: #267890;
        }
    </style>
</head>

<body>
    <!-- 模拟文章区域 -->
    <div class="article">
        <!-- 模拟标题区域 -->
        <div class="header"></div>
    </div>
</body>

</html>

27. 常规流练习 - 图3

  • 原文链接部分，可以单独设置行高，line-height: 1;，因为行高如果设置为2的话，那么会发现原文链接这一块的文字底部与父级下边框的距离会大于30px。

    • 除了重置 line-height，我们也可以通过微调来实现，先写好，再测量，多出多少就减去多少。
  • 内容区域的段落与段落之间，间隔高度是一行文本的高度，margin: 1em 0;；（这个设计稿中没有写明，看上去感觉是1行文本的高度，如果有明确写出来，那就以那个值为准。）
  • 内容区域的标题，上下的边框样式，设计稿中也没标清楚。