网站首页 | 最新手游 | 最新软件 |
网站导航
手机游戏
休闲益智 角色扮演 动作冒险 射击枪战 体育竞速 经营策略 MOBA
手机软件
网络浏览 社交聊天 影音播放 学习教育 生活常用 阅读资讯 效率办公 拍照摄影
技术中心
PHP教程 php框架 前端框架 其他 数据库 运维 系统工具 软件教程 手机系统教程
博客中心
数据库 APP开发 电脑问题 编程语言 网络系统 前端开发 互联网
插件下载
输入 banner图 图片脚本 客服 导航分类 播放器 css3 jQuery脚本 jqueryhtml5
源码下载
企业程序 小说有声 网站源码 第三方软件 新闻资讯 第三方源码
电脑软件
聊天工具 视频软件 音乐软件 游戏娱乐 网络游戏 浏览器 图形图像 安全杀毒
电脑软件
输入法 下载工具 股票网银 办公软件 阅读翻译 压缩刻录 系统工具 编程开发
电脑软件
手机数码 教育学习 网络应用 主题壁纸 其他软件 font字体 存储管理 压缩解压
电脑软件
系统设置 改名软件 文本编辑 拼音输入 降温程序 电子阅读 打印工具 刻录软件
电脑软件
翻译软件 系统优化 网页浏览 广告过滤 网站推广 下载工具 FTP工具 邮件收发
专题合集

热搜：蛋仔派对官服版  大话诛仙bt版  懒人听书正式版  mm131纯净版  美剧鸟破解版  

首页 手机游戏 手机软件 软件下载 jquery插件库 程序下载 手机教程 专题
您的位置：首页 > 技术中心 > 前端框架 >

全面梳理下CSS盒模型的相关知识点

时间：2023-04-12 19:30

CSS 盒模型是 CSS 基础的重点难点，因此常被面试官们拿来考察候选人对前端基础的掌握程度，这篇文章将对 CSS 盒模型知识点进行全面的梳理。

我们先看个例子：下面的 div 元素的总宽度是多少呢？

<!DOCTYPE html><html><head><meta charset="utf-8">     <title>CSS 盒模型(https://github.com/webharry/fe-interview)</title><style>div {    background-color: lightgrey;    width: 200px;    border: 10px solid yellow;    padding: 10px;    margin: 20px;}</style></head><body>    <div>这里是盒子内的实际内容。有 10px 内间距，20px 外间距、10px 黄色边框。</div></body></html>

要回答这个问题，我们首先得弄明白 CSS 盒模型。

什么是 CSS 盒模型？

每个HTML元素都由一个矩形框（盒子）组成，称为盒模型。CSS 盒模型定义了一个 HTML 元素的尺寸和边距。

盒模型的各个部分

CSS 中组成一个盒子需要：

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height。
  • Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

如图所示：

CSS 盒模型各个部分

CSS 有两种盒模型：标准盒模型和IE盒模型。

  • 标准盒模型：元素的宽度和高度只包括内容（content），不包括内边距（padding）、边框（border）和外边距（margin）。
  • IE盒模型：元素的宽度和高度包括内容（content）、内边距（padding）和边框（border），但不包括外边距（margin）。

两种盒模型的区别是什么？

这两种盒模型的区别在于它们如何计算元素的宽度和高度，以及如何处理元素的内边距、边框和外边距。

  • 在标准盒模型中，元素的宽度和高度只包括内容，因此设置宽度和高度时需要考虑内边距、边框和外边距对它们的影响。
    • 如图：
    标准盒模型
  • 而在IE盒模型中，元素的宽度和高度包括内边距和边框，因此设置宽度和高度时不需要考虑内边距和边框对它们的影响。
    • 如图：
    IE盒模型

重要: 当您指定一个 CSS 元素的宽度（width）和高度（height）属性时，你只是设置内容区域（content）的宽度和高度。

两种盒模型间如何转换？

可以通过设置 CSS 的 box-sizing 属性来指定使用哪种盒模型。默认情况下，box-sizing 属性的值为 content-box，即使用标准盒模型。可以将其设置为 border-box，即使用IE盒模型。

写在最后

现在，我们再来看文章开头的例子，答案显而易见。因为在默认情况下，box-sizing 属性的值为 content-box，即使用标准盒模型。所以例子中的 div 元素总宽度是 200+10x2+10x2=240px。

（学习视频分享：web前端）

以上就是全面梳理下CSS盒模型的相关知识点的详细内容，更多请关注Gxl网其它相关文章！

相关推荐

电脑软件

热门排行

今日推荐

热门手游