#星光计划1.0#css盒子模型学习分享原创

小吴在努力

发布于 2021-11-6 13:04

浏览

0收藏

在学习完C语言的基础上，小吴同学接触盒子模型。
::: hljs-center

#星光计划1.0#css盒子模型学习分享-鸿蒙开发者社区

:::

一：Box Model概述
所有HTML元素其实都可以看成一个盒子，形如其名，其本身是一个盒子，封装周围的元素，简单分成边距，边框，填充以及实际内容。模型允许我们在其他元素和周边元素的边框之间的空隙中放置元素，下面的图片说明了盒子模型：
#星光计划1.0#css盒子模型学习分享-鸿蒙开发者社区
二：边框
1.颜色：其实都是简单代码配上颜色

如果不加特定的方位词，那么输出的代码所运行的四个边框为同一颜色
2.边框粗细和样式也很好理解。
属性即thin，medium，thick（不是fat哦），相素值
样式（border-style）：none（无边框）
dotted（定义一个点线边框）
deshed（定义一个虚线边框）
solid(定义一个实线边框）
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值
可以通过以下代码来解释：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
<style>
.a{
border-style: solid;/边框/
border-color: rgb(222, 135, 218);
border-width:thick;
}
.b{
border-style: solid;
border-top-color: rgb(21, 255, 0);
border-width:medium;
}
.c{
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<p class=“a”>实线粉色边框</p>
<p class=“b”>实线绿色上边框</p>
<p class=“c”>实线边框</p>
<p><b>注意：</b>"border-color”和“border-with"如果单独使用不起作用，要先使用“border-style”设置边框</p>
</body>
运行结果如下：
#星光计划1.0#css盒子模型学习分享-鸿蒙开发者社区
样式同理，只要输入正确代码即可，以下同样展示代码：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
</head>
<style>
.none {border-style:none;}
.dotted {border-style:dotted;}
.dashed {border-style:dashed;}
.solid {border-style:solid;}
.double {border-style:double;}
.groove {border-style:groove;}
.ridge {border-style:ridge;}
.inset {border-style:inset;}
.outset {border-style:outset;}
.hidden {border-style:hidden;}
</style>
</head>

</html>
运行结果：
#星光计划1.0#css盒子模型学习分享-鸿蒙开发者社区
三.边距
内边距:upadding-left
padding-right
padding-top
padding-bottom
padding

外边距：margin-top
margin-right
margin-bottom
margin-left
margin

参考概述提供的图片更好理解，只要套用模板再正确设置和输入值即可，唯一需要注意的就是，倘若直接使用background-color,形成的图形没有边距，随意展示一段代码：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
</head>
<style>
.b{
width: 200px;
height: 200px;
margin: 80px;
border: 80px;
border-color: chartreuse;
padding: 30px;

background-color: rgba(210, 105, 30, 0.253);
border: cyan;

}
.c{
background-color:yellow;

}
</style>
</html>
<body>
<div class=“b”>指定边距大小</div>
<div class=“c”>没有指定边距大小</div>
</body>
运行结果如下：
#星光计划1.0#css盒子模型学习分享-鸿蒙开发者社区
以上是我对于盒子模型的总结，还有许多不足希望各位大佬指出。