CSS学习第三天（2）-CSS的盒子模型

最新推荐文章于 2024-07-16 20:50:21 发布

陈平安_码来

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量110

点赞数

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/qq_45898579/article/details/114646343

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

CSS学习第三天（2）-CSS的盒子模型

在这里插入图片描述
网页布局过程

网页布局的核心

1 盒子模型

1.1 盒子模型的组成

在这里插入图片描述

1.2 边框

在这里插入图片描述
边框的样式：虚线实线。。。solid实线 dashed虚线 dotted点线

1.3 边框的复合写法

在这里插入图片描述
边框也可以分开写

代码举例：

			height: 200px;
            width: 200px;

            border: 10px solid pink;
            border-top: 10px dotted red;

1.4 表格的细线边框

在这里插入图片描述

1.5 边框会影响盒子实际大小

在这里插入图片描述

1.6 内边距

在这里插入图片描述
盒子内边距的复合写法

内边距也影响盒子的实际大小

padding不撑开盒子的情况

1.7外边距

在这里插入图片描述
外边距复合写法和padding一致

1.7.1 外边距典型应用-使盒子水平居中显示

在这里插入图片描述

注意该用法只针对块级元素，对于行内元素以及行内块元素，想要实现居中对齐只需在他们的父亲元素中添加text-aligh:center;即可实现

1.8外边距合并

在这里插入图片描述

1.8.1 相邻元素垂直外边距的合并

在这里插入图片描述

1.8.2 父子元素垂直外边距的塌陷

在这里插入图片描述
第三种方法较为常用，因为它不会引发盒子大小的改变

1.9 清楚内外边距

在这里插入图片描述

2 PS的基本操作

在这里插入图片描述

3 案例

案例1：

<!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>案例2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            margin: 100px auto;
            width: 300px;
            height: 415px;
            background-color: white;
        }

        .box img {
            /* 让图片的宽度和父亲一样宽 */
            width: 100%;
        }

        .review {
            font-size: 14px;
            margin-top: 30px;
            padding: 0 28px;
            height: 70px;
        }

        .appraise {
            color: #c3c3cc;
            font-size: 12px;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info {
            margin-top: 15px;
        }

        .redmi {
            display: inline;
            font-size: 14px;
            padding: 0 10px 0 28px;
        }

        .redmi a {
            text-decoration: none;
            color: black;
            font-weight: 400;
        }

        span {
            color: gray;
        }

        .money {
            font-size: 14px;
            color: #ff9c57;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#"><img src="images/3.png" alt=""></a>

        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于117384232的评价</div>
        <div class="info">
            <h4 class="redmi">
                <a href="#">Redmi AirDots真无线蓝...</a>
            </h4>
            <span>|</span>
            <span class="money">
                99.9元
            </span>
        </div>
    </div>

</body>

</html>

效果图：
在这里插入图片描述

案例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>案例3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 250px;
            height: 165px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .title {
            height: 32px;
            font-size: 14px;
            font-weight: 400;
            border-bottom: 1px dotted #ccc;
            /* 让字垂直居中 */
            line-height: 32px;
            padding-left: 15px;
        }

        /* 去掉li中的小圆点 */
        li {
            list-style: none;
        }

        .box ul {
            padding-top: 10px;
        }

        .box ul li {
            padding-top: 1px;
            padding-left: 16px;
        }

        .box ul li a {
            text-decoration: none;
            color: black;
            font-size: 12px;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3 class="title">
            品优购快报
        </h3>
        <ul>
            <li><a href="#">【特惠】爆款二级5折起！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼3折起！</a></li>
            <li><a href="#">【特惠】蓝牙耳机免费送！</a></li>
            <li><a href="#">【特惠】9.9元抵1000元优惠券！</a></li>
            <li><a href="#">【特惠】长虹智能空调0元购！</a></li>
        </ul>
    </div>

</body>

</html>