移动端页面的百分比布局

以下面的HTML5代码为例来学学习页面的百分比布局：

<div class="comic">
    <img src="fate.png" alt="Fate">
    <h1>Fateh1>
div>
<div class="comic">
    <img src="hulk.png" alt="Hulk">
    <h1>Hulkh1>
div>
<div class="comic">
    <img src="superman.png" alt="Superman">
    <h1>Supermanh1>
div>
<div class="comic">
    <img src="captain.png" alt="Captain">
    <h1>Captainh1>
div>
<div class="comic">
    <img src="wonder.png" alt="Wonder">
    <h1>Wonderh1>
div>
<div class="comic">
    <img src="ironman.png" alt="Ironman">
    <h1>Ironmanh1>
div>

最初的页面是这样的，竖直排列，不美观。

接下来，用CSS来美化这个页面：

    *{  /* 全局的内外边距清零 */
        margin: 0;
        padding: 0;
    }
   body{  /*设定背景和字体*/
        background: #f3f2ef;
        font-family: sans-serif;
    }

1、“ * ”号通配符将全局的内外边距都清零

2、 font-family ：设置字体。

https://www.w3school.com.cn/cssref/pr_font_font-family.asp

.comic{
        padding: 30px 0;
        margin: 10px 4%;
        width: 44%;
        /* 上面设置保证 44x2 + 3x4 = 100%这样效果好看, 3是因为下面设置了marin-left=0 */
        text-align: center;  /* 设置元素文本对齐 */
        float: left;   /* 设置左浮动来形成排列效果 */
        background: #e5e8e1;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
    }
.comic:nth-child(even){   /* 设置奇数div元素左边距为 0 */
        margin-left: 0;
    }
.comic h1{  /*设置每张图片的标题 */
        color: #666;
        font-weight: normal;
        font-size: 5vw;
    }
.comic img{  /* 是图片以百分比动态显示 */
        width: 20%;
    }

1、width ：设置了每个 comic 版块的宽度为 33.3%，即每排三个。

2、text-align ：设置元素文本对齐方式。

https://www.w3school.com.cn/cssref/pr_text_text-align.asp

3、box-shadow：设置阴影效果。

4、font-size ：设置h1元素的字体大小为 5vw，即等于屏幕宽度的1/20（5%）。当屏幕为400像素的时候，字体大小为20像素。

5、width ： 在此是以百分比设置图片的宽度。与之相同的还有 height等。

https://www.w3school.com.cn/css/css_dimension.asp

6、margin ：设置版块的外边距。

https://www.w3school.com.cn/cssref/pr_margin.asp

7、padding ：设置版块的内边距。

https://www.w3school.com.cn/cssref/pr_padding.asp

8、.comic:nth-child(even): 伪类选择器。用来选择偶数个div元素(将even改为odd则选择奇数个元素).

最后的页面效果如下：