css盒子模型
How not knowing this concept may cost you a job!
不知道这个概念怎么可能会让您丧命！
Despite being a fundamental concept in web development, a great number of software engineers have no clue as to what the box model is or how it works. One hiring manager once revealed that they purposely like to ask applicants to define it on interviews and make it one of the determining factors for hiring front-end engineers. Not understanding this concept may cost many developers a job that they could’ve landed otherwise. The good news is that it is quite a simple topic that doesn’t take much to understand.
d espite是在Web开发中的一个基本概念，软件工程师的大量毫无线索的盒子模型是什么，或者它是如何工作。 一位招聘经理曾经透露过，他们有意让求职者在面试中对其进行定义，并使之成为雇用前端工程师的决定因素之一。 如果不了解这个概念，可能会使许多开发人员付出本来可以免去的工作。 好消息是，这是一个非常简单的主题，不需要太多了解。
The box model defines the structure of HTML elements on webpages
框模型定义网页上HTML元素的结构
The box model describes the structure of webpages. Every webpage has different parts or boxes that form the skeleton of that page and every HTML element on it. These boxes are commonly used to define the layout of those elements. Essentially, four boxes wrap around every HTML element: margin, border, padding, and content.
盒子模型描述了网页的结构。 每个网页都有不同的部分或框 ，这些部分或框构成了该页面及其上每个HTML元素的框架。 这些框通常用于定义这些元素的布局。 本质上，每个HTML元素都用四个框围起来：边距，边框，填充和内容。
The margin is the outermost box of the box model. It wraps around the border and is transparent by default.
边距是盒子模型的最外面的盒子。 它环绕边框，默认情况下是透明的。
The border is the next layer, after the margin, that wraps around the padding of HTML elements. Some elements have visible borders and others don’t.
边框是边界之后的下一层，环绕HTML元素的填充。 有些元素具有可见的边框，而另一些则没有。
The padding is the box that wraps around the content and is also transparent by default.
填充是环绕内容的框，默认情况下也是透明的。
The content is the innermost box. It is where elements like pictures, texts appear.
内容是最里面的盒子。 它是图片，文本等元素出现的地方。