美文网首页
什么是盒模型? 谈谈你对盒模型的认识?

什么是盒模型? 谈谈你对盒模型的认识?

作者: 风雅欢乐 | 来源:发表于2020-05-10 21:01 被阅读0次

每个元素在页面中都会生成一个矩形区域(盒子)

盒子有两种类型:

  1. 行盒, display属性等于inline的元素
  2. 块盒, display属性等于block的元素

行盒在页面中不换行, 块盒则独占一行.
display属性的默认值是: inline
而浏览器默认样式表为某些元素设置成了块盒: 容器元素, h1~h6, P元素
常见的行盒则有: image, span, a, video, audio

盒子的组成部分

无论行盒块盒, 都由下面几个部分组成, 由内向外分别是:

  1. 内容content, 内容部分通常叫做内容盒content-box
  2. 填充(内边距)padding, 填充区+内容区=填充盒padding-box
  3. 边框border, 边框+填充区+内容区=边框盒border-box
  4. 外边距margin, 边框到其他盒子的距离

相关文章

  • 前端面试准备--2.css盒模型

    css盒模型 1.题目:谈谈你对css盒模型的认识(从理论转化到应用) 基本概念:标准模型+ IE模型border...

  • 什么是盒模型? 谈谈你对盒模型的认识?

    每个元素在页面中都会生成一个矩形区域(盒子) 盒子有两种类型: 行盒, display属性等于inline的元素 ...

  • 前端面试系列:CSS盒模型

    题目:谈谈你对CSS盒模型的认识 一、 基本概念 标准模型+IE模型。盒子模型包括 border、margin、p...

  • 3-4 CSS盒模型

    题目:谈谈你对CSS 盒模型的认识 基本概念 标准模型+IE模型 标准模型和IE模型的区别 CSS 如何设置这两种...

  • 前端面试题-css盒模型

    一、题目:谈谈你对CSS盒模型的认识 1. 基本概念? 有标准模型和IE模型两种,由margin、padding、...

  • css盒模型及BFC

    css盒模型 题目:谈谈你对CSS盒模型的认识 文档中每个元素都会被描述为一个矩形盒子,盒子有一个边界,分别为ma...

  • CSS第三节(第七天)

    1.认识个模型 2.盒模型相关属性 3.盒模型边距合并 1.认识盒模型: 所谓盒子模型就是把HTML中的元素看作是...

  • 盒模型、页面重构【前端面试问题(二)】

    一、盒模型 什么是盒模型? 盒模型的组成由里向外是content,padding,border,margin.盒模...

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • CSS布局基础:盒模型、display、line-height

    01 什么是盒模型,IE 盒模型和W3C盒模型有什么区别? IE盒模型:width:=content的宽度+pad...

网友评论

      本文标题:什么是盒模型? 谈谈你对盒模型的认识?

      本文链接:https://www.haomeiwen.com/subject/fjysnhtx.html