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

【基础篇】一文掌握css的盒子模型(margin、padding)

1、CSS 盒子模型(Box Model)

  • 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
  • CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
  • 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

不同部分的说明:

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

为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。


2、元素的宽度和高度

重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道:完整大小的元素,你还必须添加内边距,边框和外边距。

下面的例子中的元素的总宽度为 450px:

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

相关文章:

  • 重生之我是赏金猎人-漏洞挖掘(十一)-某SRC储存XSS多次BypassWAF挖掘
  • Wails简介
  • 滑动窗口 AcWing (JAVA)
  • vue小案例
  • 阅读笔记3——空洞卷积
  • CSS系统学习总结
  • 阿里一面:你做过哪些代码优化?来一个人人可以用的极品案例
  • Android NFC 标签读写Demo与历史漏洞概述
  • 亿级高并发电商项目-- 实战篇 --万达商城项目 六(编写角色管理、用户权限(Spring Security认证授权)、管理员管理等模块)
  • 博视像元获近5000万元融资,主攻半导体前道及锂电高端部件供应
  • SpringCloud-断路器Hystrix
  • JavaScript精简笔记
  • MySQL常用函数汇总
  • 100M网口客户电脑插上网线就断线,自己工厂正常,是什么问题导致?
  • 从零开始学习无人机 00 硬件配置
  • 免翻在Chrome上使用新必应(New Bing)聊天机器人
  • LA@特征值和特征向量
  • transpose代码学习
  • 【Redis】Redis 常用数据类型操作 ② ( 数据库操作 | 切换数据库 | 查询当前数据库键个数 | 清空当前数据库 | 清空所有数据库 )
  • 最简单的物体识别例子
  • 指针——“C”
  • 学习 Linux 内核书籍推荐
  • 深圳硬件黑客松活动,开放报名!
  • 力扣sql简单篇练习(十七)
  • Linux网络技术学习(六)—— 网络设备初始化(II)
  • 一手教你如何搭建Hadoop基于Zookeeper的集群(5台主机)
  • Spring Cloud是什么?怎么理解Spring Cloud?
  • robotframework + selenium自动化测试常见的问题
  • 2023春招java面试题及答案
  • QT+OpenGL光照