美文网首页
关于CSS的盒模型知识点

关于CSS的盒模型知识点

作者: zhao_ran | 来源:发表于2020-09-06 10:27 被阅读0次

CSS分为两种盒模型:W3C标准盒子模型、IE盒子模型

两种盒模型的区别

1.W3C标准盒子模型:宽度 = 内容的宽度(content)paddingbordermargin都不算在里面。
2.IE盒子模型:宽度 = 内容宽度(content + padding + border)
补充:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

box-sizing属性

它是用来控制元素的盒子模型的解析模式,默认为content-box(W3C盒子模型)

-box-sizing: content-box,是W3C盒子模型。
-box-sizing: border-box,是IE盒子模型。

相关文章

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • 前端小册 - 浅谈CSS盒模型

    CSS盒模型的知识点 基本概念:标准盒模型和IE模型 标准模型和IE模型的区别 CSS如何设置这两种模型 JS如何...

  • 任务9-盒模型

    课程目标 掌握盒模型相关知识点 了解IE盒模型和 W3C 盒模型区别 课程任务 1. 盒模型包括哪些属性 CSS盒...

  • 6.3盒模式

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

  • 盒模型

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

  • 关于CSS的盒模型知识点

    CSS分为两种盒模型:W3C标准盒子模型、IE盒子模型 两种盒模型的区别 1.W3C标准盒子模型:宽度 = 内容的...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • 网易微专业之《前端工程师》学习笔记(3)-CSS盒模型

    CSS中盒模型是非常核心的一个概念,类似现实生活中的收纳。 盒模型的知识点包括有width、height、padd...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

网友评论

      本文标题:关于CSS的盒模型知识点

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