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

发布于 2021-11-6 13:04
浏览
0收藏

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

#星光计划1.0#css盒子模型学习分享-开源基础软件社区

:::

一:Box Model概述
所有HTML元素其实都可以看成一个盒子,形如其名,其本身是一个盒子,封装周围的元素,简单分成边距,边框,填充以及实际内容。模型允许我们在其他元素和周边元素的边框之间的空隙中放置元素,下面的图片说明了盒子模型:
#星光计划1.0#css盒子模型学习分享-开源基础软件社区
二:边框
1.颜色:其实都是简单代码配上颜色
#星光计划1.0#css盒子模型学习分享-开源基础软件社区
如果不加特定的方位词,那么输出的代码所运行的四个边框为同一颜色
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>

<body>
<p class=“none”>无</p>
<p class=“dotted”>虚线</p>
<p class=“dashed”>大虚线。</p>
<p class=“solid”>实线</p>
<p class=“double”>双</p>
<p class=“groove”> 凹槽</p>
<p class=“ridge”>垄状</p>
<p class=“inset”>嵌入</p>
<p class=“outset”>外凸</p>
<p class=“hidden”>隐藏</p>
</body>

</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盒子模型学习分享-开源基础软件社区
以上是我对于盒子模型的总结,还有许多不足希望各位大佬指出。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-11-6 13:04:24修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐