CSS基础案例（1）产品模块布局

简单模仿一下Xiaomi商城的UI风格，建议自己找类似的题材练习。

 

---

目录

一.准备盒子标签

二.图片

三.文字

---

一.准备盒子标签

首先清除默认的内外边距，并修改默认背景。

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #f5f5f5;
        }

由于多个div要并排显示，记得修改显示模式为行内块元素~

        .box{
            margin-top: 120px;
            margin-left:63px;
            width: 298px;
            height: 415px;
            background-color: #ffffff;
            display:inline-block;
        }

之后，填充盒子标签内部的元素：

    

         
        
Mia San Mia
        
德国甲级联赛
        

            
拜仁慕尼黑
            |
            BAR
        

二.图片

        .box img{
            height: 170px;
            width: 100%;
            /* 撑满父类盒子 */
        }

需要多提一句的是，这里由于图片大小不一样，所以还需额外设置高度，否则直接设置宽度为100%填充即可（相当于等比例缩放~） 

三.文字

        .comment{
            height: 70px;
            font-size: 19px;
            padding: 0 28px;
            /* 盒子没有宽度，所以padding不会撑开盒子的宽度 */
            margin-top: 15px;
            /* 但是盒子有高度，所以设置内边距会撑开盒子 */
        }

首先是最上方的标语，额外关注padding撑开盒子的情况，该用外边距时不要吝啬；此外必须设置统一的高度，保证对齐~ 

 

        .type{
            font-size: 13px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        .name{
            color: #000000;
            margin-top: 13px;
            padding: 0 28px;
        }
        .name h4{
            display:inline-block;
            /* h4单独变成行内块 */
            /* font-size: 400px; */
            /* 400px导致h4不加粗 */
        }
        .name span{
            color:orange;
        }
        em{
            font-style: normal;
            /* 变成直线 */
        }

然后就是一些小细节的修改，不再赘述~

---

最终效果图如下：

---

核心的拓展总结

• 清除原始的内外边距

*{
    margin:0;
    padding:0;
}

• 块级盒子水平居中

margin:100px auto;