【玩转CSS】盒子模型

最新推荐文章于 2024-10-03 13:49:55 发布

饿饿好饿

最新推荐文章于 2024-10-03 13:49:55 发布

阅读量85

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67401417/article/details/126045092

版权

本文详细介绍了CSS的盒子模型，包括盒子模型的组成、边框、内边距、外边距及其影响，通过实例展示了如何利用盒子模型进行网页布局。文章还涵盖了表格的细线边框、边距合并以及如何清除内外边距。通过PS基本操作和综合案例，帮助读者掌握CSS布局技巧。

摘要由CSDN通过智能技术生成

?? 信仰：一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去
?? 欢迎关注??点赞??收藏??留言??
?? 本文由原创，CSDN首发！
?? 系列专栏：HTML5+CSS3+移动端前端
?? 首发时间：2022年7月15日
如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

阅读指南

? 学习目标

?? 盒子模型

1. 看透网页布局的本质

2. 盒子模型（Box Model）组成

3. 边框（border）

4. 表格的细线边框

5. 边框会影响盒子的实际大小

6. 内边距（padding）

案例：新浪导航–padding影响盒子好处

小米侧边栏案例修改

7. 外边距（margin）

8. 外边距合并-嵌套块元素塌陷

9. 清除内外边距

?? PS 基本操作

?? 综合案例

1. 产品模块

2. 快报模块

?? 圆角边框

?? 盒子阴影

?? 文字阴影（了解）

学习目标

能够准确阐述盒子模型的 4 个组成部分
能够利用边框复合写法给元素添加边框
能够计算盒子的实际大小
能够利用盒子模型布局模块案例
能够给盒子设置圆角边框
能够给盒子添加阴影
能够给文字添加阴影

?? 盒子模型

页面布局要学习三大核心：盒子模型、浮动和定位，学好盒子模型能非常好地帮助我们布局页面

1. 看透网页布局的本质

网页布局过程：

先准备好相关的网页元素，网页元素基本上都是盒子 Box
利用 CSS 设置好盒子样式，然后摆放到相应位置
往盒子里面装内容

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

2. 盒子模型（Box Model）组成

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距和实际内容

在这里插入图片描述

3. 边框（border）

border 可以设置元素的边框，边框由三部分组成：边框宽度（粗细）、边框样式和边框颜色

语法：

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

属性

作用

border-width

定义边框粗细，单位是 px

border-style

边框的样式

border-color

边框颜色

<!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: 300px;
            height: 200px;
            border-width: 5px;
            /* 实线边框 */
            /* border-style: solid; */
            /* 虚线边框 */
            /* border-style: dashed; */
            /* 点线边框 */
            border-style: dotted;
            border-color: red;
        }
    </style>
</head>

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

</html>

在这里插入图片描述
边框简写：

border: 1px solid red;  /* 没有顺序之分 */

边框分开写法：

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

4. 表格的细线边框

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

语法：

border-collapse: collapse;

collapse 单词是合并的意思
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 {
            width: 500px;
            height: 251px;
        }

        th {
            height: 35px;
        }

        table,
        td,
        th {
            border: 1px solid rebeccapurple;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0"&