css的box模型_CSS Box模型

css的box模型

Each and every element created using any HTML tag, is a box. The CSS box model, shows the margin, border, padding and actual space for content as different spaces, which together forms any element.

使用任何HTML标记创建的每个元素都是一个框。 CSS框模型将内容的页边距，边框，填充和实际空间显示为不同的空间，这些空间共同构成了任何元素。

If you use Chrome Browser, press Command + Option + I (for Mac OSX) and F10 (for Windows OS).

如果您使用的是Chrome浏览器，请按Command + Option + I (对于Mac OSX)和F10 (对于Windows OS)。

• Now click on the Select an Element... icon, present at the top-left corner.

  现在，单击左上角的Select an Element...图标。

  

• After clicking on the above icon, now you can select and click on any HTML element, that you want to inspect.

  单击上面的图标后，现在您可以选择并单击要检查的任何HTML元素。

• For example: We chose our sidebar, and immediately you can see the HTML element appear corresponding to the element selected under the Elements tab and on the right side, the CSS styling applied to that element is displayed.

  例如：我们选择了侧边栏，然后您立即看到HTML元素出现，该元素对应于在Elements选项卡下选择的元素，并且在右侧，显示了应用于该元素的CSS样式 。

  

  If you scroll down in the Styles section, you will see the Box Model representation for the selected element there.

  如果在“ 样式”部分中向下滚动，则将在此处看到所选元素的“框模型”表示。

  

  Try hovering your mouse over the Box Model representation in the Styles section and you will see that the same will be highlighted on the actual element.

  尝试将鼠标悬停在“ 样式”部分的“框模型”表示上，您会看到在实际元素上将突出显示相同的内容。

什么是盒子模型？ (What is Box Model?)

The Box Model is nothing but representation of various sections of an element box. These components/sections are:

盒子模型不过是元素盒各个部分的表示。 这些组件/部分是：

• content: This is the main area which holds the text and images inside an element.

  content ：这是在元素内保存文本和图像的主要区域。

• padding: This is the empty space around the content inside the element.

  padding ：这是元素内内容周围的空白区域。

• border: This is the border around the content and padding.

  border ：这是内容和填充周围的边界。

• margin: This is the empty space outside the border.

  margin ：这是边界外的空白区域。

元素的实际高度和宽度 (Actual Height and Width of the Element)

When we use CSS to specify height and width of an element explicitly, then this height and width is for the content area of the element. While the actual space occupied by an element is inclusive of content area, padding, border and margin.

当我们使用CSS显式指定元素的高度和宽度时，则此高度和宽度用于元素的内容区域。 元素实际占用的空间包括内容区域，填充，边框和边距。

#myelement {
    height:200px;
    width:200px;
    padding:10px;
    margin:10px;
    border:5px solid red;
}

Live Example →

现场示例→

For the above styling, HTML element with id as myelement must have a defined width and height of 200px. But the actual height and width occupied by this element will be different, as padding, border and margin must also be considered.

对于上述样式， id为myelement HTML元素必须具有200px的定义宽度和高度。 但是此元素实际占用的高度和宽度将有所不同，因为还必须考虑填充，边框和边距。

Actual Width: Width(200px) + left & right padding(10px + 10px) + left and right border(5px + 5px) + left and right margin(10px + 10px) = 250px

实际宽度 ：宽度(200px) +左右填充(10px + 10px) +左右边框(5px + 5px) +左右边距(10px + 10px)= 250px

Actual Height: Height(200px) + top & bottom padding(10px + 10px) + top and bottom border(5px + 5px) + top and bottom margin(10px + 10px) = 250px

实际高度 ：高度(200px) +顶部和底部填充(10px + 10px) +顶部和底部边框(5px + 5px) +顶部和底部边距(10px + 10px)= 250px

框影 (Box Shadow)

Just like text-shadow, the property box-shadow is used to add a shadow to the entire element box.

就像text-shadow ，属性box-shadow用于为整个元素框添加阴影。

Syntax:

句法：

box-shadow: <horizontal-displacement> <vertical-displacement> <blur> <color>;

blur and color values are not mandatory.

blur和color值不是强制性的。

#box-shadow {
    box-shadow: 5px 5px 5px grey;
}

Live Example →

现场示例→

翻译自: https://www.studytonight.com/cascading-style-sheet/css-box-model

css的box模型