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

[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页

news 2026/2/10 15:47:11

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

前言

CSS盒模型简介

CSS盒模型

CSS盒模型结构

盒模型的属性

边框border

边框宽度border-width

边框样式border-style

边框颜色border-color

边框简写border

边框的四个方向

border-radius

外边距margin

内边距padding

盒模型的大小

课后练习

应用CSS行内样式表

使用border-radius属性制作圆角边框。

网页标题：字体样式综合应用

总结

前言

1 盒模型简介

2 盒模型的属性

3 盒模型的大小

4 盒子的margin合并问题

CSS盒模型简介

CSS盒子模型（Box Model），用于描述HTML元素形成的矩形盒子。

网页中的所有元素都可以看成是一个盒子，占据着一定的页面空间，可以通过CSS来控制这些盒子的显示属性，把这些盒子进行定位，完成整个页面的布局。

盒模型是CSS定位布局的核心内容

CSS盒模型

网页中的所有元素都可以看成是一个盒子，占据着一定的页面空间

例如：页面上的区域（ div ）、列表（ ul / ol ）、段落（ p ）等都可以是盒子

网页中的所有元素都可以看成是一个盒子，占据着一定的页面空间

每个 HTML 元素都具有元素内容、内边距、边框和外边距。 CSS 框模型的结构如图所示。

Overflow 属性，默认值为“ visible ”，即超出的内容可见

CSS盒模型结构

盒模型的属性

padding-border-margin模型是一个非常通用的描述盒子布局形式的方法。对于任何一个盒子，都可以分别通过设定4条边各自的padding、border和margin，实现各种各样的排版效果。

边框border

使用CSS边框的相关属性可以为HTML元素创建不同宽度、样式和颜色的边框。

边框宽度border-width

CSS中的border-width属性用于定义HTML元素边框的宽度。该属性有四种取值

边框样式border-style

CSS 中的 border-style 属性用于定义 HTML 元素边框的样式。该属性有 10 种取值，如表所示。

效果如下：

边框颜色border-color

CSS 中的 border-color 属性用于定义 HTML 元素边框的颜色。其属性值为正常的颜色值即可，例如 red 表示红色边框等。

{ border-color:red ; } // 四条边框线均设置为红色

边框简写border

CSS中的border属性可以用于概括其它3种边框属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项边框属性时可以使用border属性进行简写。属性值无规定顺序，彼此之间用空格隔开，如果其中某个属性没有规定可以省略不写。

边框的四个方向

border-top : 上框线

border-right ：右框线

border-bottom ：下框线

border-left ：左框线

border-radius

设置圆角边框，值表示圆角的水平半径

其值不允许取负值，为 0 则角为矩形，不再是圆角

外边距margin

Margin 和 属性值可以是长度值或百分比，包括可以使用负数。

内边距padding

元素的内边距也可以被理解为元素内容周围的填充物，因为内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。 padding 属性值可以是长度值或者百分比值，但是不可以使用负数。

浏览器对盒子的内外边距有一个默认的属性值，一般在布局网页时要对该默认值进行清零。

注意，属性的取值只有为0的时候才能省略单位，其他情况不能省略单位。

需要注意的是，只有普通块级元素的垂直外边距才会发生合并，如果是特殊情况例如浮动框、行内框或者绝对定位之间的外边距是不会发生合并的。

盒模型的大小

注意： width 和 height 分别表示 内容区域的宽度和高度 ，并不是一个盒子的大小。

盒模型的大小（宽度和高度）

宽度 = 左右外边距 + 左右内边距 + 左右边框宽度 + 内容宽度

高度 = 上下外边距 + 上下内边距 + 上下边框高度 + 内容高度

课后练习

前情提要：

应用CSS行内样式表

网页标题：伪类的应用
html主体部分代码如下所示：

<body>

        <div>

            最近，在我遇到这样一个人后，我的想法改变了。我和两个已成年的女儿一起去了一家咖啡厅。但这家咖啡厅挤满了吵闹的人群，所以我们不得不爬上陡峭的楼梯才找到了空桌。在享用过咖啡和点心之后，我们走在陡峭的楼梯上准备下楼，在那样狭窄的空间里只能供一个人上下楼，几乎没有任何空间可以让另一个人爬上去或下来。

        </div>

        <div>

          <h2>学习CSS伪类选择符</h2>

                 <ul>

                <li>link:设置a标记在未访问前的样式</li>

                <li>hover：设置a标记在鼠标悬停时的样式</li>

                <li>active：设置a标记在被用户激活时的样式</li>

                <li>visited：设置a标记在被访问后的样式</li>

                <li>first-letter：设置第一个字符的样式</li>

                <li>first-line：设置第一行的样式</li>

                <li>first-child：设置第一个子标记的样式</li>

              </ul>

        </div>

    </body>

使用外部样式表，为该html设置样式，新建一个css文件命名为”style1.css”，在该样式文件中实现以下样式的定义：
为第一个div定义demo1类，设置其样式为：1px的实线浅灰色边框；宽300px；内部边距为10px(padding:10px;)；上下外边距为50px，左右外边距为自动（margin:50px auto;）
为第一个div设置首字下沉的样式效果（为demo1类的:first-letter设置如下样式）：字体加粗，大小2em,，字体颜色为红色，向左浮动(float:left)；
将第一个div中的第一行文字设置为红色（为demo1类的:first-line设置如下样式）：字体颜色设置为红色。
为第二个div定义demo2类，设置其样式为：1px的实线浅灰色边框；宽350px；内部边距为10px(padding:10px;)；上下外边距为10px，左右外边距为自动（margin:10px auto;）。
为demo2下的h2设置样式：文本居中对齐。
为demo2下的第一个li (li:first-child) 设置样式：字体大小1.2em；字体颜色为红色；字体加粗。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类的应用</title>
<link rel="stylesheet" href="CSS/style1.css">
</head><body> <div class="demo1">最近，在我遇到这样一个人后，我的想法改变了。我和两个已成年的女儿一起去了一家咖啡厅。但这家咖啡厅挤满了吵闹的人群，所以我们不得不爬上陡峭的楼梯才找到了空桌。在享用过咖啡和点心之后，我们走在陡峭的楼梯上准备下楼，在那样狭窄的空间里只能供一个人上下楼，几乎没有任何空间可以让另一个人爬上去或下来。</div><div class="demo2"><h2>学习CSS伪类选择符</h2><ul><li>link:设置a标记在未访问前的样式</li><li>hover：设置a标记在鼠标悬停时的样式</li><li>active：设置a标记在被用户激活时的样式</li><li>visited：设置a标记在被访问后的样式</li><li>first-letter：设置第一个字符的样式</li><li>first-line：设置第一行的样式</li><li>first-child：设置第一个子标记的样式</li></ul></div>
</body> </html>

在浏览器中观察各种边框线的显示效果。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-style</title>
<style>
div{border-width:6px;  /*边框宽度为6px*/border-color:#000; /*边框颜色为黑色*/margin:20px;       /*外边距为20px*/padding:5px;       /*内边距为5px*/background-color:#ffc; /*淡黄色背景*/
}
</style>
</head>
<body><div style="border-style:dashed">虚线边框</div><div style="border-style:dotted">点线边框</div><div style="border-style:double">双线边框</div><div style="border-style:groove">凹槽边框</div><div style="border-style:inset">凹边边框</div><div style="border-style:outset">凸边边框</div><div style="border-style:ridge">菱形边框</div><div style="border-style:solid">实线边框</div>
</body>
</html>

使用border-radius属性制作圆角边框。

网页body中的代码如下：

<body>

<div id="box1" class="box"></div>

<div id="box2" class="box"></div>

</body>

使用内部样式表，分别定义box、box1、box2的样式：
定义类box的样式为：宽100px，高100px，边框宽3px，边框颜色为#fd8e47，边框样式为实线边框。
定义ID选择器box1的样式为：设置圆角边框的半径值为20px，上边框颜色为#f00，右边框的颜色为#00f，下边框的颜色为#ff0，左边框的颜色为#f90
定义ID选择器box2的样式为：设置圆角边框的半径值为50px

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆角边框</title>
<style>.box{width:100px;height:100px;border:3px solid #fd8e47;}#box1{border-radius:20px;border-color:#f00 #00f #ff0 #f90;}#box2{border-radius:50px;}
</style>
</head><body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</body></html>

网页标题：字体样式综合应用

html主体部分代码如下所示：

<body>

<h1>营销模式</h1>

<p>美家装饰营销团队成立于2010年，全力推广国内知名家居品牌。团队开创了“online-to-offline”结合的销售模式，是国内家居O2O模式的引领者。商城目前在全国共开设68家线下体验中心，为消费者提供一对一专属家居顾问式服务。</p>

<p>作为家居行业的标杆品牌，商城率先推出家居定制服务，为每一位消费者打开一扇个性化装饰之门。</p>

</body>

使用内部样式表，为以上html设置如下样式：
一级标题设置为：黑体，蓝色
所有段落字体设置为：Arial, Helvetica, sans-serif；字体大小12pt
“美家装饰”设置样式：楷体，加粗；字体大小30px；红色
“家居”设置样式：字体粗600；大小为30px
“68”设置样式：字体粗600；大小为30px
设置第二个段落p的字体显示为斜体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体样式综合应用</title>
<style>h1{font-family:"黑体";color:blue;}p{font-family:Arial, Helvetica, sans-serif;font-size:12pt;}.text1{font-family:楷体;font-weight:bold;font-size:30px;color:red;}.text2{font-weight:600;font-size:30px;}.text3{font-style:italic;}
</style>
</head><body><h1>营销模式</h1><p><span class="text1">美家装饰</span>营销团队成立于2010年，全力推广国内知名<span class="text2">家居</span>品牌。团队开创了“online-to-offline”结合的销售模式，是国内家居O2O模式的引领者。商城目前在全国共开设<span class="text2">68</span>家线下体验中心，为消费者提供一对一专属家居顾问式服务。</p><p class="text3">作为家居行业的标杆品牌，商城率先推出家居定制服务，为每一位消费者打开一扇个性化装饰之门。</p>
</body></html>

为标题1增加灰色背景，设置其高度为60px，设置文本居中显示
为段落p首行缩进两字符，行高为200%；
在图中所示第二段文字的内容中插入图片“1.gif”，设置该图片与段落文字的垂直对齐方式为中部对齐。
为文字“美家装饰”设置上划线；文字“家居”设置删除线；文字“68”设置下划线。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体样式综合应用</title>
<style>h1{font-family:"黑体";color:blue;background-color:#CCC;height:60px;line-height:60px;text-align:center;}}p{font-family:Arial, Helvetica, sans-serif;font-size:12pt;text-indent:2em;line-height:200%}.text1{font-family:楷体;font-weight:bold;font-size:30px;color:red;text-decoration:overline;}.text2{font-weight:600;font-size:30px;}.text3{font-style:italic;}img{vertical-align:middle;}
</style>
</head><body><h1>营销模式</h1><p><span class="text1">美家装饰</span>营销团队成立于2010年，全力推广国内知名<span class="text2" style="text-decoration:line-through;">家居</span>品牌。团队开创了“online-to-offline”结合的销售模式，是国内家居O2O模式的引领者。商城目前在全国共开设<span class="text2" style="text-decoration:underline">68</span>家线下体验中心，为消费者提供一对一专属家居顾问式服务。</p><p class="text3">作为家居行业的标杆品牌，<img src="images/1.gif">商城率先推出家居定制服务，为每一位消费者打开一扇个性化装饰之门。</p>
</body></html>

总结

1 盒模型简介

2 盒模型的属性

3 盒模型的大小

4 盒子的margin合并问题

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…...

编程日记 2023/12/2 10:28:22

SQL练习

建数据库： mysql> create database worker; Query OK, 1 row affected (0.00 sec) mysql> CREATE TABLE worker (-> 部门号 int(11) NOT NULL,-> 职工号 int(11) NOT NULL,-> 工作时间 date NOT NULL,-> 工资 float(8,2) NOT NULL,-> 政治面貌…...

编程日记 2023/12/2 10:25:19

创始人于东来：胖东来员工不想上班，请假不允许不批假！

12月2日早晨，一则关于“胖东来员工不想上班请假不允许不批假”的新闻登上了热搜，引起了广泛关注。熟悉胖东来的网友们可能知道，这并不是这家企业第一次成为热搜的焦点。据白鹿视频12月1日报道，11月25日，河南许昌的胖东…...

编程日记 2023/12/2 10:23:18

C++学习之路（十五）C++ 用Qt5实现一个工具箱（增加16进制颜色码转换和屏幕颜色提取功能）- 示例代码拆分讲解

上篇文章，我们用 Qt5 实现了在小工具箱中添加了《Base64图片编码预览功能》功能。为了继续丰富我们的工具箱，今天我们就再增加两个平时经常用到的功能吧，就是「 16进制颜色码转RGB文本」和「屏幕颜色提取」功能。下面我们就来看看如何来规划…...

编程日记 2023/12/2 10:21:16

【STM32】EXTI外部中断

1 中断系统 1.1 中断简介中断：在主程序运行过程中，出现了特定的中断触发条件（中断源），使得CPU暂停当前正在运行的程序，转而去处理中断程序，处理完成后又返回原来被暂停的位置继续运行。比如&a…...

编程日记 2023/12/2 10:19:14

Linux系统的常见命令十三，显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令（ps、chmod和chown）

本文主要介绍Linux系统的显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令，（ps、chmod和chown） 目录显示系统进程状态文件权限设置（chmod）修改文件或目录所有者和所属组（chown） …...

编程日记 2023/12/2 10:18:13

Python 批量修改文件名

主要步骤通过os.listdir查看该文件夹下所有的文件（包括文件夹）遍历所有文件，如果是文件夹则跳过，或指定跳过指定文件获取文件扩展名按照需求生成新的文件路径文件名进行重命名代码示例 # -*- coding: utf-8 -*- import osdef…...

编程日记 2023/12/2 10:16:11

git的基本命令操作超详细解析教程

Git基础教学 1、初始化配置2、初始化仓库3、工作区域和文件状态4、添加和提交文件5、git reset 回退版本6、git diff查看差异7、删除文件git rm8、.gitignore9、本地文件提交到远程仓库10、分支基础 Git：一个开源的分布式版本控制系统，它可以在本地和远程…...

编程日记 2023/12/2 10:13:09

【代码】两阶段鲁棒优化/微电网经济调度入门到编程

内容包括 matlab-yalmipcplex微电网两阶段鲁棒经济调度（刘） matlab-yalmipcplex两阶段鲁棒微电网容量经济优化调度两阶段鲁棒优化CCG列于约束生成和Benders代码，可扩展改编，复现自原外文论文【赠送】虚拟储能单元电动汽车建…...

编程日记 2023/12/2 10:12:08

【图论】重庆大学图论与应用课程期末复习资料2-各章考点（填空证明部分）（私人复习资料）

图论各章考点一、图与网络的基本概念二、树三、连通性四、路径算法五、匹配六、行遍性问题七、平面图一、图与网络的基本概念生成子图：生成子图 G ’ G’ G’中顶点个数V’必须和原图G中V的数量相同，而 E ’ ∈ E E’∈E E’∈E即可。顶点集导出子图…...

编程日记 2023/12/2 10:11:07

基于Intel® AI Analytics Toolkits的智能视频监控系统

【oneAPI DevSummit & OpenVINODevCon联合黑客松】跳转链接：https://marketing.csdn.net/p/d2322260c8d99ae24795f727e70e4d3d 目录 1方案背景 2方案描述 3需求分析 4技术可行性分析 5详细设计5.1数据采集 5.2视频解码与帧提取 5.3人脸检测 5.4行为识别…...

编程日记 2023/12/2 10:10:06

深度学习中的注意力机制：原理、应用与实践

深度学习中的注意力机制：原理、应用与实践摘要： 本文将深入探讨深度学习中的注意力机制，包括其原理、应用领域和实践方法。我们将通过详细的解析和代码示例，帮助读者更好地理解和应用注意力机制，从而提升深度学习模…...

编程日记 2023/12/2 10:08:05

将本地项目推送到github

欢迎大家到我的博客浏览。将本地项目推送到github | YinKais Blog 本地项目上传至 GitHub 1、进入项目根目录，初始化本地仓库 git init 2、创建密钥：创建 .ssh 文件夹，并进入 .ssh 文件夹 mkdir .ssh cd .ssh/ 3、生成…...

编程日记 2023/12/2 10:05:01

[读论文]meshGPT

概述任务：无条件生成mesh （无颜色）数据集：shapenet v2方法：先trian一个auto encoder，用来获得code book；然后trian一个自回归的transformermesh表达：face序列。face按规定的顺序&a…...

编程日记 2023/12/2 10:02:59

反序列化漏洞详解（一）

目录一、php面向对象二、类 2.1 类的定义 2.2 类的修饰符介绍三、序列化 3.1 序列化的作用 3.2 序列化之后的表达方式/格式 ① 简单序列化 ② 数组序列化 ③ 对象序列化 ④ 私有修饰符序列化 ⑤ 保护修饰符序列化 ⑥ 成员属性调用对象序列化四、反序列化 …...

编程日记 2023/12/2 10:00:57

键盘打字盲打练习系列之指法练习——2

一.欢迎来到我的酒馆盲打，指法练习！ 目录一.欢迎来到我的酒馆二.开始练习二.开始练习前面一个章节简单地介绍了基准键位、字母键位和数字符号键位指法，在这个章节详细介绍指法。有了前面的章节的基础练习，相信大家对盲打也有了…...

编程日记 2023/12/2 9:57:54

小程序----使用图表显示数据--canvas

需求：在小程序上实现数据可视化思路：本来想用的是echarts或者相关的可视化插件，但因为用的是vue3，大多数插件不支持，所以用了echarts，但最后打包的时候说包太大超过2M无法上传，百度了一下&…...

编程日记 2023/12/2 9:56:53

⭐ Unity 开发bug —— 打包后shader失效或者bug (我这里用Shader做两张图片的合并发现了问题)

1.这里我代码没啥问题~~~编辑器里也没毛病 void Start(){// 加载底图和上层图片string backgroundImagePath Application.streamingAssetsPath "/background.jpg";Texture2D backgroundTexture new Texture2D(2, 2);byte[] backgroundImageData System.IO.File.R…...

编程日记 2023/12/2 9:55:51

document

原贴连接 1.在整个文档范围内查询元素节点功能API返回值根据id值查询document.getElementById(“id值”)一个具体的元素节根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组根据name属性值查询document.getElementsByName(“name值”)元素节点数组根据类…...

编程日记 2023/12/2 9:54:50

NodeJS（二）：npm包管理工具、yarn、npx、pnpm工具等

目录 (一)npm包管理工具 1.了解npm 2.npm的配置文件常见的配置属性 scripts属性*** 依赖的版本管理 3.npm安装包的细节 4.package-lock文件 5.npm install原理** 6.npm的其他命令 (二) 其他包管理工具 1.yarn工具基本指令 2.cnpm工具 3.npx工具 (1)执行本地…...

编程日记 2023/12/2 9:53:49

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞！！！ 抽象现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...

编程新知 2026/2/8 5:22:04

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/2/10 3:29:01

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/2/10 13:18:55

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

SpringCloudGateway 自定义局部过滤器

场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录一、SQL注入二、insert注入三、报错型注入四、updatexml函数五、源码审计六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因常见解决方法更好的解决方法设计精妙之处登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现第一章需求分析 1.1 需求总体介绍本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...

编程新知 2026/1/25 10:12:06

前言

CSS盒模型简介

CSS盒模型

CSS盒模型结构

盒模型的属性

边框border

边框宽度border-width

边框样式border-style

边框颜色border-color

边框简写border

边框的四个方向

border-radius

外边距margin

内边距padding

盒模型的大小

课后练习

应用CSS行内样式表

使用border-radius属性制作圆角边框。

网页标题：字体样式综合应用

总结

相关文章：