当前位置: 首页 > news >正文

css学习7(盒子模型)

1、盒子模型图:

CSS box-model

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型</title><style>div{background-color: limegreen;width: 300px;border: 5px solid green;padding: 25px;margin: 100px;}</style></head><body><h2>盒子模型展示</h2><p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p><div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div></body>
</html>

运行结果:

 

http://www.lryc.cn/news/149371.html

相关文章:

  • C++笔记之临时变量与临时对象与匿名对象
  • 缓存技术(缓存穿透,缓存雪崩,缓存击穿)
  • 实操教程 | 触发器实现 Apache DolphinScheduler 失败钉钉自动告警
  • 以“迅”防“汛”!5G视频快线筑牢防汛“安全堤”
  • jmeter 性能测试工具的使用(Web性能测试)
  • springboot整合第三方技术邮件系统
  • Python入门学习——Day2-变量和数据类型
  • Graylog 更改显示的时区(Display timezone)
  • 【网络安全防护】上海道宁与Bitdefender帮助您构建弹性网络并降低安全运营成本
  • 文心一言 VS CHATGPT
  • 2023-09-01力扣每日一题
  • 【Python】从入门到上头— IO编程(8)
  • R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享...
  • LeetCode 刷题第四轮 Offer I + 类型题
  • LabVIEW计算测量路径输出端随机变量的概率分布密度
  • [C++ 网络协议] 多进程服务器端
  • 李宏毅 2022机器学习 HW2 strong baseline 上分路线
  • 伦敦银交易时间怎么选择?
  • 解决FreeRTOS程序跑不起来,打印调试却提示“Error:..\FreeRTOS\port\RVDS\ARM_CM3\port.c,244“的方法
  • Python序列类型
  • 【python爬虫】5.爬虫实操(歌词爬取)
  • 浅探Android 逆向前景趋势~
  • 国际音标学习笔记
  • Azure - AzCopy学习
  • 解决无法远程连接MySQL服务的问题
  • mybatiplus代码生成器
  • leetcode分类刷题:哈希表(Hash Table)(三、循环存在问题)
  • 43、基于 springboot 自动配置的 spring mvc 错误处理,就是演示项目报错后,跳转到自定义的错误页面
  • 干货分享,现代列式数据库系统如何设计与实现? | StoneData 论文选读
  • 说说构建流批一体准实时数仓