当前位置：首页 > news >正文

【前端基础】Day 4 CSS盒子模型

news 来源：原创 2025/6/10 21:20:49

1. 盒子模型

1.1 盒子模型布局

1.2 盒子模型组成

1.3 边框

1.4 表格细线边框

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

1.6 内边距

1.7 外边距

1.8 外边距合并

1.9 清除内外边距

2. PS基本操作

3. 综合案例

3.1 案例1

3.2 案例2-快报模块

4. 圆角边框

5. 盒子阴影

6. 文字阴影（了解）

1. 盒子模型

1.1 盒子模型布局

1.2 盒子模型组成

1.3 边框

    <style>
        div {
            width: 300px;
            height: 200px;
            /* 边框粗细 一般单位用px */
            border-width: 5px;
            /* 边框的样式 solid 实线边框  dashed 虚线边框  dotted 点线边框 */
            border-style: dotted;
            /* 边框的颜色 */
            border-color: pink;
        }
    </style>

具有重叠性，所以一般先写大范围再写小范围

/* 得到的盒子为：上边框粗细为2像素、实线、红色，其余边框粗细为5像素、实线、蓝色 */

border: 5px solid blue;

border-top: 2px solid red;

/* 得到的盒子为：边框粗细均为5像素、实线、蓝色 */

border-top: 2px solid red;

border: 5px solid blue;

1.4 表格细线边框

    <style>
        table {
            width: 500px;
            height: 249px;
        }

        th {
            height: 35px;
        }

        table,
        td,
        th {
            border: 1px solid red;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排行</th>
                <th>关键词</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>hhh</td>
            </tr>
        </tbody>
    </table>
</body>

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

1.6 内边距

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

padding-right: 5px;

复合写法：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

盒子内字数不一样多，让padding撑开盒子——新浪导航案例。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            /* 文字居中对齐 */
            line-height: 41px;
        }

        div a {
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            display: inline-block;
            padding: 0 20px;
        }

        div a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>

</body>

</html>