3分钟带你了解盒子模型

标题 盒子模型

前言

概念：在HTML中每一个元素都是一个盒子模型
组成：外边距 边框 内边距 内容
注：内容有宽度（width）和高度（height） 来控制的
边框属性：
border-width 边框粗细
border-style 边框线性
border-color 边框颜色

组合写法： border: 2px solid blue 边框2px像素 边框线性 边框颜色蓝色

一、如何创作三角形模型

1.在中创建一个div标签

2.在中打出sty标签，并在sty标签中输入截图代码，即可出现三角形模型

二、月牙形模型

1.同理在中创建一个div标签

2.在中打出sty标签，并在sty标签中输入截图代码，即可出现月牙模型

注：border-radius 为改变边框弯度，弯度到达50%时即为圆圈图形
在div标签中加上class=是类选择器

总结

在盒子模型中，概念和组成部分是必须要记得的。
1.其次三角形模型原理及即改变宽度和高度，将上边 左边 右边改为透明色，只留下底部修改颜色即可。
2.月牙模型原理是一个大圆里面包含一个小圆，小圆和背景颜色相同，只留下大圆修改你喜欢的颜色即可出现月牙图形。
这两个模型都是盒子模型中较为基础的部分。