Sym - 一个用 Java 实现的现代化社区平台 • 源码注册

Pipe - 小而美的开源博客平台 • 体验皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

描述 CSS 盒子模型布局并简要描述其每一个部分

2018-12-29

回答

CSS 盒子模型(Box Model)布局包含内容(content)、内边距(padding)、边框(border)、外边距(margin)四个部分。

  • content:盒子内部填充元素内容(例如文本、图像或视频播放器等)的区域。他的大小为 content-box 的宽和高。相关 CSS 属性为 widthmin-widthmax-widthheightmin-heightmax-height
  • padding:内容周围的区域。他的大小为 padding-box 的宽和高。由 CSS 中的 padding 属性控制。
  • border:边框,在内边距的外围。他的大小为 border-box 的宽和高。由 CSS 中的 border 属性控制。
  • margin:最外围的透明区域,即边框外围区域。他可以将 DOM 中相邻的元素分开。他的大小为 margin-box 的宽和高。由 CSS 中的 margin 属性控制。

alt text

加分回答

  • 在前端面试中这是一个非常常见的问题,他虽然很简单,但你是否知道及掌握却很重要 ⚠️
  • 标准盒模型:属性 width / height 只包含 content,不包含 border 和 padding
  • IE 盒模型:属性 width / height 包含 content + padding + border
  • IE6/7/8 中 DOCTYPE 缺失会触发 IE 盒模型,标准中可使用 box-sizing 属性进行控制:content-box | border-box | inherit
  • JavaScript 如何设置和获取盒模型对应的宽和高
    • element.style.width / height 只能取到行内样式的宽和高,style 标签中和 link 外链的样式无法获取
    • window.getComputedStyle(element).width / height 获取元素的宽或高:content + padding + border + 'px'
    • dom.getBoundingClientRect().width / height 同上,但返回值为数字类型,不含 px
  • 页面中多个元素的流布局属于格式化上下文(formatting context),这个元素可能是块元素也可能是行内元素。块元素的为 BFC(Block formatting contexts),行内元素的为 IFC(Inline formatting contexts)。常见场景如:垂直块元素 margin 重叠;行内元素高度由 line-height 决定等。BFC 和 IFC 规则不需死记硬背,在编码过程中注意调试和灵活运用即可。

返回总目录

每天 30 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步