CSS

最新推荐文章于 2022-11-16 11:43:29 发布

GeekLeee

最新推荐文章于 2022-11-16 11:43:29 发布

阅读量386

点赞数

分类专栏： -----semantic-ui

本文链接：https://blog.csdn.net/GeekLeee/article/details/72428163

版权

-----semantic-ui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS基本构成

padding内推margin外攘

这里写图片描述

这里写图片描述
html实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="h0.css" media="screen" title="no title">
        <title>googlecards</title>
    </head>
    <body>
        <div class="blue-card">
            <img src="img/gmail.png" alt="" width="120" />
            <!--alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。-->
            <p>
                Efficient and useful.
            </p>
        </div>
        <div class="green-card">
            <img src="img/news.png" alt="" width="120" />
            <p>
                Find your favorite.
            </p>
        </div>
        <div class="yellow-card">
            <img src="img/map.png" alt="" width="120" />
            <p>
            Better than Baidu.
            </p>
        </div>
    </body>
</html>

body {
    background-color:#EAEAEA;
}
//body前不用【.】
.blue-card {
    background-color: #9cbfcc;
    //背景颜色
    border-radius: 5px;
    //边的圆角值为5px
    box-sizing: border-box;
    //box-sizing:border-box; 是CSS3新增属性，了解这个属性，我们先从块级元素的盒子大小说起，通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） /  宽度（width）,如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）

    width: 230px;
    height: 290px;
    padding-left: 58px;
    padding-top: 56px;
    display: inline-block;
    //display:inline-block||简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，
    margin-right: 10px;
    /*使用 inline-block之后默认会有5px的距离，所以这里我写了10px 的距离，加起来正好是设计图要求的15px,你也可以先去掉 inline-block 带来的距离，方法是：https://css-tricks.com/fighting-the-space-between-inline-block-elements/*/

}

.green-card {
    background-color: #6bb790;
    border-radius: 5px;
    box-sizing: border-box;
    width: 230px;
    height: 290px;
    padding-left: 58px;
    padding-top: 56px;
    display: inline-block;
    margin-right: 10px;
}

.yellow-card {
    background-color: #F5b227;
    border-radius: 5px;
    box-sizing: border-box;
    width: 230px;
    height: 290px;
    padding-left: 58px;
    padding-top: 56px;
    display: inline-block;
    margin-right: 10px;
}

p {
    color: white;
}