Web前端开发入门学习笔记之CSS 57-58--新手超等友爱版- 盒子模子以及边框线 ...

   Foreword写在前面的话：
  各人好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，渴望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中大概存在错误或禁绝确的地方，欢迎各人在评论区提出发起和指正。我非常等候各人的反馈，以便我能不停学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。
PS：本帖以记载学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^
本贴的其他相干学习笔记资料可以通过订阅专栏获取，喜欢的小同伴可以多多点赞+关注呀！后续会 连续更新相干资源的~
  课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马步伐员’ 视频学习记载而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马步伐员_哔哩哔哩_bilibili

第五十七课-盒子模子
盒子模子：布局网页，摆放盒子和内容

原代码和效果图：

使用盒子模子（内容和盒子边缘之间加间隔-padding属性）

发现已经不是顶格内容了而且盒子被撑大了（padding会在盒子的四个方向上添加内边距拉开内容与盒子的间隔）

此时加上bd    border加边框线

加上外边距margin

div标签是独占一整行的

这里是看inspection中的计算样式可以看到盒子模子的各个组成部分

padding内边距：出现在内容与盒子边缘之间
margin外边距：出现在盒子外面，拉开俩个盒子之间的间隔。

第五十八课-盒子模子-边框线

属性值空格隔开。

修改前的代码以及效果：

点线的边框线效果dotted：

虚线dashed：

同时可以修改边框线的px更改巨细

同时我们也可以设置当方向的边框线bd

bdt bdr bdb bdl简写
效果以及代码展示：

末了，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何题目或发起，请随时告诉我。让我们一起学习和进步吧！如果您喜欢我的内容，别忘了点赞和关注哦，我会定期分享更多有代价的信息。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。