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简写

效果以及代码展示:

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

相关推荐
hhwyqwqhhwy11 分钟前
设备树之 provider 和 consumer
java·linux·前端
垆边人似月.1 小时前
Python中如何使用get函数实现频次查询
服务器·前端·python
大叔学Linux1 小时前
FreeRTOS任务切换笔记
arm开发·笔记
moshuying2 小时前
DeepSeek开源生产级推理框架DeepInfer:单集群一天处理155万亿token,这意味着什么?
前端
别动我齐刘海2 小时前
机器人 C++ / 系统联调补强2——异常处理、Protobuf
linux·c++·人工智能·学习·算法·机器学习·机器人
一直C2 小时前
嵌入式 Linux 驱动开发学习笔记:内核定时器、platform 总线与 I²C 驱动
linux·驱动开发·嵌入式硬件·学习·imx6ull
wuyk5552 小时前
《WiFi 嵌入式物联网开发全套实战》 | 第 45 章【终章】WiFi 开发全套知识复盘 + 面试高频题 + 进阶路线
物联网·面试·职场和发展
承渊政道3 小时前
Linux网络学习【传输层协议UDP】
linux·网络·网络协议·学习·ubuntu·udp
andrsted3 小时前
练题簿免费刷题小程序:和学习搭子共用一份题库,一起刷题复习
学习·面试·微信小程序·小程序·学习方法·刷题
子兮曰3 小时前
PHP漏洞危机,你的网站升级了吗?
前端·后端·php