Skip to content

2. 盒模型的理解 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
zepang opened this issue Mar 9, 2020 · 1 comment
Open

2. 盒模型的理解 #2

zepang opened this issue Mar 9, 2020 · 1 comment
Labels
css css

Comments

@zepang
Copy link

zepang commented Mar 9, 2020

盒模型主要有以下几部分组成：

  • 内容（content）
  • 内边距（padding）
  • 边框（border）
  • 外边框（margin）

盒模型分为两种：

  1. 标准盒模型(w3c 盒模型) 标准盒模型的 width = content
  2. IE 盒模型 IE 盒模型的 width = padding + border + content

默认的情况下，盒子都是基于标准盒模型的盒子。

在 css3 中出现了 box-sizing 属性，该属性会改变默认盒子的盒模型。该属性的两个属性值分别表示为：content-box（标准盒模型）和 border-box（IE 盒模型）。
@webVueBlog webVueBlog added the css css label Mar 9, 2020
@webVueBlog webVueBlog pinned this issue Mar 9, 2020
@webVueBlog
Copy link
Member

什么是盒子模型？

在网页种，一个元素占有空间的大小由几个部分构成，其中包括元素的内容content，元素的内边距padding，元素的边框border，元素的外边距margin四个部分。

这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只是用来分隔相邻的区域。

四个部分一起构成了css中元素的盒模型。

@webVueBlog webVueBlog unpinned this issue Mar 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zepang @webVueBlog