CSS篇十六——盒子模型之边框-CFANZ编程社区

一、CSS盒子模型

网页布局过程：

1.先准备好相关的网页元素，网页元素基本都是盒子Box。

2.利用CSS设置盒子样式，然后拜访到相应的位置。 3.往盒子里装内容。

网页布局的核心本质：利用CSS摆盒子

1.1 盒子模型组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框（border）、外边距（margin）、内边距（padding）和实际内容（content）

1.2 边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度、边框样式以及边框颜色。

1.2.1 语法格式

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框的颜色

边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red; /* 只设定上边框，其余同理 */

1.2.2 边框样式 border-style

属性值	作用
none	无边框（默认值）
hidden	隐藏边框
dotted	在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线，否则为实线
dashed	在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线，否则为实线
solid	实现边框
double	双线边框，两条单线与其间隔的和等于指定的border-width值
groove	根据border-color的值画3D凹槽
ridge	根据border-color的值画菱形边框
inset	根据border-color的值画3D凹边
outset	根据border-color的值画3D凸边

1.2.3 代码示例

代码如下所示：

<!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>盒子模型边框border</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细，一般情况下都用 px */
            border-width: 10px;
            /* border-style 边框样式 solid实线边框 dashed虚线边框 dotted点线边框 */
            /* border-style: dashed; */
            /* border-color 边框颜色 */
            border-color: steelblue;
            /* 边框的复合写法 简写： */
            /* border: 5px solid rgb(71, 110, 71); */
            border-top: 5px dotted yellow;
            border-bottom: 10px dashed blue;
            border-right: 8px solid green;
            border-left: 8px solid red;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

结果如下：

CSS篇十六——盒子模型之边框_盒子模型

课堂小练习：

设置一个200*200的盒子，要求上边框为红色，其余边框为蓝色。

<!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>课堂作业</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* border-top: 5px solid red;
            border-left: 5px solid blue;
            border-right: 5px solid blue;
            /* border-bottom: 5px solid blue; */
            /* 利用层叠性，上述写法可以实现但过于麻烦 */
            border: 5px solid blue;
            border-top: 5px solid red;
            /* 注意 不能颠倒顺序 */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果如下：

CSS篇十六——盒子模型之边框_百度_02

1.3 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

1.3.1 语法格式、代码示例及结果

border-collapse: collapse; /* 合并边框 */

代码示例：

<!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>细线边框电视剧排行榜</title>
    <style>
        table,
        td,
        th {
            border: 1px solid steelblue;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            text-align: center;
            font-size: 14px;
        }

        table {
            width: 600px;
            height: 250px;
        }
    </style>
</head>

<body>
    <table align="center" cellpadding=20px cellspacing="0">
        <thead>
            <tr>
                <th> 排名 </th>
                <th> 剧名 </th>
                <th> 热度 </th>
                <th> 豆瓣评分 </th>
                <th> 相关链接 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> 1 </td>
                <td> 苍兰诀 </td>
                <td> 80.41 </td>
                <td> 7.9 </td>
                <td>
                    <a href="https://baike.baidu.com/item/苍兰诀/53935024?fr=aladdin"> 百度百科 </a>  
                    <a href="images/苍兰诀.webp"> 图片 </a>  
                    <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=674913"> 贴吧 </a>
                </td>
            </tr>
            <tr>
                <td> 2 </td>
                <td> 冰雨火 </td>
                <td> 80.01 </td>
                <td> 7.3 </td>
                <td>
                    <a href="https://baike.baidu.com/item/冰雨火/24256929?fr=aladdin"> 百度百科 </a>  
                    <a href="images/冰雨火.webp"> 图片 </a>  
                    <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=1958739"> 贴吧 </a>
                </td>
            </tr>
            <tr>
                <td> 3 </td>
                <td> 沉香如屑 沉香重华 </td>
                <td> 79.02 </td>
                <td> 5.9 </td>
                <td>
                    <a href="https://baike.baidu.com/item/沉香如屑/19835449?fr=aladdin"> 百度百科 </a>  
                    <a href="images/沉香如屑.webp"> 图片 </a>  
                    <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=641437"> 贴吧 </a>
                </td>
            </tr>
            <tr>
                <td> 4 </td>
                <td> 罚罪 </td>
                <td> 77.05 </td>
                <td> 7.0 </td>
                <td>
                    <a href="https://baike.baidu.com/item/罚罪/61874368?fr=aladdin"> 百度百科 </a>  
                    <a href="images/罚罪.webp"> 图片 </a>  
                    <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=7321738"> 贴吧 </a>
                </td>
            </tr>
            <tr>
                <td> 5 </td>
                <td> 星汉灿烂 月升沧海 </td>
                <td> 72.80 </td>
                <td> 7.6 </td>
                <td>
                    <a href="https://baike.baidu.com/item/星汉灿烂/24583310?fr=aladdin"> 百度百科 </a>  
                    <a href="images/星汉灿烂.webp"> 图片 </a>  
                    <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=1549016"> 贴吧 </a>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>