📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 盒模型
  • 外边距和内边距
  • 标准盒模型和怪异盒模型
在GitHub上编辑
  1. 杂项
  2. CSS

盒模型

盒模型

在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,而我们使用最广泛的“盒子”有块级盒子和内联盒子,两者在页面流和元素之间表现不同的行为。

块级盒子:

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽

  • 每个盒子都会换行

  • width和height属性可以发挥作用

  • 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”

内联盒子

  • 盒子不会产生换行。

  • width 和 height属性将不起作用。

  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

内联盒子和块级盒子可以通过display属性来转变。

接下来我们来讨论下什么是盒模型,盒模型定义了我们前面所说的盒子的结构——内容、内边距、边框、外边距,因为我们所看到的页面正是由一个个盒子组成的,因此理解盒模型对于学习页面构建十分重要。值得注意的是,完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。

前面说到盒模型定义了盒的结构,下面我们来详细介绍一下盒模型的结构,在css中组成一个块级盒子需要

  • 内容。大小可以通过width和height设置

  • 内边距。在边框和内容之间的空白区域,大小通过padding设置

  • 边框。边框包裹内容和内边距,大小通过border相关属性设置

  • 外边距。最外面的区域,是盒子与其他元素之间的区域,大小通过margin相关属性设置。

外边距和内边距

内边距通过padding相关属性控制,外边距通过margin属性控制。

margin属性可正可负,但padding属性只能为正。这很好理解,margin外边距影响着盒子外部的位置,外边距为正时推开其他元素,为负时则收缩空间,而内边距不需要收缩空间,收缩空间会导致内容和边框重叠,因此内边距不能为负。

外边距另一个非常需要注意的点就是可能会出现折叠现象。

在下面的例子中,我们有两个段落。顶部段落的页 margin-bottom为50px。第二段的margin-top 为30px。因为外边距折叠的概念,所以框之间的实际外边距是50px,而不是两个外边距的总和。

标准盒模型和怪异盒模型

盒模型又分为标准盒模型和怪异盒模型。标准盒模型就是默认的盒模型。标准盒模型和怪异盒模型的区别是

  • 标准盒模型的width和height属性设置的是内容的大小

  • 怪异盒模型的width和height属性设置的是内容 + 内边距 + 边框的大小

标准盒模型和怪异盒模型可以通过css属性box-sizing来改变,box-sizing默认值是content-box,即标准盒模型,如果要改为怪异盒模型可以设置为border-box

上一页BFC下一页css选择器

最后更新于3年前

Diagram of the box model
image-20211230215554415