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

【小白学HTML5】盒模型_第一讲

任何一个网站都是由一个一个的矩形框(小盒子)组成:拿京东来说:

一个盒子的基本属性有:width、height、padding、margin、border,分别为宽、高、内边距、外边距、边框。

padding:padding-left 左内边距、padding-rigth 右内边距、padding-top 上内边距、padding-bottom 下内边距

magin:magin-left 左外边距、magin-rigth 右外边距、magin-top 上外边距、magin-bottom 下外边距

在计算盒子的大小时,浏览器只计算到border,也就是边框的大小,不会计算盒子的margin,但是可以通过属性:box-sizing来设置盒子大小的计算方式。

box-sizing:content-box,默认值content-box,不计算margin的值的,只计算到border。

box-sizing:border-box,设置为盒子的实际大小,会缩放内容区的大小。目前比较流行这种写法。


http://www.kler.cn/a/554064.html

相关文章:

  • html网络安全工具源码 网络安全前端
  • null和undefined的区别
  • 使用Maven将Web应用打包并部署到Tomcat服务器运行
  • VisionMaster4.4 新增功能 体验感受
  • C++ 设计模式-命令模式
  • 《运维工程师如何利用DeepSeek实现智能运维:分级实战指南》
  • 检索增强生成(RAG)技术应用方案设计
  • MySQL | 库操作
  • Linux—运行级别、文件目录指令、时间日期指令、搜索查找指令、压缩解压指令
  • 华为OD最新机试真题-喊7的次数重排-C++-OD统一考试(E卷)
  • linux的广泛应用
  • 学习web数据埋点
  • 「正版软件」PDF Reader - 专业 PDF 编辑阅读工具软件
  • Redis数据类型及使用场景
  • 证券交易之:OTC账号
  • 深度求索DeepSeek:AI领域的璀璨新星
  • Windows桌面系统管理5:Windows 10操作系统注册表
  • c++标准io与线程,互斥锁
  • jEasyUI 创建学校课程表
  • 区块链虚拟币资产去中心化私钥钱包开发